Tutorial Membuat On Boarding Atau App Intro React Native

Pada tutorial kali ini, kita akan belajar mengenai React Native Bahasa Indonesia, di tutorial ini akan saya jelaskan mengenai bagaimana cara membuat On Boarding atau App Intro di React Native.

On Boarding Atau App Intro React Native

App Intro atau On Boarding sendiri bertujuan untuk memberikan informasi kepada pengguna baru atau memberikan tutorial dan panduan bagi pengguna baru di aplikasi yang kita buat.

Apa Yang Akan Kita Pelajari?

1. Membuat project React Native dan Setup Library

2. Memulai Koding React Native

3. Penjelasan Kode React Native

Membuat project React Native dan Setup Library

Pertama agar kamu bisa mengikuti tutorial ini adalah dengan membuat project React Native terlebih dahulu, bila kamu belum memiliki project React Native, silahkan buka terminal/cmd mu dan ketihan perintah di bawah ini :

npx react-native init onboarding

Setelah project berhasil di buat silahkan masuk ke direktori project anda dengan perintah

cd onboarding

Setelah itu install library React Native untuk App Tour/ Tour Guide/ On Boarding, install lewat terminal/cmd kamu :

npm i react-native-app-intro-slider react-native-responsive-dimensions

Tambahan untuk iOS jika kamu ingin running di iOS silahkan ketikan perintah di bawah ini

cd ios && pod install

Setelah itu untuk cek apakah library terinstall dengan baik silahkan run project React Native mu, dengan perintah

npx react-native run-android atau npx react-native run-ios

Memulai Koding React Native

Selanjutnya adalah kita mulai ngoding, silahkan buka project React Native kamu di Text Editor favoritmu dan silahkan ubah kode di file App.js, menjadi seperti kode di bawah ini:

Selanjutnya silahkan run project React Native mu dan bila berhasil maka tampilan dari App Intro atau On Boarding akan seperti gambar di bawah ini:

App Intro React Native

Penjelasan Kode React Native

{
key: 'somethun',
title: 'Quick setup, good defaults',
text:
'React-native-app-intro-slider is easy to setup with a small footprint and no dependencies. And it comes with good default layouts!',
// Lokasi gambar mu
image: require('images/tour/buy.png'),
colors: ['#fff'],
},

Adalah data array untuk slider kita, seperti gambar, key dan judul.

onDone={() => alert('Done')}

Adalah ketika slide tour sudah habis maka user bisa menekan Done, kamu bisa menggunakan Asynstorage atau Sqlite untuk handle hal ini, agar nantinya Tour hanya sekali muncul ketika user instalasi aplikasi.

Sekian semoga tutorial React Native Bahasa Indonesia, mengenai cara membuat OnBoarding atau App Intro dapat bermanfaat dan membantu kamu yang ingin memberikan panduan/guide pada user baru. Happy Coding And Keep Learning.

Baca Tutorial React Native Lainnya :

#1 Pengenelan React Native Dan Cara Instalasinya Lengkap

#2 Tutorial React Native State Dan Props Serta Penjelasannya

#3 Tutorial Menampilkan Gambar React Native Yang Baik & Benar

#4 Tutorial React Native Alert, Beserta Jenis-Jenisnya Lengkap

#5 Tutorial ClickListener Pada React Native Serta Penggunaannya

#6 Tutorial React Native: Text Italic, Bold, Underline dan Styling

#7 Tutorial Membuat Custom TextArea Pada React Native

#8 Tutorial React Native Mengubah Warna Pada Placeholder
#9 Tutorial React Native : Advanced Webview Dengan Loader

#10 Tutorial Open Link Url Website Di React Native

#11 Tutorial React Native WhatsApp Direct Send Link

#12 Tutorial React Native Modal Dengan Desain Gambar