React Native Samples

npx

By default, npx will check whether <command> exists in $PATH, or in the local project binaries (node_modules/.bin), and execute that.
If <command> is not found, it will be installed prior to execution.

Setting up a New REACT-NATIVE Template Project

If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues. React Native has a built-in command line interface, which you can use to generate a new project.

• Use npx to install react-native and perform react-native init in one-shot.

npx react-native init RNStarter
#⠦ Downloading template
#✔ Copying template
#✔ Processing template
#⠴ Installing CocoaPods dependencies (this may take a few minutes)
✔ Installing CocoaPods dependencies (this may take a few minutes)

• To install specific react-native version.

npx react-native init AwesomeProject --version X.XX.X

• Install Custom ReactNative Template (Typescript etc.,)

npx react-native init AwesomeTSProject --template react-native-template-typescript

• View current react-native config

npx --quiet --no-install react-native config
#used in build.gradle for auto-linking.

Adding react-navigation and it's Peer Dependencies

npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --save react-navigation-stack
npm install --save react-native-safe-area-context
npm install --save @react-native-community/masked-view

React Native Support for JSX

By deafult , metro-react-native-babel-preset doesn't pick JSX files. We have to explicitly add resolver.sourceExts to metro.config.js (RN >0.59) like below:

E.g., HomeScreen.jsx failed to be picked by default

module.exports = {
  resolver: {
    /* resolver options */
   sourceExts: ['jsx','js', 'json', 'ts', 'tsx'] //add here
  }
}

Suppport for async and await in eslint

  {
    ecmaVersion: 2017,
  }

Configuring Metro Bundler using metro-config

• Install necessary packages

    npm i --save-dev metro-config

• configure metro.config.js

  const {getDefaultConfig} = require('metro-config');
  //Configure using an async IIFE
  module.exports = (async () => {
    //get default sourceExts, assetExts from metro-config
    const {
      resolver: {sourceExts, assetExts},
    } = await getDefaultConfig();
  
    //return a new metro-config object adding on top of default metro-config.
    // It has a "transformer" object and "resolver" object.
    return {
      transformer: {
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: false,
          },
        }),
        babelTransformerPath: require.resolve('react-native-svg-transformer'),
      },
      resolver: {
        //add jsx addittionaly as it is not added by default.
        sourceExts: [...sourceExts, 'jsx'],
      },
    };
  })();

Configuring ESLint for JSX

parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  }

Configuring Script to run ES-Lint

• Install @react-native-community/eslint-config

npm i @react-native-community/eslint-config --save-dev

• Configure script in packages.json

"scripts": {
  "pretty": "npx eslint --fix \"src/**/*.js*\""
}

Configuring Script to run Prettier

"scripts": {
  "pretty": "npx prettier \"src/**/*.js*\" --write"
}

Now execute npm run pretty to apply prettier to all .js,.jsx files.

Configuring react-native-svg

• Install the necessary packages

    #save react-native-svg in dependencies
    npm i --save react-native-svg
    #save react-native-svg-transfomer in devDependencies
    npm i --save-dev react-native-svg-transformer
    #install necessary ios PODs
    cd ios && pod install

  • Configure metro.config.js to remove svg from assetExt and add to sourceExt

  //Initial metro.config.js is shown above
  resolver: {
        //remove svg from assetExt as it will get transformed into component by react-native-svg-transformer
        assetExts: assetExts.filter(ext => ext !== 'svg'),
        //append svg to sourceExts as they are treated as source from here-on
        sourceExts: [...sourceExts, 'svg'],
      },

Configuring react-native-elements and react-native-vector-icons

• Install & Link necessary pacakges

 npm i --save react-native-elements

 # https://react-native-elements.github.io/react-native-elements/
 npm i --save react-native-vector-icons
 # link
 npx react-native link react-native-vector-icons
 # or Just try pod install
 cd ios && pod install

Configure Prettier to ignore files

• Use .prettierignore

 *.json

VSCode Extensions

• React Native Tools

Common Errors and Solutions

• Text stings must be rendered withing a <Text> component. in JSX

  Happens If we terminate a JSX Tag with semi-colon (;) as shown below Remove the semi-colon and the rendering will be proper.

   <View style={styles.containerStyle}>
   <Image source={pic} style={styles.imageStyle} />;
   </View>

• Installing Local Package as Dependency with react-native

  npm install with a local path installs libraries in node_modules with a symlink pointing to the local path of the package. Unfortunately this causes an issue with the react native metro bundler (" does not exist in the Haste module map"). See here for more information.

  Solutions:

  1. Use react-native install instead of npm install as it doesn't create symbolic links.
  2. Use wml which listens to changes in some folder (using Watchman) and copies changed files into another folder.

  Please Note that there should not be any node_modules folder inside the locally linked package. This will cause unknown react-native module errors.

  Eg., Module RCTLog is not a registered callable module.

References

• create-react-native-module - Tool to create a React Native library module or native view component, with a single command.
• react-native-create-library - Tool to create a React Native library with a single command.

  Caution: This only creates native modules without a view component.

• react-native-create-bridge - Delivers bridge module in Obj-C, Swift, Kotlin, & Java.
• create-react-native-app - (CRNA) - Tool for easy creation of React Native App Template.
• Using typescript with existing RN Project
• Configuring TypeScript with ESLint
• React Native GeoLocation
• React Native GeoLocation - Agontuk
• npm i eslint-plugin-react --save-dev.
• Add "lint:fix": "npx eslint './src/**/*.{ts,tsx}'" in scripts - package.json.
• "pretty:fix": "npx prettier \"src/**/*.ts*\" --write" in scripts - package.json.
• Publishing NPM Packages for RN
• Using Reducer Hook + Context for State Management
• React Native UI Component for Android
• Android Native Component Not re-Layout dynamically

---