How to add react native skottie in a react-native app

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

Skottie is a high performance library for running Lottie animations in Skia. 📄 Supports Lottie files (JSON) and DotLottie files (.lottie) 📈 Uses Skias GPU-acceleration 📉 Lower CPU usage 🏃 Higher frame rates 🔗 Based on @shopify/react-native-skia.

🏃 First install @shopify/react-native-skia since skottie is 🔗 Based on @shopify/react-native-skia.

Then install react-native-skottie :

npm install react-native-skottie

Here is the rest of the code

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import LottiesAnimation from './animation.json';
import {Skottie} from 'react-native-skottie';

const App = () => {
  return (
    <View>
      <Skottie
        style={{width: 350, height: 350}}
        source={LottiesAnimation}
        autoPlay={true}
      />
    </View>
  );
};

export default App;