React Native Basic UI Setup

Demo App URL ( May not be up-to-date, Follow the below steps and run it in your local )

https://i.diawi.com/w87ZVp

Features:

✅ Splash Screen Image Upon Starting of Application

✅ Folder Architecture

✅ Stack, Tab and Drawer Navigation

✅ Stack Navigation Screens in Drawer Navigation ( Eg: Settings Tab)

✅ Font and Size(height & width) Responsive Design for all mobile screens

✅ Light and Dark Mode

✅ SVG Images Rendering

✅ Custom Bottom Tab Bar

✅ Language Translation

✅ Fixed Sub Tabs

✅ Dynamic Sub Tabs

✅ Added More Helpers ( Share, Call, Download etc)

➿ Custom Dropdowns ( Coming soon... )

➿ FAQ Collapse View ( Coming soon... )

➿ Animations ( Coming soon... )

➿ More features will be added soon...

Step 1

npx react-native init CareerWill

Step 2

npm i --save @react-native-masked-view/masked-view @react-navigation/native @react-navigation/stack  metro-config react-native-gesture-handler react-native-safe-area react-native-safe-area-context react-native-screens react-native-svg react-native-svg-transformer react-native-vector-icons react-native-iphone-x-helper  @react-native-async-storage/async-storage react-native-reanimated

To support status bar in IOS devices use below NPM

npm i rn-status-bar --save

For Fixed Top Tab bar

npm i --save react-native-pager-view @react-navigation/material-top-tabs

Home -> Fixed Tabs -> Select Fixed Tabs

For Language Translation

npm i --save i18next react-i18next react-native-localize

Langauge -> Choose Language

Step 3

Copy assets/fonts from root

Add below lines in babel.config.js

  plugins: [
    'react-native-reanimated/plugin',
  ],

to support SVG icons replace metro.config.js file with below

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
 const {
   resolver: { sourceExts, assetExts },
 } = await getDefaultConfig();

 return {
   transformer: {
     babelTransformerPath: require.resolve('react-native-svg-transformer'),
     getTransformOptions: async () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: false,
       },
     }),
   },
   resolver: {
     assetExts: assetExts.filter(ext => ext !== 'svg'),
     sourceExts: [...sourceExts, 'svg'],
   },
 };
})();

module.exports = {
 transformer: {
   getTransformOptions: async () => ({
     transform: {
       experimentalImportSupport: false,
       inlineRequires: true,
     },
   }),
 },
};

For Fonts add react-native.config.js in root and copy below

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

and add

npx react-native-asset

to add fonts to android/IOS

Step 4

npx react-native assest ( it will update fonts to android/ios )

cd/ios - pod install

Step 5

npm run-android

npm run ios

Use Below to Covert SVG images to JS files

https://transform.tools/svg-to-react-native

For Splash Screen

• Convert your icons in to different sizes using https://www.appicon.co/
• replace this images with android/app/src/main/res images ( Folder name starts with mipmap )
• Update Your App Name in android/app/src/main/res/values/string.xml
• Create color.xml file under android/app/src/main/res/values and paste below

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   color for the app bar and other primary UI elements -->
    <color name="colorPrimary">#FFFFFF</color>
    <color name="colorPrimaryDark">#A52D53</color>
    <color name="splashscreen_background">#FFFFFF</color>
    <color name="colorAccent">#FFFFFF</color>
</resources>

• Create background_splash.xml file under android/app/src/main/res/drawable and paste below

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimary"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher"/>
    </item>
</layer-list>

• Create splashscreen.xml file under android/app/src/main/res/drawable and paste below

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/splashscreen_background"/>
    <item>
        <bitmap
            android:gravity = "center"
            android:src="@mipmap/ic_launcher"/>
    </item>
</layer-list>

• Import above in android/app/src/main/AndroidManifest.xml in activity

<activity
...
android:theme="@style/SplashTheme"
>

• Add Below in android/app/src/main/res/values/styles.xml under resourses

<resources>
...
 <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    <item name="android:windowBackground">@drawable/splashscreen</item>
            <item name="android:windowDisablePreview">true</item>
    </style>
</resources>

Light Mode

Dark Mode