1

We are doing a step-by-step tutorial how to make mobile application’s local storage by React Native AsyncStorage and Realm Database (Like CoreData, SQLite in both iOS and Android).

Lecture Note​

AsyncStorage​

When you are develop the app, at one point, you will need to store information permanently for an application (it does not gone after the forced close and re-open). For faster loading time, Line app use a local database to remember all of your conversations. For caching propose, Facebook app use a local database to record all of the previously loaded news feed.

React Native AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android,React Native AsyncStorage will use either RocksDB or SQLite based on what is available.

To use AsyncStorage, you don’t need to installation any extra library. It comes with React Native by default. AsyncStorage uses key-value pairs so to save data, as show in the following example.

import { AsyncStorage } from 'react-native';  
AsyncStorage.setItem('myKey', myValue);

To loaded the saved data, you can do like this…

AsyncStorage.getItem('myKey').then((myValue) => {  
  this.setState({'myKey':myValue});  
});

Since loading data is a time consuming task, It is designed to be a asynchronous operation. So getItem returned the promise, which will invoke the call back function when the read operation is completed.

More information, please see on Slide. TK We are adding soon.

Learn how to write iOS and Android mobile app to take photo (Camera), and selecting image from Phone’s Gallery (Camera Roll) by React Native.

Learn how to including Apple Map and Google map into the iOS and Android mobile app written by React Native.

React Native Navigation Bar, Scene Transition, ListView

Learn how to make multiple screen mobile application in React Native by using Navigation. Learn how to making Navigation bar in both iOS and Android. Try All of the Scene Transitions, and making ListView.

Lecture Presentation​

React Native Components, Props, and Network By Making Stocks App

Learn how to make React Native Components and React Props in mobile applications. As well as, Learn how to use FetchAPI for getting remote information by making a practical Stock mobile application.

Lecture Presentation​

The followings are slide presentation for ITS484: Mobile App Development, SIIT, Thammasat University, Thailand (1/2016)

1. Walkthrough guides for setup ES6 develop environment in Mac by using Babel
2. Walkthrough guides setup ESLint to check the JavaScript style guide.
3. Teach Modern JavaScript programming language (ES6/ES2015)
4. Teach how to write ES6/ES2015 with correct style guides (be the best practices from day one) based on Airbnb

Source code Git repository: https://github.com/kobkrit/react-native-class-2017

Quiz Submission Form: https://goo.gl/forms/TWoTk9nic5dY2r0F2

Quiz Submission Form Short: http://bit.ly/2kuKvlM

1

This post is talk about how to allow the NavigationActions.pop() command of the react-native-router-flux library https://github.com/aksonov/react-native-router-flux refresh the props of the previous scene.

The situation is when user went from the Screen1 to Screen2, and user press “Back button” on the Navigation bars of Screen2 back to Screen1. Here is the way to notified Screen1 about this return.

NavItems.js

function popScreen(){  
  NavigationActions.pop({refresh:{}});  
}export default {  
  backButton () {  
    return (  
      <TouchableOpacity onPress={popScreen}>  
        <Icon name='angle-left'  
          size={Metrics.icons.medium}  
          color={Colors.snow}  
          style={styles.navButtonLeft}  
        />  
      </TouchableOpacity>  
    )  
  },...Screen1.js  
  
Add the following function tocomponentWillReceiveProps(props){  
    console.log('component: componentWillReceiveProps');  
    console.log(props);  
  }NavigationRouter.jsclass NavigationRouter extends Component {  
  render () {  
    return (  
        
          
            
            ...  
              
            
          
        
    )  
  }  
}The console.log show as follows.component: componentWillReceiveProps  
Screen1.js:29 Object {navigationState: Object, name: "Screen1", sceneKey: "Screen1", parent: "drawerChildrenWrapper", type: "REACT_NATIVE_ROUTER_FLUX_PUSH"…}  
Screen1.js:33 component: shouldComponentUpdate  
Screen1.js:38 component: componentWillUpdate  
Screen1.js:42 component: componentDidUpdate

The followings are walkthrough guide for setup react-native on Mac for iOS and Android mobile app development.

iOS Development

• Install Homebrew
• Install Node
• Install Watchman
• Install Xcode
• Init React-Native Project
• Run React-Native on iOS Simulators

Android Development

• Continued from iOS Development video
• Install Android Studio
• Setup Android SDK
• Setup ANDROID_HOME and PATH environment
• Install Genymotion
• Setup Genymotion ADB Setting
• Run React-Native on Genymotion

.bash_profile’s Content

[export ANDROID_HOME=/Users/{Account}/Library/Android/sdk  
export PATH=$ANDROID_HOME/platform-tools:$PATH  
export PATH=$ANDROID_HOME/tools:$PATH](<https://www.youtube.com/edit?o=U&video_id=8ybquJSjZHg>)

Notable Android’s SDK command

[adb devices #List all connected devices   
android #Lanuch android SDK package manager](<https://www.youtube.com/edit?o=U&video_id=8ybquJSjZHg>)