React Native Responsive Design

Dalam React Native Anda harus memikirkan responsive design, jika tidak maka tampilan yang telah dibuat akan berantakan di beberapa device. Hal ini dikarenakan React Native tidak memiliki Constraint Layout layaknya Android Native atau iOS Native.

React Native telah memberikan solusi dengan memberikan component Dimensions, akan tetapi masalahnya Anda harus menghitung sendiri ukuran layar smartphone yang Anda gunakan untuk development app.

Anda juga tidak perlu khawatir karena Anda dapat menggunakan library percentage, dimana library tersebut telah menghitung luas layer secara otomatis, akan tetapi Anda juga harus convert dari Pixes ke Percentange, Anda dapat mempelajarinya di https://nekocalc.com/px-to-percentage-converter.

Latihan 1:

Buatlah halaman aplikasi seperti dibawah ini :

Langkah-Langkah dalam menyelesaikan Latihan 1:
Step 1:
Buka expo.io, dan buatlah Snack dengan nama “ResponsiveDesign1”
Step 2:
Ketik perintah berikut:

Step 3:
Ketika mengetik line 14, maka akan muncul gambar berikut di kiri bawah, langsung klik “ADD CTRL+” maka library akan dimasukkan ke file package.json