Hướng dẫn tạo App Icon, Splash Screen cho ứng dụng React Native.

Cần chuẩn bị 2 hình ảnh đúng kích cỡ cho app icon và Splash screen đặt vào trong thư mục của project.

Icon App: icon.png square 512 x 512

Splash screen: splash.png quare 2048 x 2048

Bước 1: cài thư viện

// install tool
brew install imagemagick
npm install -g yo generator-rn-toolbox

Bước 2: Tạo ảnh Icon + Splash chuẩn định dạng

// generate splash screen images
yo rn-toolbox:assets --icon icon.png --splash splash.png --store

Bước 3: Cài thư viện để tạo màn hình splash: react-native-splash-screen

yarn add react-native-splash-screen

Bước 4: Link thư viện

react-native link react-native-splash-screen

Bước 5: Config

Đối với IOS:

Mở xcode, vào project => build settings => header search paths add

$(SRCROOT)/../node_modules/react-native-splash-screen/ios

Cập nhật AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

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

    [RNSplashScreen show];  // here
    return YES;
}

@end

Đối với android sửa ở file MainActivity.java

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

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

Tạo file launch_screen.xml vào thư mục android/app/src/main/res/layout như sau:

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

thêm màu vào file android/app/src/main/res/values/colors.xml như sau:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Bạn cũng có thể chỉnh styles cho splash ở android/app/src/main/res/values/styles.xml và thêm style như sau

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        
        <item name="android:windowIsTranslucent">true</item> //styles
    </style>
</resources>

Bước 6: Ở màn hình index.js của react native gọi thư viện splash như sau:

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

Bạn cần ẩn màn splash đi sau khi ứng dụng đã được khởi tạo xong.

Chúc các bạn thành công!

Nguồn: Doc react-native-splash-screen

https://ntdung1128.wordpress.com/2018/10/18/huong-dan-tao-icon-app-splash-screen-cho-ung-dung-react-native/