How to make a splash screen with react native

Question

I want to make a splash screen with react native, I try create this screen across this guide but isn't work the splash screen it does not show me anything

Do you know another way to create this view, can you help me please.

Answer 1

Just like this:

<FlatList
        data={[
          {
            id: "1",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
          {
            id: "2",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
          {
            id: "3",
            image: require("./someImage.png"),
            title: "Title",
            description: "Description",
          },
        ]}
        renderItem={({ item, index }) => {
          return (
            <Item
              image={item.image}
              title={item.title}
              description={item.description}
            />
          );
        }}
        keyExtractor={(item) => item.id}
        horizontal
        showsHorizontalScrollIndicator
        pagingEnabled
        bounces={false}
      />

Where <Item /> is the component that you'll show your data (image, title and description). This was created using React Native with Expo.

Answer 2

it's a solution to making nice Splash Screen with your style for StatusBar and TimeOut 2s to navigate it:

in my project I want to make a splash with SplashScreen.js and then navigate to Home.js or Error.js . my App.js navigate between the pages! Home.js & Error.js content are optional ( imagine only the <Text> HomePage & Error in it!

SplashScreen :

import React from 'react';
import { StatusBar , View , Text , ActivityIndicator } from 'react-native';
export default class SplashScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#34495e'}}>
                <StatusBar backgroundColor="#2c3e50" barStyle="light-content"/> //NICE STYLE FOR YOUR STATUSBAR
                <Text style={{ color : 'white',fontSize : 18 }}>Hello Splash</Text>
                <ActivityIndicator color={'white'}/> //YOUR SPINNER WAITING
            </View>
        )
    }
}

in your **App.js: **

import React from 'react';
import SplashScreen from './SplashScreen';
import Error from "./Error";
import Home from "./Home";

export default class Application extends React.Component {

    componentWillMount() {
        this.state = {
            view : <SplashScreen />
        };


        setTimeout(() => {
            //IF FALSE NAVIGATE TO ERROR
            if(true) {
                this.setState({
                    view : <Home/>
                })
            } else {
                this.setState({
                    view : <Error/>
                })
            }
        }, 2000) //TIME OF WAITING


    }

    render() {
        return (
            this.state.view
        )
    }
}

If you build and test , your project run truly and Splash stay 2s in your screen then navigate to Home :)