React Native : Part 2 - Styles & Text Input [1]

Halo, di bagian ini saya akan menjelaskan tentang styles dan text input pada react native. Secara code, styles di react native hampir sama dengan css di website. Saya contohkan sebagai berikut

CSS	React Native
background-color: red;	backgroundColor: red;
border-width: 1px;	borderWidth: 1;
margin-top: 1px;	marginTop: 1;
padding-top: 1px;	paddingTop: 1;

Dalam tutorial ini, saya melanjutkan project yang sudah dibuat pada part 1 sebelumnya. Saat project baru dibuat dengan template blank, maka akan diberikan beberapa file dalam folder projectnya. Buka file app.js

first app.js react native

1. Initiate Style

Inisialisasi style pada react native dengan cara


Jika flex bernilai 1, maka componentnya akan memenuhi ruang pada layar sedangkan jika flex bernilai 0, maka component akan fit to content yang ada di dalamnya.

2. Initiate TextInput

Lalu bagaimana dengan textinput? Tambahkan TextInput pada bagian import from 'react-native' anda, kemudian anda bisa mengetik bagian TextInput di dalam seperti di bawah


Jika dijalankan maka akan sebagai berikut

Text Input 1

Terlihat tidak ada perubahan pada tampilannya. Itu karena kita belum set style pada text input tersebut.

3. Styles on TextInput

Sebelum menambahkan styles ke textinput, pertama kita harus membuat styles baru yang akan digunakan di textinput. Tambahkan styles dengan nama username menjadi berikut

setelah itu sisipkan style ke textinput dengan style={styles.username}. Jika dijalankan akan seperti berikut

Text Input 2

Anda dapat menambahkan placeholder/hint pada textinput dengan cara menambahkan code di dalam textinput, sehingga textinput menjadi sebagai berikut


4. Exercise

Sebagai latihan anda, agar dicoba buat tampilan seperti berikut

Exercise React Native Text Input

Ini adalah cheatcodes atas exercise di atas:

• Container background color : #7ed6df
• Container hilangkan alignItems center supaya otomatis rata kiri
• Container ditambahkan padding : 10
• Username background color : #fff
• Username ditambahkan padding : 5

Gimana, ada kesulitan? Jika masih kesulitan, berikut adalah link untuk code dari exercise di atas: pastebin