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.

Tutorial View Aspect Ratio Square React Native
Tutorial View Aspect Ratio Square React Native
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 :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS