Codementor Events

Add animation to your expo splash screen

Published Aug 01, 2022
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
Discover and read more posts from Ricky James
get started
post commentsBe the first to share your opinion
Show more replies