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

Oleh -

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.

Comments

Post a Comment

Popular posts from this blog

cheat plants vs zombies menggunakan cheat engine

Oleh -
Image
plants vs zombies... siapa sih yang gak tau mini games dari popcap ini? ya keliatannya sih gampang ya. tanam tumbuhannya, dan otomatis akan menembak zombies yang berjalan. tapi coba deh main survival terakhir, pasti baru sampe level 10 langsung die :p makanya, di sini gua mau ngasih cheat yang berguna untuk plants vs zombies. alat dan bahan yang diperluin cuma : -game plants vs zombies. DOWNLOAD PLANTS VS ZOMBIES DI SINI -cheat engine. DOWNLOAD CHEAT ENGINE DI SINI ada 4 cheat yang bakal gua jelasin di sini 1. INFINITY SUN (matahari gak abis abis) 2. NO DELAY (gak perlu nunggu nunggu refill tanaman yang abis dipakai) 3. CHEAT MONEY (uang yang banyak dan gak habis habis) 4. TREE OF WISDOM CHEAT (pohon zen garden yang sampe tinggi) oke mulai aja... I. CHEAT INFINITY SUN (matahari gak abis abis) PLANTS VS ZOMBIES buka plants vs zombies nya setting plants vs zombies nya di options , full screen nya jangan di centang biar gampang ngerjainnya buka juga cheat engine ...
Selengkapnya

STRAWBERRY PROLOG: Membuat Garis (Line)

Oleh -
Image
sehubungan dengan tugas tugas yang terlempar dari laboratorium teknik informatika. mata praktikum pengantar kecerdasan buatan (PKB). harus menggunakan strawberry prolog Download Strawberry Prolog: download strawberry prolog Password: langkah 1 untuk membuka aplikasi strawberry prolog, download file di atas kemudian ekstrak rar nya, pilih strawberry prolog.exe setelah muncul tampilan pertama, klik file kemudian new, pilih yang strawberry project, kemudian klik OK langkah 2 ketikkan code berikut pada window kosong yang baru anda buat ?-window(G_namaWindow, _, window1(_), "Ini window pertamaku" , 100,200,300,400). ?-window berarti membuat window baru. G_namaWindow adalah nama window tersebut window1(_) adalah fungsi yang nantinya akan dibuat “ini window pertamaku” adalah judul dari window yang akan muncul 100, 200, 300, 400 adalah koordinat dari window yang akan muncul, perhatikan gambar di bawah langkah 3 untuk melihat hasilnya, pilih RUN di menu bar ...
Selengkapnya

DOWNLOAD: Emulator PlayStation 1 (PS1) for Windows

Oleh -
Image
bishi bashi (pic source: google.com) flashback bersama playstation 1. Game-game seru seperti Winning Eleven, Crash Team Racing (CTR), Bishi Bashi, Tamiya (lets go eternal wings) pernah gua jumpa semasa kecil dulu. Apalagi dulu, susah banget beli playstation 1 karena mahal, yang ada malah rental PS (baca: playstation), itupun masih jarang adanya. Jadi kangen sama masa masa itu. Mau main game itu lagi tapi harus keluar uang buat beli console nya *mental mahasiswa* akhirnya, cari aja solusi di google. Ini dia emulator Playstation 1. namanya ePSXe. Emulator ini yang bisa menyelamatkan masa kecil gua (mungkin kalian juga). gua jadi bisa main game ps 1 tanpa harus modal banyak. Tampilan Utama Emulator Playstation 1 (ePSXe 1.7.0) download ePSXe 1.7.0: http://www.mediafire.com/?2z4elio6j61qxmw  (10mb) password: arickanjass ePSXe ini ga perlu diinstall. ekstrak aja file yang udah didownload tadi dan muncul deh folder namanya  epsxe170 buka folder tersebut...
Selengkapnya