Bagi kamu yang ingin menjadi Mobile atau FrontEnd Developer kamu harus menguasai Responsive Design atau Responsive UI. Dimana jika kamu menjadi FrontEnd Mobile React Native kamu harus menguasai Design React Native, dan masalahnya untuk mobile sendiri memiliki berbagai jenis Devices yang berbeda-beda layar di Android sendiri jenis-jenis layar ada : dpi, hdpi, mdpi xhdpi dan 3 jenis layar lainnya belum lagi di iOS.

Jadi misal kamu membuat aplikasi React Native kamu harus memikirikan Responsive Design dari React Native, jika tidak maka akan berantakan di beberapa devices. Pasalnya React Native tidak memiliki Constraint Layout layaknya Android Native atau iOS Native, jadi kamu harus menghitung sendiri, React Native sendiri telah membererikan solusi dengan memberikan component Dimensions, namun masalahnya kamu harus menghitung sendiri ukuran layar dari Smartphone yang kamu gunakan untuk development app.

Nah namun jangan khawatir kita bisa menggunakan library percetage, dimana library tersebut telah menghitung luas layar secara otomatis, namun kamu juga harus convert dari Pixels ke Percentange, kamu bisa mempelajarinya di https://nekocalc.com/px-to-percentage-converter.

Apa Yang Akan Kita Pelajari ?

1. Mengenal Responsive Design React Native (Uraian Di Atas)
2. Implementasi Responsive Design Membaut UI Login


Tutorial React Native: Responsive Desing UI Login

https://www.konsepkoding.com/2020/04/tutorial-react-native-responsive-design.html
Responsive Design UI Login


Implementasi Responsive Design Membaut UI Login

Pada kesempatan ini kita akan mencoba implement Responsive Design React Native dengan
membuat User Interface Login di React Native.

Pertama buat sebuah project baru React Native, buka terminal/cmd ketikan perintah di bawah ini :
npx react-native init responsive_design

Kemudian masuk ke direktori root project
cd responsive_design

Kemudian install library react-native-responsive-dimensions,
npm i react-native-responsive-dimensions

Setelah itu ubah kode App.js menjadi seperti kode di bawah ini :


Setelah anda menuliskan kode di atas silahkan jalankan project anda
npx react-native run-android / ios

Jika berhasil maka tampilan aplikasi UI responsive design login di React Naive akan seperti pada gambar di bawah ini :

https://www.konsepkoding.com/2020/04/tutorial-react-native-responsive-design.html
Responsive Design UI Login



Kesimpulan

responsiveHeight berguna untuk mengatur tinggi jarak antar layout component, responsiveWidth mengatur luas untuk responsive ui kita, responsiveFontSize berguna untuk membuat text atau font menjadi responsive.

Sekian semoga tutorial responsive deisgn width, height dan responsive font di React native dapat bermanfaat dan membantu kamu sekalian.

Baca Tutorial Lainnya: