reactNativeApp

To setup the environment and create the boilerplate of react native projects.

MAC User

• install Xcode and Android Studio

Setup Environment in machine

• npm install -g react-native-cli

• To check the version : react-native -v

• react-native init projectName

Project Structure Overview

• android folder : It consist compiled code of android

• Ios folder : It consist compiled code of ios.

• package.json file :

   - It has dependencies i.e required for production & development.
  - It has devdependencies i.e required for development only.
  

TypeScript Setup

install the following:-

• react-native-typescript-transformer

• tsllint

• tslint-config-prettier

• tslint-react-recommended

• typescript

   npm i react-native-typescript-transformer tslint tslint-config-prettier tslint-react-recommended typescript
  

Add the file for the type script.

Add tsconfig.json

tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"jsx": "react",
"lib": [
"es2018",
"dom"
],
"allowSyntheticDefaultImports": true
},
"exclude": [
"node_modules"
],
"include": [
"./src/**/*"
]
}

Add tslint.json

tslint.json
{
"extends": [
"tslint:recommended",
"tslint-config-prettier",
"tslint-plugin-prettier"
],
"rules": {
"prettier": true,
"ordered-imports": [
false
],
"quotemark": [
true,
"single",
"jsx-single",
"avoid-escape"
],
"semicolon": [
false,
"never"
],
"member-access": [
false
],
"member-ordering": [
false
],
"trailing-comma": [
true,
{
"singleline": "never",
"multiline": "always"
}
],
"no-empty": false,
"no-submodule-imports": false,
"no-implicit-dependencies": false,
"no-constant-condition": false,
"triple-equals": [
true,
"allow-undefined-check"
],
"ter-indent": [
false,
2,
{
"SwitchCase": 1
}
],
"no-duplicate-imports": true,
"jsx-alignment": false,
"jsx-no-bind": true,
"jsx-no-lambda": true,
"interface-name": false,
"object-literal-sort-keys": false,
"max-classes-per-file": false
}
}

To run the react-native app in android.

react-native run-android

To Link assets or third party library.

 react-native.config.js
<!-- When link third party library begin -->
module.exports = { 'react-native-code-push':{
platforms:{
android: null,
ios:null
}
}
}
<!-- When link third party library end -->
<!-- When link assets begin -->
module.exports = {
assets: ['./src/assets/fonts/'],
};
<!-- When link assets end -->
<!-- To Link the file automatically run the below command -->
react-native link

To make responsive UI in react-native

```
npm i react-native-responsive-screen
```