Practical,

Currently working on a mobile app using React Native, I wanted to use a simple Splash Screen, Loading Screen while logging in or loading content.

I found a tutorial by medium: How to add a splash screen to a react native app

The problem is this requires a lengthy process and some native coding which beats the idea of React Native.

I noticed however that React Native has a modal component: React Native Modal and I thought this could make a very interesting splash screen if used properly.

Here is an example of how I would like it to work:

I also wanted to make sure it was very easy to implement to any of my views hence it can easily be called like this:


<Splashscreen modalVisible={this.state.isLoading}/>

this.state.isLoading is simply a state that is set to true on fetching data and set to false on receiving the server response.

Here is the simple version of the Splash Screen without the animation.

Link to Gist


import React, {Component} from 'react';
import { Modal, View, Text, Image } from 'react-native';

export default class Splashscreen extends Component {

  constructor () {
    super()
  }

 render() {
    return (
      <Modal
        animationType="fade"
        transparent={false}
        visible={this.props.modalVisible}
        onRequestClose={() => {
          alert('Modal has been closed.');
        }}>
        <View style={{flex:1, backgroundColor: "#ff6659", justifyContent: 'center', alignItems: 'center',}}>
          <Image
            style={{ width: 300, height: 300 }}
            source={{uri: 'https://image.noelshack.com/fichiers/2018/33/6/1534614310-logo.png'}}/>
        </View>
      </Modal>
    );
  }
}