Create Project

React Native Latest Installation

$npx @react-native-community/cli@latest init MyProject --version latest

Running Project

$npx react-native start
$npx react-native run-android
$npx react-native run-ios

Run with Device

$adb devices
$npx react-native run-android --deviceId=3612f890

Show Console Log for Debugging

$npx react-native log-android
$npx react-native log-ios

Generate Unsigned Release

$npx react-native run-android --mode release
$npx react-native run-ios --mode release

Update Project to Latest React Native Version

Use the Latest Installation

$npx @react-native-community/cli@latest init MyProject --version latest

Copy the .tsx or .jsx file to the new Project Folder

$cp MyProject_old/App.tsx MyProject/App.tsx

IOS Config

MyProject/ios/MyProject/info.plist

Android Config

MyProject/android/app/build.gradle
MyProject/android/app/src/main/AndroidManifest.xml

Generate Icon

https://icon.kitchen/

Rename Icons in MyProject/android/app/src/main/AndroidManifest.xml

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher"

Responsive

React Native Platform

import { Platform, StyleSheet } from 'react-native';

    const styles = StyleSheet.create({
      container: {
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
      },
    });

import { Platform, StyleSheet } from 'react-native';

    const styles = StyleSheet.create({
      button: {
        backgroundColor: Platform.select({
          ios: 'blue',
          android: 'green',
        }),
      },
    });

import { Platform, StyleSheet } from 'react-native';
var styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

var Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />

import MyComponent from 'components/MyComponent';
//components/MyComponent.ios.js
//components/MyComponent.android.js

React Native Responsive

import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';

class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.textWrapper}>
          <Text style={styles.myText}>Login</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  textWrapper: {
    height: hp('70%'), // 70% of height device screen
    width: wp('80%')   // 80% of width device screen
  },
  myText: {
    fontSize: hp('5%') // End result looks like the provided UI mockup
  }
});

export default Login;

Helpful Links

Xcode Installation

ReactNative Navigation