In this short tutorial we are going to implement a react native skottie and lottie library.

Lottie React Native vs React Native Skottie Both Lottie React Native and React Native Skottie are libraries for adding Lottie animations to your React Native app. However, they have some key differences.

Lottie React Native
More mature and feature-rich: Lottie React Native has been around longer and has a larger community. It supports a wider range of Lottie features, such as vector shapes, masks, and trim paths. Larger file size: Lottie animations are saved as JSON files, which can be quite large. This can lead to slower loading times and increased app size. Potentially lower performance: Lottie animations can be CPU-intensive, especially on older devices.

React Native Skottie
Higher performance: React Native Skottie uses Skia, a high-performance 2D graphics library, to render Lottie animations. This can lead to smoother animations and lower CPU usage. Smaller file size: Skottie animations are saved as DotLottie files, which are a binary format that is smaller than JSON. This can lead to faster loading times and a smaller app size. Fewer features: Skottie is a newer library and does not yet support all of the features of Lottie. For example, it does not support vector shapes or trim paths. So, which one should you choose? If you need the most features and do not mind the larger file size and potentially lower performance, then Lottie React Native is a good choice. If you are looking for the best performance and smallest file size, then React Native Skottie is a better option.

npm install @shopify/react-native-skia

Then install react-native-skottie and lottie

npm install react-native-skottie lottie-react-native

Here is the rest of the code.

import {ScrollView, Text, View} from 'react-native';
import React from 'react';
import LottiesAnimation from './animation3.json';
import LottiesAnimation1 from './animation.json';

import {Skottie} from 'react-native-skottie';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <View>
      <ScrollView>
        <Text style={{textAlign: 'center', fontSize: 30}}>
          React Native Skottie
        </Text>
        <Skottie
          style={{width: 350, height: 350}}
          source={LottiesAnimation}
          autoPlay={true}
        />
        <Text style={{textAlign: 'center', fontSize: 30}}>
          React Native Lottie
        </Text>

        <LottieView
          source={LottiesAnimation}
          style={{width: 350, height: 350}}
          autoPlay
          loop
        />
        <Text style={{textAlign: 'center', fontSize: 30}}>
          React Native Skottie
        </Text>
        <Skottie
          style={{width: 350, height: 350}}
          source={LottiesAnimation1}
          autoPlay={true}
        />
        <Text style={{textAlign: 'center', fontSize: 30}}>
          React Native Lottie
        </Text>

        <LottieView
          source={LottiesAnimation1}
          style={{width: 350, height: 350}}
          autoPlay
          loop
        />
      </ScrollView>
    </View>
  );
};

export default App;