Posts

Showing posts with the label react-native

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

Image
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: " H ello W orld. H ello W orld") autoCapitalize="sentences"  . berarti setiap karakter pertama dalam kalimat akan otomatis kapital. (contoh: " H ello world. H ello world") autoCapitalize="none" . berarti dalam te

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

Image
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, kem

React Native : Part 1 - Getting Started

Image
Halo, di bagian ini saya akan menjelaskan bagian dasar untuk memulai coding dengan React Native. Sebelum itu, sebaiknya dipersiapkan alat dan bahannya terlebih dahulu ya. (saya menggunakan os Windows dalam contoh ini) Tools: Nodejs  (version 5 or higher) Visual Studio Code  (optional) Step: install nodejs install expo Create new project 1. Install nodejs Install nodejs sampai selesai. Untuk mengecek versi dari nodejs, anda dapat menggunakan command berikut di cmd > npm -v Maka akan tampil versi dari node anda, seperti berikut check nodejs version 2. Install Expo Setelah install nodejs, langkah berikutnya adalah install expo. Untuk install expo via cmd, ketik command berikut kemudian enter (prosesnya cukup lama, tergantung koneksi pribadi) > npm i -g expo-cli Maka akan otomatis download, seperti berikut install expo before Jika sudah selesai maka akan seperti berikut install expo after 3. Create New Project Rea