Initial Setup untuk React Native Project
Di artikel ini saya akan memberi panduan step by step untuk setup pertama kali project yang menggunakan react native. Untuk sementara, yang akan dijelaskan adalah setup untuk android. Silahkan diikuti
Install React Native
Pastinya pertama install react native. Cek caranya di official documentation site. Kalau pada project sebelumnya sudah pernah setup, berarti tinggal run:
react-native init NamaProject
Pasang Script Emulator
Emulator android bisa dibuka tanpa kita harus buka Android Studio. Asalkan sudah pernah membuat emulator, tinggal tulis namanya di pemanggilan script pada file package.json
di bagian scripts:
"scripts": {
...
"emulator": "/Users/raosan/Library/Android/sdk/tools/emulator -avd Nexus-5X-API-26 -netdelay none -netspeed full",
...
},
pada script di atas, direktorinya silahkan diset sesuai tempat masing-masing menyimpan android sdk nya. Lalu di situ saya pilih emulator yg sudah saya namai Nexus-5X-API-26
Setelah ini, kamu nggak perlu lagi buka android studio untuk run emulator, cukup run di terminal
npm run emulator
setelah itu, pastikan instalasi react native berhasil dengan masuk ke direktori NamaProject, lalu seperti biasa, run react-native run-android
Kamu juga bisa membuat script untuk mempersingkat perintah react-native run-android
. Conthonya dgn menambahkan script android
di bawah script emulator
"scripts": {
...
"emulator": "/Users/raosan/Library/Android/sdk/tools/emulator -avd Nexus-5X-API-26 -netdelay none -netspeed full",
"android": "react-native run-android"
...
},
Jadi untuk selanjutnya kamu cukup run npm run android
untuk menjalankan react-native run-android.
Generating APK Android
Sehabis koding, pasti kita ingin apps nya bisa di install di HP kan? nah daripada nanti-nanti, mending langsung sekarang settingnya, sehingga nanti kalau kita sudah membuat sedikit tampilan, langsung bisa coba install ke HP orang lain.
Pertama, taruh script untuk build di package.json, di bawah scsript emulator yang tadi sudah kita tambahkan.
"scripts": {
...
"emulator": "/Users/raosan/Library/Android/sdk/tools/emulator -avd Nexus-5X-API-26 -netdelay none -netspeed full",
"build": "cd android && ./gradlew assembleRelease"
...
},
Kedua, generate signed APK. Ikuti langkah di halaman dokumentasi react native tentang Generating Signed APK. TL:DR; nya kurang lebih tinggal run
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Saat diminta password, masukkan sesuka hati tapi dicatat di dokumen lain, karena nanti itu akan dipakai untuk publish app nya di playstore. Selain password, kamu diminta mengisi data lain, isi saja dengan data yang sesuai.
Command di atas tadi akan men generate file my-release-key.keystore
di folder root. Lalu pindahkan file tersebut ke android/app
.
Ketiga, Setting up gradle variables. Tinggal edit file android/gradle.properties
, lalu tambahkan potongan kode ini di bagian paling bawah. Ganti tanda *****
dengan password yang kamu masukkan saat generate signed APK tadi
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
Keempat, Tambahkan signing config ke app’s gradle config. Tinggal tambahkan setting di 2 tempat pada file android/app/build.gradle
:
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
Pertama tambahkan bagian signingConfigs
di bawah default config.
Kedua, di dalam buildTypes > release.
Proses selesai. Nah tiap kali kamu mau build APK, tinggal run
npm run build
Maka file APK yang bisa dipublish telah ter generate di folder android/app/build/outputs/apk/release/app-release.apk
Codepush
Pernah pakai aplikasi gojek, lalu tiba-tiba tampilan berubah padahal kita nggak update aplikasinya? nah itu menggunakan sejenis codepush. Cara setting nya bisa dilihat di sini.
Saya males nulis ulang karena sudah ada teman yang membahas tutotialnya. TL;DR nya
npm install --save react-native-code-push
react-native link react-native-code-push
Perbedaan dari yang ditulis di situ hanya 3, yaitu:
Pertama, penamaan codepush app. Saat command codepush add, penamaannya seperti ini:
code-push app add NamaProject-Android android react-native
Kedua, konfigurasi di app.js
. Di file app.js
hanya perlu menambahkan 3 hal:
import codePush from 'react-native-code-push’
di bagian atas untuk import packageexport class App
ubah jadiclass App
saja, export nya pindahkan ke paling bawah, lalu tambahkan setting Codepush. Jadinya akan seperti ini:
...
class App extends Component<Props> {
render() {...}
}
...
App = codePush({
checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
installMode: codePush.InstallMode.ON_NEXT_RESUME
})(App)export default App
Ketiga, pasang script codepush di package.json
di bagian bawah build
"scripts": {
"build": "cd android && ./gradlew assembleRelease",
"codepush": "code-push release-react NamaProject-Android android",
},
Nah tiap kali ingin mengganti sesuatu di HP user tanpa mereka harus update aplikasi, cukup run:
npm run codepush
nantinya perintah itu bisa untuk mengubah sekaligus yang di iOS. Nah kalau hanya ingin ubah yang android saja, run:
npm run codepush-android
Custom Font
Pertama, cari custom font yang diinginkan di fonts.google.com. Ambil contoh kita search font Titillium Web.
Klik select this font
, lalu klik bar hitam di bawah yang barusan muncul. Lalu klik download di bagian kanan atas.
Buka file zip yang telah terdownload, lalu pindhkan file-file .ttf
ke folder assets/fonts
. Folder nya tentu harus kamu buat dulu.
Upadte file package.json
. Tambahkan di bawah bagian scripts
:
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
Jalankan perintah
react-native link
Ubah style welcome di App.js
. Tambahkan fontFamily
welcome: {
...
fontFamily: 'TitilliumWeb-Regular'
},
Voila, font telah berubah menjadi custom.
React-native-vector-icons
Di setiap project, pasti butuh default icon, maka package react-native-vector-icons pasti dibutuhkan. Ikuti saja cara install nya seperti di dokumentasi github nya. TL;DR nya tinggal run:
npm install react-native-vector-icons --savereact-native link react-native-vector-icons
React-navigation
install seperti di halaman dokumentasi, lalu ubah App.js
dengan ini:
import React, {Component} from 'react'
import codePush from 'react-native-code-push'
import Icon from 'react-native-vector-icons/Ionicons'
import {
createBottomTabNavigator,
createStackNavigator,
} from 'react-navigation'// Screens
import Home from './src/screens/Home'
import Account from './src/screens/Account'
import OrderList from './src/screens/OrderList'
// import Login from './src/screens/Login'
// import ProductDetail from './src/screens/ProductDetail'// import { COLOR } from './src/constants'const StackNavigatorConfig = {
cardStyle: { backgroundColor: '#fafafa' },
navigationOptions: {
headerTitleStyle: {
color: '#000',
fontFamily: 'TitilliumWeb-Bold',
fontWeight: '300',
},
headerStyle: {
backgroundColor: '#fff',
elevation: 1
},
headerTintColor: '#000',
}
}const HomeStack = createStackNavigator({
Home: { screen: Home },
// Login: { screen: Login },
// ProductDetail: { screen: ProductDetail },
}, StackNavigatorConfig)HomeStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}return {
tabBarVisible,
};
};const BottomTabRoutes = {
Home: {
screen: HomeStack
},
Order: {
screen: createStackNavigator({
OrderList: { screen: OrderList },
}, StackNavigatorConfig)
},
Account: {
screen: createStackNavigator({
Account: { screen: Account },
// ProfileEdit: { screen: ProfileEdit },
}, StackNavigatorConfig)
}
}const BottomTabNavigatorConfig = {
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let iconName;
if (routeName === 'Home') {
iconName = 'md-home';
}
else if (routeName === 'Order') {
iconName = 'md-cart';
}
else if (routeName === 'Account') {
iconName = 'md-person';
}return <Icon name={iconName} size={25} color={tintColor} />
},
}),
tabBarOptions: {
activeTintColor: '#000',
inactiveTintColor: '#a9a9aa',
labelStyle: {
marginTop: -5,
marginBottom: 5
},
style: {
backgroundColor: '#fff',
},
}
}const MainNavigator = createBottomTabNavigator(BottomTabRoutes, BottomTabNavigatorConfig)type Props = {};
class App extends Component<Props> {
render() {
return (
<MainNavigator />
)
}
}App = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME })(App)export default App
Sesuaikan bila ada error-error
App Icon
Buka link ini untuk genereate icon.
masukkan ke dalam folder android>app>src>main>res