@byron-react-native/splash-screen

react-native-splash-screen

Getting started

$ npm install @byron-react-native/splash-screen --save

Or

$ yarn add @byron-react-native/splash-screen

Usage

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import SplashScreen from '@byron-react-native/splash-screen';

export default class App extends Component {
  state = {
    status: 'starting',
    message: '--',
  };

  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>☆SplashScreen example☆</Text>
        <Text style={styles.instructions}>STATUS: {this.state.status}</Text>
        <Text style={styles.welcome}>☆NATIVE CALLBACK MESSAGE☆</Text>
        <Text style={styles.instructions}>{this.state.message}</Text>
      </View>
    );
  }
}

Android:

Update the MainActivity.java to use @byron-react-native/splash-screen via the following changes:

// ...other code
import android.os.Bundle;
import com.byronsplashscreen.SplashScreen;
// ...other code

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS:

Update AppDelegate.m with the following additions:

// ...other code
#import "SplashScreen.h"
// ...other code

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [SplashScreen initWithStoryboard:@"LaunchScreen" rootView:rootView];
    
    return YES;
}

@end

Android:

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

• drawable-ldpi
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi