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