React Native Lottie Splash

A simple and customizable Lottie animation splash screen for React Native apps.

Installation

npm install react-native-lottie-splash
# or
yarn add react-native-lottie-splash

Make sure you have the peer dependencies installed:

• react
• react-native
• lottie-react-native

Usage

1. Import the SplashScreen component:

import SplashScreen from 'react-native-lottie-splash';

2. Implement in your App.js:

import React, { useState } from 'react';

function App() {
  const [isAnimated, setIsAnimated] = useState(false);

  const handleAnimationFinish = () => {
    setIsAnimated(true);
  };

  return (
    <>
      {isAnimated ? (
        // Your main app content
        <YourMainApp />
      ) : (
        <SplashScreen onFinish={handleAnimationFinish} />
      )}
    </>
  );
}

3. Using custom props:

import React, { useState } from 'react';
import SplashScreen from 'react-native-lottie-splash';

function App() {
  const [isAnimated, setIsAnimated] = useState(false);

  const handleAnimationFinish = () => {
    setIsAnimated(true);
  };

  return (
    <>
      {isAnimated ? (
        // Your main app content
        <YourMainApp />
      ) : (
        <SplashScreen
          onFinish={handleAnimationFinish}
          source={require('./path/to/your/lottie/file.json')}
          style={{ backgroundColor: 'white' }}
          resizeMode="contain"
          autoPlay={true}
          loop={true}
        />
      )}
    </>
  );
}

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | onFinish | (param: Boolean) => void | Yes | - | Callback function that fires when animation completes | | source | any | No | Default splash animation | Lottie animation source file | | style | ViewStyle | No | Full screen style | Custom styles for the animation container | | resizeMode | 'cover' | 'contain' | 'center' | No | 'cover' | Animation resize mode | | autoPlay | boolean | No | true | Whether to auto play the animation | | loop | boolean | No | false | Whether to loop the animation |

Example

import React, { useState } from 'react';
import SplashScreen from 'react-native-lottie-splash';

function App() {
  const [isAnimated, setIsAnimated] = useState(false);

  const handleAnimationFinish = () => {
    setIsAnimated(true);
  };

  return (
    <>
      {isAnimated ? (
        <NavigationContainer>
          {/* Your app content */}
        </NavigationContainer>
      ) : (
        <SplashScreen onFinish={handleAnimationFinish} />
      )}
    </>
  );
}

License

ISC

Author

Aqeel Ahmad