CONTOH CARA ME-RETRIEV DATA DAN MENAMPILKANNYA || REACT NATIVE + FIREBASE

Pada kali ini saya akan membuat tutorial tentang bagaimana menampilkan data yang ada di Firebase pada aplikasi yang telah dibuat. Sebelumnya saya menganggap yang telah membaca artikel ini telah mengerti tentang menghubungkan aplikasi react native pada realtime database firebase.

1. Pertama – tama   buatlah fungsi untuk mengambil data dari firebase
   
2. Ganti code sesuai dengan firebase realtime database yang anda buat. Dibawah ini adalah contoh database yang saya buat. Disini saya me-retrieve seluruh child pada /Barbershop. Jika anda ingin mencoba me-retrieve yang lain, dapat melihat di https://firebase.google.com/docs/database/admin/retrieve-data
   
3. Setelah itu buat tampilan untuk menampilkan data telah diambil, disini saya menggunakan map untuk menampilkan object valuenya.

Berikut adalah hasil dari data yang ditampilkan

Mungkin sekian tutorial yang dapat saya sampaikan, mohon maaf jika ada kekurangan. Kritik dan komentar membangun anda sangat bermanfaat bagi saya. Terimakasih.

»»  READMORE...

NESTED NAVIGATOR REACT-NATIVE || TabNavigator + DrawerNavigator + SwitchNavigator

Pada kali ini saya akan membahas tentang Nested Navigator di React-Native. Jadi navigasi yang saya gunakan disini adalah tab navigation, drawer navigation dan switch navigation. Jika anda belum mengerti apa itu tab, drawer dan switch, anda bisa membuka dokumentasi react-navigation untuk detailnya. Intinya tab navigation yaitu navigasi berbentuk tab yang mungkin berada dibawah atau diatas layar, drawer navigation yaitu panel navigasi yang berada pada samping layar dapat menggunakan swipe ataupun tombol untuk membukanya, dan switch navigation yaitu navigasi yang yang dapat digunakan untuk berpindah pindah layar tanpa harus menggunakan tab atau drawer.

Langsung saja kita aplikasikan react-navigation. Langkah yang harus dilakukan yaitu :

1. Install react-navigation dengan cara ketik npm install --save react-navigation pada cmd di folder project anda.
2. Setelah install selesai, buka project react native anda.
3. Edit code untuk menggunakan react-navigation. Hal pertama yang anda harus tambahkan pada code adalah import react-navigation terlebih dahulu. Misal, jika anda ingin menggunakan drawer navigation anda dapat mengetikkan import { createDrawerNavigation } from “react-navigation”. Contoh disini saya menggunakan ketiganya sekaligus. 
   
   
   
   
   
4. Setelah import dilakukan, gunakan apa yang telah diimport sebelumnya. Saya disini menerapkan nested navigation, maksudnya yaitu navigasi satu berada pada navigasi yang lain. Dibawah ini adalah contoh yang saya buat. Saya mengasumsikan anda telah membuat layar / screen yang akan digunakan untuk navigation. 
   
   
   
   
   
   
   
   
   
5. Setelah anda membuat seperti apa yang ada diatas, navigation akan muncul pada layar yang diinginkan.

Dalam memunculkan react navigation mungkin hanya seperti itu, untuk custom dan memperindah navigation yang telah dibuat mungkin akan dibahas di tutorial lain kali. Saya mohon maaf jika ada kekurangan, kritik dan saran anda akan sangat membantu. Terimakasih J

»»  READMORE...

NAVIGASI ANTAR SCREEN DENGAN STACK NAVIGATOR || REACT NATIVE

Pada kali ini saya akan membahas tentang tutorial tentang StackNavigator untuk berpindah dari Tampilan Screen satu ke Screen yang lainnya dengan Stack.

1. Install StackNavigator dengan menggunakan npm, ketik npm install --save react-navigation

2. Buka project react-native yang dibuat.

3. Edit app.js

4. Import StackNavigator dengan menggunakan import { StackNavigator } from ‘react-Navigation’  atau bisa juga dengan import { createStackNavigator } from ‘react-navigation’

5. Import file JS yang ingin ditampilkan, anda dapat menggunakan RouterName untuk memanggil screen. Seperti contoh simple diatas, saya mempunyai beberapa screen yaitu Loading, SignUp, Login, dll.

6. Dibawah adalah contoh berpindah screen menggunakan sebuah tombol, dengan memanggil router name dan dapat juga diberi parameter.

7. Coba pada Emulator/Device yang sudah terhubung.

Demikian Tutorial StackNavigator ReactNative pada kali ini, jika ada kesalahan saya mohon maaf. Kritik dan Saran anda sangat membantu. Terimakasih J

»»  READMORE...