react-native-skottie

If you are using Proguard in your Android release builds, you must add the following rules to your proguard-rules.pro file to prevent Skia and Skottie classes from being stripped:

# for skia, if you haven't add it
-keep class com.shopify.reactnative.skia.** { *; }

# for skottie
-keep class com.skiaskottie.** { *; }

Install react-native-skottie using yarn.

Important: This library depends on @shopify/react-native-skia. You must install @shopify/react-native-skia (version >= 1.x.x) before installing react-native-skottie.

yarn add react-native-skottie

To drive an animation using a Reanimated SharedValue, pass the value to the progress prop. This allows for high-performance, frame-perfect control of the animation state (e.g., scrubbing through an animation based on scroll position).

When progress is provided, autoPlay and speed/duration props are ignored as the animation is driven externally.

import { useSharedValue } from 'react-native-reanimated';
import { Skottie } from 'react-native-skottie';

const progress = useSharedValue(0);

// ...
<Skottie 
  source={require('./animation.json')} 
  progress={progress} 
/>

The Skottie component is the primary React component for rendering Lottie animations via Skia.

Important Setup Requirement: You must import @shopify/react-native-skia at the top of your file to ensure the Skia module is registered before using Skottie.

Basic Usage

import '@shopify/react-native-skia';
import { Skottie } from 'react-native-skottie';

// ...
<Skottie 
  source={require('./animation.json')} 
  autoPlay={true} 
  loop={true} 
/>

Use the Skottie component to render Lottie (JSON) or DotLottie (.lottie) animations. It is designed as a drop-in replacement for lottie-react-native.

import { Skottie } from 'react-native-skottie';
// DotLottie files are supported as well!
import LottieAnimationFile from './animation.json';

export default function App() {
  return (
    <Skottie
      style={styles.flex1}
      source={LottieAnimationFile}
      autoPlay={true}
    />
  );
}

You can control the animation playback (play, pause, reset) using a SkottieViewRef attached to the Skottie component.

import { Skottie, SkottieViewRef } from 'react-native-skottie';
import { Button, View } from 'react-native';
import { useRef } from 'react';
import LottieAnimationFile from './animation.json';

export default function App() {
  const skottieRef = useRef<SkottieViewRef>(null);

  return (
    <View>
      <Skottie
        ref={skottieRef}
        style={styles.flex1}
        source={LottieAnimationFile}
      />

      <Button
        title="Play"
        onPress={() => skottieRef.current?.play()}
      />
      <Button
        title="Pause"
        onPress={() => skottieRef.current?.pause()}
      />
      <Button
        title="Reset"
        onPress={() => skottieRef.current?.reset()}
      />
    </View>
  );
}

When using react-native-skottie within a monorepo structure, you may need to manually configure autolinking in your react-native.config.js file. This ensures that the React Native CLI can correctly locate the package's native source code by pointing the root property to the directory containing the package's package.json.

const path = require('path');
const pak = require('../package.json');

module.exports = {
  dependencies: {
    [pak.name]: {
      root: path.join(__dirname, '..'),
    },
  },
};

To ensure Lottie files are correctly handled as assets by the Metro bundler, you must add 'lottie' to the resolver.assetExts array in your metro.config.js.

const config = {
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, 'lottie'],
  },
};

The SkottieAPI allows you to create SkSkottie instances manually. This is useful for inspecting animation metadata like duration before rendering.

// Example usage of SkottieAPI
const skottieAnimation = SkottieAPI.createFrom(source);
console.log(skottieAnimation.duration);

The SkottieViewRef allows imperative control of the animation instance via the following methods: