Tutorial Belajar React Native - Cara membuat Form Login & Register | React Native

Berkenalan dengan React Native

Assalamu’alaikum wr. wb.

Intro

Sebenarnya ada banyak pilihan ketika kita ingin membuat aplikasi mobile. Apabila kita ingin membuat aplikasi ‘Native’ (memakai bahasa yang spesifik untuk platform tertentu), contohnya :

• Android app > bahasa pemrograman Java
• iOS app (apple) > bahasa pemrograman Objective C atau Swift

Nah ada lagi yang namanya ‘cross-platform’ app. Maksudnya apa cross-platform? Cross-platform itu mobile apps yang dibuat dengan bahasa pemograman yang tidak spesifik untuk platform tersebut, contohnya bahasa pemograman‘Javascript’. Dulu tidak ada developer yang membuat mobile app memakai javascript, javascript dipakai paling banyak untuk website. Tapi setelah perkembangan teknologi, mulailah trend developer memakai javascript untuk membuat mobile app.

Jadi Apa Itu React Native?

React Native merupakan suatu cross-platform framework yang dibuat oleh tim Facebook untuk membuat mobile app (android & ios) dengan menggunakan javascript.

Disini developer harus mengerti React.js jika ingin memakai React Native. Sekedar penjelasan bahwa react.js adalah suatu library yang dibuat oleh Facebook tahun 2013 yang berfungsi untuk membantu developer membuat User Interface (UI).

React Native menggunakan native component dari Android dan iOS namun tetap dalam bahasa pemrograman JavaScript. Pada dasarnya React Native memanglah native tidak seperti Phonegap / cordova yang berbasis web mobile / hybrid.

Cara Kerja React Native

React Native bekerja dengan dengan menanamkan file Javascript yang sudah di-bundle didalam aplikasi, dan menjalankan mereka secara local dari aplikasi yang kita buat. Namun kita juga dapat meletakan file Javascript kita didalam server dan diambil ketika ada koneksi, hal ini memungkinkan kita untuk melakukan update aplikasi secara cepat tanpa melalu proses submit ke Google Playstore atapun iOS Appstore. Untuk UI dan UX, React Native juga mengunakan Javascript untuk styling hampir mirip dengan CSS diweb namun dengan CamelCase.

Pengguna React Native

Perkembangan React Native cukup pesat hingga banyak perusahaan teknologi yang menggunakan framework ini karena kemudahan dan powerfull-nya. Untuk mevalidasi penjelasan ini kita bisa mengeceknya pada link berikut: Who’s using React Native?

Pada link tersebut terdapat beberapa perusahaan besar yang menggunakan React Native, antara lain Instagram, Facebook,Skype, Airbnb, Bloomberg dan masih banyak lagi. Jadi tidak ada salahnya jika kita mempelajari React Native.

Keunggulan Menggunakan React Native

1. Sebagai salah satu alternatif dalam pengembangan aplikasi mobile, react native dapat digunakan untuk mengembangkan aplikasi mobile dalam 2 environment dalam satu kali proses development.
2. Bahasa yang digunakan adalah javascript, dan saya rasa dalam belajar javascript tidak susah daripada kita harus belajar Java untuk pengembangan android dan Objective-C atau Swift untuk pegembangan iOS.
3. Truly Native react native sangat mendukung modul native seperti push notifications, deep linking, native UI components dan lain lain.
4. Dokumentasi yang ada sudah lengkap dan juga sudah banyak library-library yang kita bisa gunakan untuk pengembangan aplikasi sesuai kebutuhan kita.

Persiapan

Untuk menggunakan react native ada beberapa yang perlu kita install.

Mac OS

Install jdk + node.js + watchman + download sdk

Windows

Install jdk + node.js + downlod sdk

Linux

Install jdk + node.js + download sdk

Jadi ketika kita install node.js, nanti akan otomatis terinstall npm (node package manager). Dan ketika menggunakan react native, kita bisa memilih menggunakan expo (emulator) atau langsung cli real device (tetapi harus install dulu SDK, dan setting sdk serta java-nya).

Belajar React Native 8 : Membuat Form Login dan Register

Pada tutorial belajar react native ke 8 ini kita  akan mencoba untuk membuat form login dan register aplikasi android menggunakan react native.

Untuk tutorial listview yang sudah saya janjikan pada tutorial sebelumnya tidak akan kita bahas. Karena saya yakin teman-teman sudah paham struktur react native hanya dengan membaca doc react native tentang listview. Jadi tutorial listview kita skip saja.

Perubahan file menjadi App.js

Oke sebelumnya banyak teman-teman yang baru belajar react native  berkomentar setelah menjelajahi React Native ini dan kebingungan dengan perbedaan file yang telah di install pada tutorial pertama. Fix, ini bukanlah suatu stuck install atau corrupted file installed, jadi begini… memang baru bulan-bulan kemarin ada update file pada React Native, yang tadinya dia memakai file index.android.js atau index.ios.js sekarang telah berubah menjadi hanya satu file saja yaitu App.js.

Kemudian untuk pengembangan aplikasi android ataupun ios  telah di package kedalam satu folder. Untuk pengembangan aplikasi android pada folder android juga untuk pengembangan aplikasi ios pada folder ios.

Mulai Menginstall dan Membuat Form

Oke jika masih belum paham kita akan coba install dari awal dengan kondisi semuanya sudah terinstall seperti nodejs, code editor, file jdk, file sdk, emulator android genymotion (telah terbuka), silahkan dibuka cmd nya lalu arahkan ke direktori yang akan temmman-teman simpan (disini saya memberi nama foldernya Login) kemudian beri perintah berikut pada cmd :

Npm install -g react-native-cli

React-native init Login

Tunggu semua proses downloadnya, jika telah success tanpa failed  arahkan kle direktori Login dan beri perintah berikut pada cmd :

Yarn

React-native run-android

Maka, akan terbuka aplikasi yang telah kita install pada emulator. Tampilannya seperti berikut :

Disini kita telah melihat perbedaan yang dulu dan yang sekarang, jika  dulu terdapat penjelasan “To get started edit index.android.js” tapi yang sekarang “To get started edit App.js”. Oke sekarang kita lanjut pada tutorial, silahkan  ubah file App.js menjadi seperti berikut :

Oke setelah kita lihat pada code diatas terdapat module yang didalamnya ada beberapa komponen, maka kita akan membuat folder baru dengan nama src dan beberapa komponen didalamnya, silahkan  buat folder dan file seperti yang terdapat dalam lingkaran berikut :

Yaitu :

src

components

Form.js

Logo.js

Images

Logo.png (bebas untuk logo)

Pages

Login.js

Signup.js

Routes.js

Oke.. setelah semuanya dibuat sekarang kita beri code pada file Form.js

import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity
} from 'react-native';

export default class Logo extends Component<{}> {
render(){
return(
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Email"
placeholderTextColor = "#ffffff"
selectionColor="#fff"
keyboardType="email-address
onSubmitEditing={()=> this.password.focus()}
/>

<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
secureTextEntry={true}
placeholderTextColor = "#ffffff"
ref={(input) => this.password = input}
/>

<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>{this.props.type}</Text>
</TouchableOpacity>
</View>
)
}
}

const styles = StyleSheet.create({
container : {
flexGrow: 1,
justifyContent:'center',
alignItems: 'center'
},


inputBox: {
width:300,
backgroundColor:'rgba(255, 255,255,0.2)',
borderRadius: 25,
paddingHorizontal:16,
fontSize:16,
color:'#ffffff',
marginVertical: 10
},

button: {
width:300,
backgroundColor:'#1c313a',
borderRadius: 25,
marginVertical: 10,
paddingVertical: 13
},

buttonText: {
fontSize:16,
fontWeight:'500',
color:'#ffffff',
textAlign:'center'
}



});
//Lalu Logo.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';



export default class Logo extends Component<{}> {
render(){
return(
<View style={styles.container}>

<Image  style={{width:40, height: 70}}
source={require('../images/logo.png')}/>
<Text style={styles.logoText}>Welcome to My app.</Text>
</View>
)
}
}


const styles = StyleSheet.create({
container : {
flexGrow: 1,
justifyContent:'flex-end',
alignItems: 'center'
},

logoText : {
marginVertical: 15,
fontSize:18,
color:'rgba(255, 255, 255, 0.7)'
}

});
Lalu Login.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,

View,
StatusBar ,
TouchableOpacity
} from 'react-native';



import Logo from '../components/Logo';
import Form from '../components/Form';

import {Actions} from 'react-native-router-flux';
export default class Login extends Component<{}> {

signup() {
Actions.signup()
}

render() {
return(
<View style={styles.container}>
<Logo/>
<Form type="Login"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Dont have an account yet?</Text>
<TouchableOpacity onPress={this.signup}><Text style={styles.signupButton}> Signup</Text></TouchableOpacity>
</View>
</View>
)
}
}

const styles = StyleSheet.create({
container : {
backgroundColor:'#455a64',
flex: 1,
alignItems:'center',
justifyContent :'center'
},

signupTextCont : {
flexGrow: 1,
alignItems:'flex-end',
justifyContent :'center',
paddingVertical:16,
flexDirection:'row'
},

signupText: {
color:'rgba(255,255,255,0.6)',
fontSize:16
},

signupButton: {
color:'#ffffff',
fontSize:16,
fontWeight:'500'
}
});

Lalu Signup.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
StatusBar ,
TouchableOpacity
} from 'react-native';

import Logo from '../components/Logo';
import Form from '../components/Form';
import {Actions} from 'react-native-router-flux';
export default class Signup extends Component<{}> {
goBack() {
Actions.pop();
}

render() {
return(

<View style={styles.container}>
<Logo/>
<Form type="Signup"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Already have an account?</Text>
<TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}> Sign in</Text></TouchableOpacity>
</View>
</View>
)
}
}


const styles = StyleSheet.create({
container : {
backgroundColor:'#455a64',
flex: 1,
alignItems:'center',
justifyContent :'center'
},

signupTextCont : {
flexGrow: 1,
alignItems:'flex-end',
justifyContent :'center',
paddingVertical:16,
flexDirection:'row'
},
signupText: {
color:'rgba(255,255,255,0.6)',
fontSize:16
},
signupButton: {
color:'#ffffff',
fontSize:16,
fontWeight:'500'
}
});

// Lalu Router.js
import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/Login';
import Signup from './pages/Signup';


export default class Routes extends Component<{}> {
render() {
return(

<Router>
<Stack key="root" hideNavBar={true}>
<Scene key="login" component={Login} title="Login" initial={true}/>
<Scene key="signup" component={Signup} title="Register"/>
</Stack>
</Router>
}
}

Terakhir  buka emulator lalu tap double R pada keyboard, jika berhasil tanpa error maka tampilannya akan terlihat seperti berikut :

Oke… sekian tutorial kali ini, jika masih terdapat error bisa dilihat source codenya disini. sekian dan terimakasih sampai jumpa pada tutorial selanjutnya.