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

Halo, di bagian ini saya akan melanjutkan bahasan sebelumnya di React Native : Part 2 - Styles & Text Input [1] . Secara project juga masih melanjutkan dari tutorial sebelum-sebelumnya. Jadi jika terlewat, agar cek di tulisan sebelumnya ya.

1. Auto Capitalize

Untuk membuat textInput otomatis menggunakan huruf kapital, maka ditambahkan properti autoCapitalize pada textInput. Value yang disediakan untuk autoCapitalize yaitu

• autoCapitalize="characters" . berarti seluruh text yang diinput dalam textInput otomatis kapital seluruhnya (contoh: "HELLO WORLD. HELLO WORLD")
• autoCapitalize="words" . berarti setiap karakter pertama dalam kata yang diinput di textInput akan otomatis kapital (contoh: "Hello World. Hello World")
• autoCapitalize="sentences" . berarti setiap karakter pertama dalam kalimat akan otomatis kapital. (contoh: "Hello world. Hello world")
• autoCapitalize="none" . berarti dalam textInput tersebut tidak ada otomatis kapital, namun tetap bisa secara manual via keyboard (contoh: "hello world")

Di tutorial ini, saya menggunakan auto capitalize character pada textInput username. Sehingga code menjadi berikut

Dan keyboard di textInput otomatis menjadi kapital

Text Input autoCapitalize Character

2. Keyboard Types

Keyboard di textInput dapat disesuaikan tipenya sesuai kebutuhan. Secara default, keyboard type tidak menggunakan format tertentu. Berikut adalah keyboard types yang dapat digunakan dalam textInput

• keyboardType="default" . Keyboard type ini tidak menggunakan format

Keyboard Type Default

• keyboardType="email-address" . Keyboard type ini menggunakan format email

Keyboard Type Email Address

• keyboardType="numeric" . Keyboard type ini menggunakan input angka

Keyboard Type Numeric

• keyboardType="phone-pad" . Keyboard ini menggunakan input nomor telepon

Keyboard Type Phone Pad

Pada textInput password, saya menggunakan keyboard type numeric seperti pin. Code-nya sebagai berikut

4. Secure Text Entry

Pada umumnya, untuk memasukan password textInput akan menggantikan karakter menjadi * . Untuk mengubah textInput menjadi "mode password", maka ditambahkan secureTextEntry. Sehingga code menjadi seperti berikut

5. Keyboard Avoiding View

Jika dilihat pada textInput bagian username, tampilan keyboard saya seperti menutupi textInput password. Supaya keyboard tidak menutupi textInput lainnya, maka diperlukan keyboard avoiding view. Keyboard avoiding view saya letakan di bagian luar dari view. Perlu diingat untuk import KeyboardAvoidingView di react-native. Codenya sebagai berikut

Berikut perbedaannya

Tanpa keyboard avoiding view

Dengan keyboard avoiding view

Untuk part 3 cukup sampai di sini dulu ya. Jika ada yang belum jelas, agar menulis komentar di bawah.