Add animation to your expo splash screen
Install Packages
npx create-expo-app splashScreenAnimation
yarn add react-native-animated-splash-screen
Require RN animated splash screen. Initially set your loading to false then update it in your time out.
import React, { useState } from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import AnimatedSplash from "react-native-animated-splash-screen";
export default function App() {
const [loading, setLoading] = useState(false);
setTimeout(() => {
setLoading(true);
}, 3000);
return (
<AnimatedSplash
translucent={true}
isLoaded={loading}
logoImage={require("./assets/splash.png")}
backgroundColor={"#262626"}
logoHeight={150}
logoWidth={150}
>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
</AnimatedSplash>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
Finally run the application on your emulator or stimulator using
yarn android
yarn ios