17 Mei 2018 11.07

Membuat Splash Screen React Native

Setelah beberapa kali mencoba membuat Splash Screen di React Native yang cukup njlimet dibandingkan dengan saat membuat splash screen di Ionic, saya akan mencoba mengulangi langkah-langkah pembuatan splash screen di React Native. Tujuan artikel ini hanya untuk dokumentasi agar tidak lupa karena langkah-langkahnya rumit :D. Sumber utamanya adalah video youtube Perfect React Native Splash Screen (Android) ditambah dengan halaman [ERROR] Build faild after update react native and android sdk build tools dan Error:Execution failed for task ':app:processDebugResources'. > java.io.IOException: Could not delete folder “” in android studio. Dua halaman tadi digunakan saat proses build yang gagal.

Membuat project Baru

Untuk membuat project baru di React Native bisa menggunakan perintah berikut:

react-native init splashscreen
cd splashscreen

dan untuk menjalankan ke emulator atau device bisa menggunakan perintah berikut:

react-native run-android

Gambar Icon

Yang akan dibuat adalah splash screen sederhana dengan background warna dan terdapat gambar icon di tengah layar. Membuat icon bisa dilakukan dengan tool Ape Tools - Image Gorilla yang bisa men-generate beberapa gambar dengan ukuran berbeda-beda dari satu gambar yang kita sediakan. Upload sebuah gambar yang akan dijadikan icon dan setelah itu tekan tombol Kapow!. Download file zip yang berisi file-file icon lalu kita distribusikan ke folder-folder dalam android/app/src/main/rest/minmap-**dpi dan pastikan sesuai dengan dpi nya.

Native code stuff

Kita akan berhubungan dengan kode-kode Java dan XML di Android native sehingga kita bisa menggunakan Android Studio untuk mengedit file-file yang ada dalam folder android.

  • Langkah pertama adalah buat folder baru di android/app/src/main/res dengan nama drawable. Setelah itu buat file baru dalam folder yang baru saja kita buat dengan nama file __background_splash.xml__ dengan isi:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/blue" />
  <item
    android:width="200dp"
    android:height="200dp"
    android:drawable="@mipmap/icon"
    android:gravity="center"
  />
</layer-list>
  • Kode diatas menggunakan value @color/blue yang belum didefinisikan, karena itu kita buat file baru di android/app/src/main/res/values dengan nama colors.xml dengan isi:
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="blue">#4F6D7A</color>
  <color name="primary_dark">#4F6D7A</color>
</resources>
  • Selanjutnya kita edit file android/app/src/main/res/values/styles.xml menjadi seperti berikut:
<resources>

  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <!-- Customize your theme here. -->
      <item name="android:statusBarColor">@color/blue</item>
  </style>

  <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@drawable/background_splash</item>
      <item name="android:statusBarColor">@color/blue</item>
  </style>

</resources>
  • Kita akan mengubah file android/app/src/main/AndroidManifest.xml menjadi seperti berikut ini:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="com.splashscreen">

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:allowBackup="false"
    android:theme="@style/AppTheme"
    tools:replace="android:allowBackup">
      <activity
        android:name=".SplashActivity"
        android:theme="@style/SplashTheme"
        android:label="@string/app_name">
        <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>
  • Kemudian kita akan membuat file android/app/src/main/java/com/splashscreen/SplashActivity.java. Bagian pathnya dan nama packagenya mungkin saja berbeda tapi yang pasti harus ada dalam folder kumpulan file .java. Isi file SplashActivity.java adalah sebagai berikut:
...

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);
    finish();
  }
}
  • Kita buat folder di dengan nama layout di android/app/src/main/res dan kemudian diisi dengan sebuah file bernama __launch_screen.xml__ yang berisi:
<?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="@color/blue"
  android:gravity="center">

  <ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_marginTop="24dp"
    android:src="@mipmap/icon"
  />
</LinearLayout>

react-native-splash-screen

Kita akan menggunakan module react-native-splash-screen dengan mengetikkan perintah:

npm install --save react-native-splash-screen

dan dilanjutkan dengan mengetikkan perintah:

react-native link

Setelah itu kita masih berhubungan dengan file java yaitu mengubah file android/app/src/main/java/com/splashscreen/MainActivity.java menjadi seperti berikut:

...

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

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

  ...
}

Kemudian terakhir kita edit file App.js menjadi seperti berikut:

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

export default class App extends Component<Props> {
  componentDidMount() {
    SplashScreen.hide();
  }

  render() {
...

Jalankan di emulator ataupun di device dengan perintah:

react-native run-android

Terima kasih dan Happy Coding :D

react native, splash screen

Tutorial android, native, react, import, folder, splash, screen, splashscreen, icon, gambar, perintah, java, class, edit, extends