🚀 Splash Screen – React Native

A customizable Splash Screen built with React Native, Animated API, and Lottie.
This component provides a smooth entry animation and can be extended to navigate to any screen.

---

📸 Preview

---

📂 Folder Structure

project-root/
│
├── assets/
│ └── animations/
│ └── youranim.json # Lottie animation file
│
├── components/
│ └── Splash.js # Splash component
│
├── App.js
└── package.json

---

✅ Prerequisites

Make sure you have these dependencies installed:

npm install lottie-react-native
npm install @react-navigation/native

🔗 Usage

Update your Splash.js with below code:

import React, { useRef, useCallback } from 'react';
import { View, Animated, Dimensions, StyleSheet, Text } from 'react-native';
import LottieView from 'lottie-react-native';
import { useFocusEffect } from '@react-navigation/native';

const { width } = Dimensions.get('window');

const Splash = () => {

    const translateX = useRef(new Animated.Value(width)).current;

    useFocusEffect(useCallback(() => {
        handleSplash()
    }, [])
    );

    const handleSplash = async () => {
        Animated.timing(translateX, {
            toValue: (width - 200) / 2,
            duration: 800,
            useNativeDriver: true,
        }).start();
        const timeout = setTimeout(() => {
            // move to other screen 
        }, 2000);
        return () => clearTimeout(timeout);
    };
    return (
         <View style={styles.container}>
            <View style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}>
                <Text style={styles.title}>Splash</Text>
            </View>
            <Animated.View style={{ transform: [{ translateX }] }}>
                <LottieView
                    source={require('../assets/youranim.json')}
                    autoPlay
                    loop={true}
                    style={styles.lottie}
                />
            </Animated.View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'flex-start',
        backgroundColor: '#fff'
    },
    lottie: {
        width: 200,
        height: 200,
    },
    title: {
        fontSize: 48,
        fontWeight: '600'
    }
});

export default Splash;

📝 Notes

• Replace youranim.json with your own Lottie file.
• Adjust duration and setTimeout for timing.

✨ Done! Your app now has a beautiful splash screen with animation 🎉

---