Course Description ( React Native )

You must have basic knowledge in following steps
  • We must have basic knowledge about JSX, style, Javascript, TypeScript, ES6, Arrays, JSON Object, Components, State, Props, Hooks.
  • We must have basic knowledge about API .
Android Studio Requirements(Android)
  • 64-bit Microsoft® Windows® 10 10th Generation or higher
  • AMD CPU with support for a Windows Hypervisor, Intel Hexam Supported version
  • 16 GB RAM or more
  • 256 GB Storage HDD/SSD or more
  • 8 GB of available disk space minimum (IDE + Android SDK + Android Emulator) or more
  • 1280 x 800 minimum screen resolution
  • Install Android Studio and download these ->Android SDK Android, SDK Platform, Android Virtual Device : Click here for more
  • Java Development Kit (JDK) Installation: : choco install -y microsoft-openjdk11
  • Visual Studio Editor latest version : Click here to install VS Code
  • React Native Command Line Interface
  • Node installation Node via Chocolatey: choco install -y nodejs-lts
  • Node Download Manually latest version : Click here to download node
  • Watchman
  • Install NPM Packages
IOS macOS Requirements (IOS App)
  • macOS
  • MAC Pro M3 Chip/Intel latest
  • 256 GB Storage HDD/SSD
  • 16 GB RAM
  • 16 GB of available disk space minimum (IDE + Android SDK + Simulator Emulator)
  • 1280 x 800 minimum screen resolution
  • XCode Intallation (install Xcode via the Mac App Store)
  • Visual Studio Editor latest version : Click here to install VS Code
  • React Native Command Line Interface
  • Node installation using Homebrew (brew install node) : Click here to install Node
  • Watchman installation using Homebrew (brew install watchman)
  • NPM
  • CocoaPods
  • Ruby Gem
We will learn following topics
  • Functional Components .
  • Class Components .
  • How to use state and props in functional component .
  • How to use state and props in class component .
  • What is hooks .
  • How to create custom hook .
  • How to pass data from parent to child/child to parent component .
  • What is higher order function (HOF) .
  • How to use higher order function in react native .
  • What is higher order component (HOC) .
  • How to use core components of react native .
  • How to create reusable components .
  • How to use state management components (useContext, useReducer, Provider) .
  • How to use Redux .
  • How to handle API call using (Axios and Fetch) .
  • How to use AsyncStorage for caching machanism.
  • How to create project .
  • How to make professional navigation such as top, drawer, bottom and other navigation.
  • Types of navigation to navigate other screen.
  • How to use icon.
  • Difference & use of scrollview and flatlist .
  • How to use float menu

React Native

How to Configure on Windows® OS
Latest React Native Setup for Windows : Click here for latest setup
  • Install Visual Studio Code
  • Install Gitbash for linux commnad line
  • Install Latest Version of Node
  • Install NPM
  • Install Java jdk
  • Inatall Android Studio
  • Install Reat-native cli globally
  • Install SDK Platform from Android Studio SDK Manager
  • Install SDK Tools from Android Studio SDK Manager
  • Setup Java Evironment
  • Setup Android Evironment
  • Install Extension: VS Code ES7+ React/Redux/React-Native/JS

React Native

How to Configure on Mac (macOS)
Latest React Native Setup for MAC : Click here for latest setup
  • Install Visual Studio Code
  • Install Gitbash for linux commnad line
  • Install Latest Version of Node
  • Install NPM
  • Install Java jdk
  • Inatall Android Studio for Android App
  • Inatall Xcode for IOS App
  • Install Reat-native cli globally
  • Install SDK Platform from Android Studio SDK Manager
  • Install SDK Tools from Android Studio SDK Manager
  • Install Cocoapods
  • Install Home brew
  • Install Ruby
  • Setup Evironment in .bash_profile use this command sudo vi ~/.bash_profile
  • Setup Evironment in .zshrc file use this command sudo vi ~/.zshrc
  • Install Extension: VS Code ES7+ React/Redux/React-Native/JS

React Native

