curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
source ~/.bashrc

nvm install 8

export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

npm install --save-dev babel-eslint eslint-config-airbnb-base
eslint-plugin-react eslint-plugin-react-native

node_modules/.bin/eslint --init

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript

// bad
var count = 1;
if (true) {
  count += 1;
}

// good, use the let.
let count = 1;
if (true) {
  count += 1;
}

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

npm install -g create-react-native-app
create-react-native-app AwesomeProject
cd AwesomeProject
npm start

$ adb devices
$ adb tcpip 5556

$ adb connect $ip:5556
/* $ip 請自行替換為 adb devices 回傳的 Android 虛擬機 IP
例如: adb connect 192.168.57.101:5556 */
$ adb devices
/* 測試是否有連上 */
$ adb shell am start -a android.settings.SETTINGS

$ npm install -g react-native-cli

$ react-native init demo
$ cd demo
$ npm start
$ react-native run-android

react-native init ${project name} --template ${template name}

react-native init ${project name} --template file:///path_to/react-native-template-XXXX

react-native init ${project name} --template git://.../react-native-template-XXXX

adb install ./android/app/build/outputs/apk/app-debug.apk

.
├── App.js
├── __tests__
├── android
├── app.json
├── index.js
├── ios
├── node_modules
├── package.json
└── yarn.lock

async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json'
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

 getMoviesFromApiAsync() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
  }

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>rn.fuyaode.me</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
    <key>localhost</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

handleConnectivityChange = async (isConnected) => {
 ....
}

NetInfo.addEventListener(
  'connectionChange',
  this.handleConnectivityChange
);

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

if (__DEV__) {
  GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest
}

getData = async (page) => {
  try {
    let response = await fetch(`http://rn.fuyaode.me/users/1`);
    let responseJson = await response.json();
    console.log(responseJson);
    this.setState({
      name: responseJson.name
    })
    return responseJson;
  } catch (e) {
    console.error(e);
  }
}

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

const formData = new FormData();
form.append('id', 'A123123123');
form.append('password', '0000');
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  },
  body: formData,
});

const formData = new FormData();
formData.append('file', {
  uri: filepath,
  type: `${fileType}/${ext}`,
  name: fileName,
})
fetch('https://s3.us-east-2.amazonaws.com/test.png', {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formData,
});

cosnt options = {
  title: '選擇頭貼',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};
ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    console.log('User cancelled image picker');
  } else if (response.error) {
    console.log('ImagePicker Error: ', response.error);
  } else {
    let source = { uri: response.uri };
    this.setState({
      avatarSource: source
    });
  }
});

RNThumbnail.get(filepath).then((result) => {
  console.log(result.path);
})

<Image source={{uri : this.state.videoUri}} />

import { 
  AudioPlayer, 
  AudioRecorder,
  AudioUtils,
} from 'react-native-audio-player-recorder';

AudioRecorder.prepareRecordingAtPath(
  AudioUtils.DocumentDirectoryPath + '/record.aac', {
    SampleRate: 22050,
    Channels: 1,
    AudioQuality: 'Low',
    AudioEncoding: 'aac',
    AudioEncodingBitRate: 32000
  }
);

AudioRecorder.startRecording();

import RNFS from 'react-native-fs';

const fileStat = await RNFS.stat(filepath);
if (fileStat.size < 1024 * 1024 * 50) {
   ...
} else {
  // 檔案超過限制大小
}

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};