React Native

00. Create first app.

00.1 Setup environment

## ------------------| First need to install nodejs LTS version
sudo apt-get update
sudo apt-get upgrade
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

## ------------------| Then we need to install expo cli
npm install -g expo-cli

00.2 Create my FirstProject

## ------------------| Creatre FirstProject
expo init FirstProject
cd FirstProject

## Then we need to create .prettierrc file and past following content.
## this will create same configaration for all pcs
{
    "printWidth": 120,
    "tabWidth":2,
    "useTabs": false,
    "semi":true.
    "singleQuote": true,
    "trailingComma":"all"
}

## Then create components directory. this is whre we store some files like styles.js
mkdir components
touch components/styles.js

## Then we need to create another directory call screens; this is where we create all screens
touch screens/Login.js
touch screens/Home.js

## then we need to install some expo dependencies.
expo install formik styled-components expo-constants

## After all you can run 
npm start # you can also use: expo start

• Inside the styles.js

import styled from 'styled-components';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';

const StatusBarHeight = Constants.statusBarHeight; // to get hight of the status bar

//colors; you can use https://colors.muz.li/
export const Colors ={
    primary: '#FAF9F9', //Cultured
    secondary: '#BEE3DB', //Powder Blue
    tertiary: '#89B0AE', //Morning Blue
    brand: '555B6E', //Independence
    white: 'ffffff',
    green: '40916c',
    red: 'ff4d6d',
};

const { primary, secondary, tertiary, brand, white, green, red } = Colors;

export const StyledContainer = styled.View`
    flex: 1;
    padding: 25px;
    padding-top: ${StatusBarHeight + 10}px;
    background-color: ${primary};
`
export const InnerContainer = styled.View`
    flex: 1;
    width: 100%;
    align-items: center;
`
export const PageTitle = styled.Text`
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    color: ${brand};
    padding: 10px;
`

• Login.js

import React from "react";
import { StatusBar } from 'expo-status-bar';

import {
    StyledContainer,
    InnerContainer,
    PageTitle
} from './../components/styles'

const Login = () => {
    return(
        <StyledContainer>
        <StatusBar style="dark"/>
            <InnerContainer>
                <PageTitle>
                    Hello World
                </PageTitle>
            </InnerContainer>
        </StyledContainer>

    );
}

export default Login;

• App.js

import React from 'react';

//Import Login.js
import Login from './screens/Login'

export default function App() {
  return <Login/>
}              

01. Generate release apk file.

### Create keystore file at <YourProject>/android/app/routerspace.keystore
keytool -genkey -v -keystore <keyName>.keystore -alias <your_key_alias> -keyalg RSA -keysize 2048 -validity 10000        

### Edit this file <YourProject>/android/app/build.gradle 
android {
....
  signingConfigs {
    release {
      storeFile file('<keyName>.keystore')
      storePassword 'password123'
      keyAlias '<your_key_alias>'
      keyPassword 'password123'
    }
  }

  buildTypes {
    release {
      ....
      signingConfig signingConfigs.release

    }
  }
}

### Execute this command
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/       

### Release APK Generation
cd android
./gradlew assembleRelease

### If you get any errors, then try this.
rm -rf android/app/src/main/res/drawable-*
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/       

02. Useful packages

https://www.npmjs.com/package/axios
https://www.npmjs.com/package/formik
https://www.npmjs.com/package/obfuscator-io-metro-plugin
https://www.npmjs.com/package/react-native-toast-message
https://www.npmjs.com/package/react-native-app-intro-slider
https://github.com/react-native-device-info/react-native-device-info