How to create react native project
  • Run following commands in terminal to create project
    • Latest verison : npx react-native@latest init MyAPP
    • npx react-native@x.xx.x init MyAPP --version="X.XX.X"
      • npx react-native@0.71.0 init MyApp --version="0.71.0"
    • React Native TypeScript Project
      • npx react-native init MyAwesomeProject --template react-native-template-typescript
  • Run React Native Android App
    • Open Android Emulator
    • Open the project in VS Code editor and open terminal in VS Code
    • Run Command: npm run react-native-android
    • Customized Command: npm run android
    • How to customize android command in packages.json
      • Go to package.json file
      • Add this line in scripts:
      • "android": "react-native run-android"
  • Run React Native IOS App
    • Open Simulator from xcode
    • Open the project in VS Code editor and open terminal in VS Code
    • Run Command: npm run react-native-ios
    • Customized Command: npm run ios or ios_device
    • How to customize ios command in packages.json
      • Go to package.json file
      • Add these 2 lines in scripts:
      • "ios": "react-native run-ios --simulator=iPhone 14 Pro Max"
      • "ios_device": "react-native run-ios"

Configuration in Package.json

Configuration in Package.json
                package.json
                
                "scripts": {
                  "android": "react-native run-android",
                  "ios": "react-native run-ios --simulator=iPhone 14 Pro Max",
                  "ios_device": "react-native run-ios",
                  "clean-android": "cd android && ./gradlew clean && cd ..",
                  "androidABBRelease": "cd android && ./gradlew bundleRelease",
                  "androidAPKRelease": "cd android && ./gradlew assembleRelease",
                  "clean-install": "npm install --legacy-peer-deps and npx pod-install",
                  "install-debug": "npm install --legacy-peer-deps && ENABLE_FLIPPER=TRUE npx pod-install",
                  "start": "react-native start",
                  "test": "jest",
                  "test-coverage": "npm run test -- -u --watchAll=false --reporters=default --coverage",
                  "lint": "eslint .",
                  "lint-fix": "npm run lint --fix",
                  "prettier": "npx prettier --write",
                  "check": "npx prettier --check  **/*.{ts,tsx,js,json}",
                  "prettier-fix": "npx prettier --write **/*.{js,ts,tsx,json} && npx prettier --write *.{js,ts,tsx,json}",
                  "reset-cache": "npm start -- --reset-cache"
                },
                "collectCoverageFrom": [
                  "src/**/*.{ts,tsx}",
                  "!**/node_modules/**",
                  "!**/locales/**",
                  "!src/navigations/**"
                ],
                "moduleFileExtensions": [
                  "ts",
                  "tsx",
                  "js",
                  "jsx",
                  "json",
                  "node"
                ]
                
             

Prettier Setup

Configuration in .prettierrc.js
Install Prettier Extension in VS Code (Prettier-Code Formatter)
                  
                    // .prettierrc.js
                      module.exports = {
                        arrowParens: 'always',
                        bracketSpacing: true,
                        singleQuote: true,
                        trailingComma: 'all',
                        jsxBracketSameLine: false,
                        jsxSingleQuote: false,
                        quoteProps: 'as-needed',
                        printWidth: 100,
                        useTabs: true,
                        tabWidth: 2,
                        singleAttributePerLine: false,
                        embeddedLanguageFormatting: 'auto',
                        proseWrap: 'preserve',
                        bracketSameLine: true,
                        endOfLine: 'auto',
                      };
                  
              

ESlint Setup

