1

I am beginner of React Native and building hybrid app with it. But I am not sure how to create a splash screen in my app.

There isn't any full code in any blog.

Please provide me the guide or full code for splash screen.

Thank you.

William G.
  • 393
  • 2
  • 6
  • 11

3 Answers3

1

I have made a very simple splash screen in my app, basically just a full screen image component, that I'm calling from the main application logic as long as my initialization is running (getting logged in state etc.) In the example below I've illustrated this with a simple setTimeout. You can further improve the splash screen by adding spinners or animation; or have a look at community created components or packages.

Splashscreen

var SplashScreen = React.createClass({
  getInitialState() {
    return {
      image: 'splash'
    }
  },

  render: function(){
    return (
      <View style={styles.container}>
        <Image style={styles.image} source={{uri: this.state.image}} resizeMode="cover" />
      </View>
    )
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1
  }
});

Main application

getInitialState: function() {
   return {renderSplashscreen: true}
},

componentDidMount: function() {
   setTimeout(() => this.setState({renderSplashscreen: false}), 3000)
},

render: function() {
    if (this.state.renderSplashscreen) {
      return (<SplashScreen />)
    }
    return (<MainApp />    
}
Frederick Motte
  • 1,164
  • 9
  • 15
0

There's two ways to go about it.

  1. Implement it yourself via native code.
  2. Use a react-native package that handles it for you.

If you're implementing it yourself, you can use these resources:

Community
  • 1
  • 1
Zidail
  • 600
  • 5
  • 11
0

I have created a tiny guide for adaptive splash screen Hope it helps

https://github.com/hiteshsahu/ReactNative-Adaptive-Splash-Screen-Android/blob/master/README.md

Hitesh Sahu
  • 41,955
  • 17
  • 205
  • 154