Open in app

Sign in

Write

Sign in

Initial Setup untuk React Native Project

Raosan Lillahi
5 min readOct 31, 2018

--

http://altitudelabs.com/blog/react-native-mobile-app-development/

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:

  1. import codePush from 'react-native-code-push’di bagian atas untuk import package
  2. export class App ubah jadi class 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

React Native

--

--

Raosan Lillahi

Written by Raosan Lillahi

4 Followers

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams