REACT NATIVE

PENGENALAN
PEMBAHASAN

• Apa itu React Native ?

• Mengapa React Native ?
• Instalasi Environment React Native
• Impementasi UI Pada React Native & Studi Kasus ( Aster News )
APA ITU REACT NATIVE ?
React Native merupakan javascript framework yang memungkinkan
developer untuk membangun aplikasi native cross platform dengan satu
sumber kode yang sama.

Bridge digunakan sebagai media komunikasi dengan sebuah kode pada

JavaScript Runtime Environment. Tak hanya itu, bridge juga memiliki fungsi
untuk menghubungkan Native Code pada tombol yang sudah ada pada
aplikasi dengan kode yang ada
MENGAPA REACT NATIVE ?

React native mempermudah melakukan pengembangan

aplikasi dengan code base yang sama untuk beberapa
device platform
Ada beberapa point penting mengapa tentang React Native

1. Mudah dipelajari

2. Lebih Hemat Anggaran

3. Dukungan Komunitas yang besar

INSTALASI REACT NATIVE

- Instalasi Raect Native

Bahan – Bahan yang dibutuhkan sebelum menginstall react native diantaranya :
1. Chocolately
2. Java 11
3. Android Studio
4. Emulator (Optional)
5. Node JS
https://reactnative.dev/docs/environment-setup
- Membuat Project Baru di React Native
- Menjalankan Aplikasi Di Emulator
IMPEMENTASI UI PADA REACT NATIVE

Ada beberapa hal yang harus diketahui dahulu sebelum memulai implementasi UI pada react native :
1. Flexbox (https://reactnative.dev/docs/flexbox)
2. Height & Width (https://reactnative.dev/docs/height-and-width)
Implementasi UI AsterNews ( SplashScreen & Halaman Feed)
FLEXBOX (HTTPS://REACTNATIVE.DEV/DOCS/FLEXBOX)

React Native pada umumnya sangat mirip dengan React, namun perbedaan besarnya terletak pada styling
component nya. Untuk Styling, React Native menggunakan code yang mirip dengan CSS yang disebut
Flexbox Layout. Flexbox itu sendiri berfungsi sebagai fixed layout pada ukuran layar yang berbeda pada
aplikasi android atau iOS.
Properti pada Flexbox meliputi :
• FlexDirection
• Justify content
• AlignItems
• Flex Wrap
FLEX DIRECTION

Flex Direction memiliki 2 value yakni row dan column dengan column sebagai nilai defaultnya. Jika kita
memilih ‘row’ yang berarti baris arah sumbu utama, empat kotak yang akan kita buat akan disusun secara
horizontal, sedangkan untuk column disusun secara vertikal
JUSTIFY CONTENT
Justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox
tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak
flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.
ALIGN ITEMS

Align-items mendefinisikan bagaimana item-item pada container flex tersebut diletakkan sepanjang garis
tegak lurus pada sumbu utama (cross-axis). Ini sama halnya dengan justify-content tapi peletakkannya saja
yang berbeda.
FLEX WRAP

Flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus
disejajarkan dalam satu baris. Artinya, elemen item tersebut digulung (dipindahkan) ke baris baru bila
sudah memenuhi lebar container-nya.
HEIGHT & WIDTH
Ada beberapa cara penggunaan height dan width pada react native , yaitu dengan menggunakan Fixed
Dimensions, Flex Dimensions, dan Percentage Dimensions

Fixed Dimensions
Dalam Fixed Dimensions ini angka yang dimasukan fix , seperti contoh “ width:50, height:50 ” dalam react native ,
angka yang dimasukan ini mewakili satuan pixel

Flex Dimensions
Pada penggunaan Flex Dimensions ini komponen akan menyesuaikan dengan ruang yang tersedia secara dinamis,
umumnya flex yang sering dipakai adalah 1, contoh penggunaan “ flex:1 ” dengan contoh disamping maka
komponen yang menggunakan flex akan menyesuaikan / mengisi ruang yang tersedia.