Tutorial View Aspect Ratio Square React Native

Tutorial View Aspect Ratio Square React Native KONSEPKODING.COM, React Native hadir dengan konsep styling JSX, dimana semua component menggunakan StyleSheet untuk tampilannya. Untuk component Image kamu bisa menggunakan properti contain untuk aspect fit gambar yang kamu tampilkan.

Namun jika kamu ingin membuat komponent View menjadi aspect ratio 1:1 kamu memerlukan extra kode untuk hal tersebut. Pada tutorial React Native Indonesia kali ini akan di jelaskan mengenai tutorial aspect fit square pada komponen View React Native.

Apa Yang Akan Kita Pelajari?

1. Membuat Project React Native Dan Koding

2. Penjelasan Kode

Membuat Project React Native Dan Koding

Pertama silahkan buat project baru React Native, buka terminal atau cmd anda, dan ketikan perintah di bawah ini :

npx react-native ini aspet_view

Jika anda berhasil membuat project React Native, silahkan ubah kode pada file App.js , menjadi seperti kode di bawah ini :

Setelah itu silahkan run project React Native anda:

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

Jika berhasil maka tampilannya akan seperti gambar di bawah ini :

Penjelasan Kode

fixedRatio: {
backgroundColor: 'tomato',
flex: 1,
aspectRatio: 1
},

Kode di atas berguna untuk membuat flex menjadi1 dan aspectRatio nya menjadi 1 atau Square.

Sekian semoga tutorial kali ini dapat bermanfaat dan membantu kamu yang sedang mempelajari React Native, 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