Category: React Native

React Native – Layout

Flexbox Flexbox adalah sebuah metode layouting yang dapat mengatur ukuran element “child” secara otomatis beradaptasi dengan element “container” ketika tata letak halaman harus dapat menyesuaikan ukuran dan tampilan pada devices yang berbeda-beda. flexDirection const Direction = (props)=>{ return ( <View style={styles.container}> <Box/> <Box/> <Box/> <View style={{flexDirection:'row'}}> <Box/> <Box/> <Box/> </View> </View> ) } const styles

React Native – Styling

Styles pada react native didefinisikan dalam bentuk objek JSON dengan nama-nama atribute styling yang mirip seperti di CSS. Objek style dapat diterapkan dengan cara “inline” mengisikannya langsung pada attribute/prop style pada semua component react native atau dapat didefinisikan terlebih dahulu menggunakan fungsi StyleSheet.create(StyleObject) dan disimpan dalam sebuah variable yang nantinya dapat dikses pada attribute/prop style

React Native – Routing (Navigation)

Install React Navigation Untuk langkah pertama anda harus menginstall react-navigation menggunakan npm. Pastikan posisi folder ative terminal atau command line anda berada pada “Root Folder Project” anda kemudian jalankan perintah dibawah ini: npm install --save react-navigation Implementasi React Navigation Berikut adalah contoh penggunaan react-navigation: import React, { Component } from 'react'; import { Button }

React Native – State

setState Untuk mengubah tampilan dalam aplikasi anda secara realtime, Anda dapat menggunakan fungsi setState yang akan me-rerender ulang component anda dan setiap child component-nya. setState juga dapat menggabungkan nilai baru untuk sebuah object “state” dengan nilai sebelumnya, fungsi setState adalah pemicu event re-render sebuah component. setState bisa diisi dengan parameter data berformat object atau juga

React Native – Modal

Props Keterangan animationType Type enum. Dapat diisi dengan (‘none’, ‘slide’, ‘fade’) untuk mendefinisikan animasi modal. visible Type bool(true atau false) mendefinisikan modal dapat dilihat atau tidak. onShow Diisi dengan “function” yang berisikan beberapa “statement” yang dijalankan saat modal ditampilkan transparent Type bool(true atau false) untuk mengatur transparansi. onRequestClose (android) Diisi dengan “function” yang berisikan beberapa

React Native – Render Multiple Variable

Cara untuk rendering multiple variable pada React Native kita dapat menggunakan simbol `` (terletak dibawah tombol Esc). render() { let firstName = 'test'; let lastName = 'name'; return ( <View style={styles.container}> <Text>{`${firstName} ${lastName}` } </Text> </View> ); } Output: test name

React Native – Props

“Props” atau properties, adalah data yang diteruskan atau dikirim ke “child component” pada sebuah aplikasi React. React component me-render elemen-elemen UI berdasarkan “props” dan “internal state” mereka. Props yang digunakan oleh sebuah component (dan penggunaan) menentukan cara bagaimana component dapat dikendalikan dari luar component tersebut. PropTypes “prop-types” package memungkinkan anda untuk menambahkan pemeriksaan “runtime type”

React Native – Hello World

Buka file index.ios.js atau index.android.js kemudian hapus semua script yang ada diantara “tag” berikut: <View> ... </View> Setelah itu, tuliskan script berikut: <Text> Hello World! </Text> Contoh code lengkapnya akan seperti dibawah ini: import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return

Install & Setup React Native di Windows

Catatan: Anda tidak dapat mengembangkan aplikasi react-native untuk iOS di Windows, hanya dapat mengembangkan aplikasi Android. Dokumentasi setup resmi untuk react-native pada windows dapat ditemukan di sini. Jika Anda memerlukan detail lebih lanjut, ada panduan terperinci di sini. Tools/Environment Windows 10 Command line tool (seperti Powershell atau windows command line) Chocolatey (langkah-langkah untuk setup melalui

Install & Setup React Native di Linux (Ubuntu)

Setup Node.JS Buka terminal dan jalankan perintah berikut untuk menginstall nodeJS: curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - sudo apt-get install nodejs Jika perintah “node” masih tidak bisa dijalankan sudo ln -s /usr/bin/nodejs /usr/bin/node Alternative lain untuk menginstall NodeJS: curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install -y nodejs atau curl