(Week 11) Form pada React Native

Pada minggu ini saya membuat form pada react native dimana ada beberapa input yang harus dimasukkan kedalam firebase.

Ada beberapa input yang cukup memakan waktu seperti memasukkan gambar kedalam storage pada firebase namun sesungguhnya hal ini tidak terlalu sulit.

Salah satu input yang paling sederhana adalah text input seperti biasanya

<TextInput
onChangeText={text => this.setState({title: text})}>
</TextInput>

Dengan kode diatas maka kita dapat dengan mudah mengganti state dari title setiap input ada pergantian.
Jika kita ingin menggunakan input yang berupa numeric maka ditambahkan optionnya keyboardType=’numeric’ dan jika ingin agar inputnya dapat lebih dari satu line maka ditambahkan multiline = {true}

Pada proyek ini saya menggunakan beberapa library yang sudah ada untuk mengambil gambar dari device saya menggunakan library react-native-image-picker dan untuk membuat gambar tersebut dapat ditambahkan kedalam storage pada firebase paling mudah untuk membuat gambar tersebut menjadi blob (Binary large object) dimana dengan format blob ini gambar dapat mudah ditambahkan pada firebase.

Ada beberapa cara lain untuk menambahkan data kedalam firebase seperti menggunakan base64 namun cukup banyak kendala sehingga menurut saya paling mudah dengan menggunakan blob

Untuk mengambil gambar dari device android anda dapat ditambahkan

Pada kode diatas options dapat ditambahkan dengan melihat pada link ini https://github.com/react-community/react-native-image-picker#options dan untuk mendapatkan uri dari gambar tersebut dapat digunakan response.uri dimana ini dapat digunakan untuk menampilkan gambarnya

<Image style={[styles.ImageContainer, styles.image]} source={this.state.imageSource1} />

Jangan lupa juga untuk menambahkan permission pada file android->app->src->androidManifest.xml agar dapat menggunakan kamera dan juga external storage yang ada pada device android anda dengan menambahkan

<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>

Kemudian respone.path digunakan untuk menampilkan path dari gambar tersebut dan response.fileName digunakan untuk mengambil nama dari file tersebut

Path disini diperlukan agar kita dapat membuat blob dengan menggunakan react-native-fetch-blob dengan menggunakan kode seperti dibawah ini

Pada kode diatas pertama distate terlebih dahulu path dari storagenya kemudian dibuild dan diput kedalam reference path dari storagenya dengan kode yang sedikit ini kita sudah dapat melakukan upload gambar kedalam firebase.

Ada juga react-native-date-picker yang dapat dengan mudah membuat input date yang bagus dan mudah. Dengan menggunakan kode yang sudah diberikan kita dapat langsung mendapatkan tanggal yang diinginkan selain itu untuk mempermudah kita juga menggunakan timestamp yang didapatkan dari 10 digit dari date.getTime()

Setelah itu untuk menambahkan data kedalam firebase digunakan method push ataupun set. Perbedaan dari kedua method ini terletak ketika kita melakukan push maka kita akan menambahkan anak dari referensi yang dibuat sedangkan untuk set adalah mengubah isinya tidak menambahkan anak baru

Contohnya ketika menggunakan kode seperti dibawah ini
reference = firebase.database().ref().child('beranda');
this.reference.push({
location: this.state.location});

Maka pada firebase akan masuk anak baru pada beranda dengan kode unik yang digenerate oleh firebase contohnya seperti disamping

Namun ketika menggunakan kode seperti dibawah ini
reference = firebase.database().ref(‘beranda’);
this.userRef.set({
postId: newPostRef.key});
maka pada beranda akan memiliki objek postId dengan isinya adalah newPosRef.key bukan lagi memiliki anak dengan key random yang memiliki isi objek postId