React Native

Create project

npx @react-native-community/cli@latest init MyApp

Configure path aliases

1. Install babel-plugin-module-resolver plugin:

npm install -D babel-plugin-module-resolver

2. Edit babel.config.js file

module.exports = {
  plugins: [
    // ...
    [   
      'module-resolver',    
      { 
        alias: {    
          '@': './',    
        },  
      },    
    ],  
    // ...
  ],
};

3. Edit tsconfig.json file

{
  "compilerOptions": {
    // ...
    "paths": { 
      "@/*": ["./*"] 
    } 
    // ...
  }
}

Configure fonts

1. Download the Inter font from here: https://rsms.me/inter/
2. Copy the Inter-Regular.ttf, Inter-Medium.ttf, Inter-SemiBold.ttf, Inter-Bold.ttf and InterDisplay-ExtraBold.ttf files from the ttf folder and paste them in the assets/fonts folder.
3. Edit react-native.config.js file:

module.exports = {
  assets: ['./assets/fonts'],    
};

4. Link the fonts.

npx react-native-asset

Run the CLI

npx saaj init

Configure components.json

You will be asked a few questions to configure components.json:

- Where would you like to keep your components? > components/ui
- Where would you like to keep your hooks? > hooks
- Where would you like to keep your utils? > utils
- Where would you like to keep your types? > types
- Where would you like to keep your themes configuration? > styles

Setup Icons

1. Add Icon component.

npx saaj add Icon

2. To use the icon packages, run:

npx rnvi-update-plist package.json ios/AppName/Info.plist

3. Open ios/AppName/Info.plist and verify that the property called Fonts provided by application (or UIAppFonts if opening the file in a text editor) is present and contains the expected entries. For example:

<key>UIAppFonts</key>
<array>
  <!-- other fonts -->
  <string>Ionicons.ttf</string>
</array>

Setup Reanimated

1. Add react-native-reanimated/plugin plugin to your babel.config.js.

  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin', 
    ],
  };

2. Wrap your existing Metro configuration in the metro.config.js file with the wrapWithReanimatedMetroConfig function.

const { 
  wrapWithReanimatedMetroConfig,  
} = require('react-native-reanimated/metro-config');  
 
const config = {
  // Your existing Metro configuration options
};
 
module.exports = wrapWithReanimatedMetroConfig(config); 

Import Unistyles

Import unistyles.ts file in the root file of your project.

import "@/styles/unistyles";

Run your application

1. Install pods (iOS only)

cd ios && pod install && cd ..

2. Start development server

npx react-native start

3. Start your application

npx react-native run-ios

All Set!

You can now start adding components to your app.