lottie-splash-one

App.js

import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import LottieView from 'lottie-react-native';

const App = () => {
  const [lottieLoaded, setLottieLoaded] = useState(false);

  if (!lottieLoaded) {
    return (
      <View style={styles.text}>
        <LottieView
          source={require('./assets/eid-mubarak-lottie.json')}
          autoPlay
          loop={false}
          resizeMode="contain"
          onAnimationFinish={() => {
            setLottieLoaded(true);
          }}
        />
      </View>
    );
  }
  return (
    <View style={styles.text}>
      <Text> Hello Lottie Splash! </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    fontWeight: 'bold',
  },
});

export default App;