Cloning instagram App with React Native

• Before render apps, the resource files like (images, fonts...etc) must be loaded

import { AppLoading, Asset, Font } from "expo";
import { IonIcons, MaterialIcons } from "@expo/vector-icons";

const { isLoadingComplete } = this.state;

if (!isLoadingComplete) {
  return (
    <AppLoading
      startAsync={this._loadAssetsAsync}
      onError={this._handleLoadingError}
      onFinish={this._handleFinishLoading}
    />
  );
}

_loadAssetsAsync = async () => {
  return Promise.all([
    Asset.loadAsync([require("./assets/images/logo.png")]),
    Font.loadAsync([...IonIcons.font, ...MaterialIcons.font]),
  ]);
};
_handleLoadingError = error => {
  cosole.log(error);
};
_handleFinishLoading = async () => {
  this.setState({
    isLoadingComplete: true,
  });
};

• Restore app data(redux) on phone storages.

# use npm instead of yarn(yarn occure unexpected errors)
# redux-persist do store redux data on phone storage
]$ npm install redux-persist redux-thunk react-redux redux --save

• Import redux persist modules

import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore from "./redux/configureStore";

const { persistor, store } = configureStore();

• PersistGate do wait until load all redux data from storage.

]$ npm install prop-types --save

• Application is different from web.

  Don't have link, url change, refresh...

• Use React Navigation

• See React Navigation Docs

• There is two kind of navigation.

  1. Tab navigation

     Same depth each containers

     Tabs are next each other

  2. Stack navigation

     There exist depth each containers

     Screen exist top of the other one. Cover each other

     Has Two Mode. Screen and popup modal

]$ npm install --save react-navigation

• Can find expo vector-icons

import Ionicons from "@expo/vector-icons";

• When appears underlines in TextInput on Android, then add this code on TextInput's props

underlineColorAndroid = "rgba(0,0,0,0)";

• Something like proxy server
• Go https://ngrok.com
• Download ngrok related on your os

# run with your port that you want to share
]$ ngrok 8000

# Add ALLOWED_HOSTS config/settings/local.py
ALLOWED_HOSTS = ["*"]

• Facebook login on expo

• Have to add platforms ios and android on Facebook Developers

Add host.exp.Exponent as an iOS Bundle ID. Add rRW++LUjmZZ+58EbN5DVhGAnkX4= as an Android key hash. Your app's settings should end up including the following under "Settings > Basic"

• See https://docs.expo.io/versions/v26.0.0/distribution/building-standalone-apps

• It's for fade in animation to loading images

]$ npm install react-native-fade-in-image --save

• For search screen

]$ npm install react-native-fit-image --save

• Use Action Sheet with global settings or confirms..
• And use on logout.

]$ npm install react-native-actionsheet --save

• Need reference that is the way, can access to component with react

• Install UUID for make file name

]$ npm install uuid --save