Configuration in .eslintrc.js
Install Eslint Extension in VS Code (Eslint by Microsoft)
                
                  // .eslintrc.js
                    /** @format */
                        module.exports = {
                          root: true,
                          parser: '@typescript-eslint/parser',
                          parserOptions: {
                            ecmaVersion: 6,
                            sourceType: 'module',
                            ecmaFeatures: {
                              jsx: true,
                            },
                            rules: {
                              semi: ['error', 'never'],
                            },
                          },
                          plugins: ['prettier', '@typescript-eslint', 'unused-imports'],
                          extends: [
                            '@react-native-community',
                            'plugin:react/recommended',
                            'plugin:react/jsx-runtime',
                            'plugin:prettier/recommended',
                            'eslint:recommended',
                          ],
                          env: {
                            browser: true,
                            es2021: true,
                          },
                          rules: {
                            'react/jsx-uses-react': 1,
                            semi: ['error', 'always'],
                            'no-unused-expressions': 'off',
                            'no-unused-vars': 'off',
                            '@typescript-eslint/no-unused-vars': ['error'],
                            'unused-imports/no-unused-imports-ts': 2,
                            'react-native/no-inline-styles': 0,
                            'prettier/prettier': [
                              'error',
                              {
                                'no-inline-styles': false,
                              },
                            ],
                          },
                          overrides: [
                            {
                              files: ['*-test.js', '*.spec.js'],
                              rules: {
                                'no-unused-expressions': 'off',
                                'no-unused-vars': 'off',
                                '@typescript-eslint/no-unused-vars': ['error'],
                                'unused-imports/no-unused-imports-ts': 2,
                              },
                            },
                          ],
                        };
                  
                

Commands for Windows

                
                  //Reset cache
                    npx react-native start --reset-cache
                  //Go to android folder 
                    cd Android
                  //Run this commnad to clean gradle
                    ./gradlew clean
                  //To generate apk file for android app
                    ./gradlew assembleRelease -generate apk
                  //To generate abb file for android app
                    ./gradlew bundleRelease -generate abb
                  //Check device connectd with android app
                    adb devices
                  //Check tcpip
                    adb tcpip 8080
                  //Create connect with tcpip
                    adb connect device_ip_address:8080
                  //Kill server
                    adb kill-server
                  //Start server
                    adb start-server
                  // If server is being blocked
                    adb reverse tcp:8081  tcp:8081
                  //Uninstall app from emulator or device
                    adb uninstall com.myapp
                  //Run android app after release generate
                    npm run android -- --mode="release"
                  // Error spawn
                    chmod -R 775 android 
                  //Clean cache
                     npm cache clean
                     npm cache clean --force //  to force
                  //react-native --reset-cache
                     npx react-native start --reset-cache
                
              

Commands for Mac OS

                  
                    //Pod install
                      npm pod-install
                      npx pod install
                    //Go to bash or zshrc file
                      sudo vim ~/.bash_profile
                      sudo ~/.zshrc
                      vi ~/.zshrc
                    //Insert 
                      cmd+i 
                    //Come out from bash or zshrc file
                      Press-> :wq
                  
              
Xcode short cut key
                    
                      //Run project
                        command + r
                      //clean build
                        shift+command+k
                      //build
                        command+b
                      //stop 
                        command+.(dot)
                      //open sidebar area
                        command+0(zero)
                      //Utility area 
                        command+shift+y
                      //open library
                        command+shift+l
                    
                    

Debugging in React Native

  • React Native Debugger Tools download from chrome estension
  • Chrome devTools download from chrome estension
  • Flipper: install flipper in mac
  • Android Studio: Native Crash
  • Mac Simulator: Control+command+z
  • Mac Android: command+m
  • Keyboard Press: d

Code Quality in React Native

We can follow these steps for quality code
  • Github Copilot
  • Use Functional Components and Hooks
  • Avoid Direct DOM Manipulation
  • De-structuring Props
  • Optimize Imports
  • Use PureComponent or Reactmemo
  • Implement PropTypes or TypeScript
  • Optimize Images and Assets
  • Throttle and Debounce Functions
  • Properly Manage State
  • Use React Navigation
  • Write Unit Tests
  • Use ESLint and Prettier

Optimizing Performance in React Native

Optimizing Application Performance in React Native
  • Use React Navigation
  • Do not use scrollview to dsiplay list of data being fetched from api
  • Use Flatlist
  • Avoid passing a function as a property to component
  • Scale & Resize images
  • Cache the Image Files
  • Use useMemo for memoizing values
  • Use useCallback for caching method
  • Throttle and Debounce Functions
  • Avoid re-rendering and unnecessary rendering
  • Use React.memo to avoid unnecessary rendering
  • Avoid arrow function
  • Use native driver with the animated library
  • Make use of memory Optimization
    • Prevent memory leaks by unsubscribing from event listeners, clearing intervals