Cara Buat Splash Screen Android React Native Dengan Mudah

Dalam tutorial ini. kita akan menunjukkan cara membuat dan menampilkan splash screen di React Native. kita akan menjelaskan cara membuat splash screen yang keren dan menajubkan untuk aplikasi android dan tentunya mudah untuk dipahami.

Apa itu Splash Screen?

Splash screen adalah layar pertama yang muncul sebelum mengakses seluruh fitur yang ada di aplikasi. splash screen bisa di bilang cara terbaik untuk membuat branding dan ikon di aplikasi yang menempel di bawah sadar pengguna.

Dalam aplikasi web, kami menggunakan preloader untuk menginformasikan animasi agar pengguna tetap terhibur saat operasi server sedang di proses. sederhana kedengarannya, ini adalah sangat penting untuk mempertahankan basis pengguna anda.

ada banyak sekali manfaat splash screen di React Native. Bayangkan, misal anda sedang memuat data dari Rest Api. anda ingin menampilkan pemuat saat pengguna menunggu, menampilkan pemuat segera setlah aplikasi dimulai membantu menyajikan tampilan yang terorganisis dan dirancang dengan baik kepada pengguna anda saat mereka sedang menunggu aplikasi disiapkan.

Contoh Splash Screen Bereaksi:

Untuk mengikuti tutorial splash screen React Native ini, Anda harus memiliki:

• Familiar dengan CSS, HTML, Javascript (ES6)
• Node.js dan Watchman diinstal pada komputer Anda
• Emulator Android untuk pengetesan
• Editor kode yang diinstal di mesin pengembangan Anda (misal VS Code)
• Pemahaman dasar tentang React/React Native

yuk mulai membuat splash screen.

Cara membuat layar splash di React Native

pertama siapkan logo atau ikon yang ingin di tempelkan saat aplikasi baru di mulai dan buka appicon.co upload dan Tarik gambar Anda pada kotak yang tersedia, pilih 4x sebagai ukuran dasar Anda, pilih Android, dan klik generate. Proses ini akan memakan waktu sekitar dua menit untuk diselesaikan, tergantung pada kecepatan internet Anda.

Selanjutnya, ekstrak file yang diunduh dan salin Android ke folder gambar yang terletak di direktori aset proyek awal yang Anda kloning.

Membangun layar splash di React Native membutuhkan beberapa penyesuaian. Untuk memulai, buka terminal dan pastikan anda berada di root direktori project dan ketik perintah

react-native-splash-screen --save

edit MainActivity.java yang terletak di android\app\src\main\java\com\appstracking\MainActivity.java

package com.appstracking;
import android.os.Bundle; // tambahkan ini

import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // tambahkan ini

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      SplashScreen.show(this);  // tambahkan ini
      super.onCreate(savedInstanceState);
  }
  @Override
  protected String getMainComponentName() {
    return "appstracking";
  }
}

tambahkan file colors.xml yang terletak pada android\app\src\main\res\values\ untuk keperluan warna background yang kita gunakan

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

tambahkan louch_screen.xml pada direktori layout android\app\src\main\res\layout. jika belum ada silakan buat folder baru. dan isi louch_screen.xml menjadi

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="@color/primary_dark"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="165dp"
        android:layout_height="75dp"
    android:src="@drawable/trackapp_2"  />
</RelativeLayout>

edit dan tambahkan file import pada app.js

import React, { useEffect, } from 'react'
import { View, StyleSheet, Text, Image, TouchableOpacity } from 'react-native'
import SplashScreen from 'react-native-splash-screen'

dan didalam class Node tambahkan

 useEffect(() => {
        SplashScreen.hide();
    }, [])

Kesimpulan:

Hampir semua aplikasi seluler membutuhkan layar splash. jadi membuat aplikasi sederhana react native splash screen untuk aplikasi.