Animating Splash Screen With React Native Reanimated

1. Setting Up the Project

npx react-native init AnimatedSplashScreenExample
cd AnimatedSpashScreenExample

For navigation regulations, follow the instructions in the link here.

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
cd ios
pod install

npm install @react-navigation/stack
npm install react-native-gesture-handler

To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js: see

import ‘react-native-gesture-handler';

npm install @react-native-masked-view/masked-view
cd ios
pod install

2. Install the React Native Reanimated package

npm install react-native-reanimated

Add react-native-reanimated/plugin plugin to your babel.config.js.

module.exports = {
 presets: [
   … 
 ],
 plugins: [
   …
   'react-native-reanimated/plugin', //add this line
 ],
};

cd ios && pod install && cd ..

3. Implementing the Animated Splash Screen

import React from 'react';
import {SafeAreaView, View, StyleSheet, Text} from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  FadeOut,
  Easing,
  FadeInUp,
} from 'react-native-reanimated';

const duration = 2000;
const easing = Easing.bezier(0.25, -0.5, 0.25, 1);

const SplashScreen = () => {
  const sv = useSharedValue(0);
  const scale = useSharedValue(1);

  const scaleStyles = useAnimatedStyle(() => ({
    transform: [{scale: scale.value}],
  }));

  React.useEffect(() => {
    scale.value = withTiming(scale.value * 2, {duration: 1000});
    sv.value = withTiming(1, {duration, easing});
  }, []);

  return (
    <SafeAreaView style={style.container}>
      <View style={style.imageContainer}>
        <Animated.Image
          style={[style.image, scaleStyles]}
          source={require('../assets/images/logo.png')}
          resizeMode={'center'}
        />
      </View>
      <View style={style.textContainer}>
        <Animated.Text
          entering={FadeInUp.delay(1000)}
          exiting={FadeOut}
          style={style.text}>
          healthypet
        </Animated.Text>
      </View>
    </SafeAreaView>
  );
};

const style = StyleSheet.create({
  container: {
    justifyContent: 'center',
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#818AF9',
  },
  imageContainer: {justifyContent: 'center', alignItems: 'center'},
  image: {
    height: 280,
    width: 270,
    position: 'absolute',
  },
  textContainer: {
    marginTop: 40,
  },
  text: {
    color: '#FFFFFF',
    fontSize: 20,
    fontFamily: 'Manrope-Medium',
    letterSpacing: 1.3,
  },
});

export default SplashScreen;

import React, {useState, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import SplashScreen from './screens/SplashScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

const App = () => {
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    // Simulate loading process
    setTimeout(() => {
      setIsLoading(false);
    }, 2300); // Adjust the time as needed
  }, []);

  return (
    <NavigationContainer>
      {isLoading ? (
        <SplashScreen />
      ) : (
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="HomeScreen" component={HomeScreen} />
        </Stack.Navigator>
      )}
    </NavigationContainer>
  );
};

export default App;

I hope, this guide will help you understand how to create a React Native app with an animated splash screen.

Find the full code here.