React Native Baba Commerce with CLI

To run React Native Baba Commerce app Template, you must have the latest node and npm installed in your development environment.

We are using the latest react native 0.66 version with react native CLI and React Navigation 6X.

we are using node version v13.7.0

Android Studio 4.2.1

X code 12.5

and most importantly typescript with hooks

Note we are not using any UI library in this project like react native element, native base, etc. Custom components are our first priority.

Please make sure you already have set up React native environment on your pc.

You can set your environment by this official link provided by React native 

https://reactnative.dev/docs/environment-setup

Navigate to the project folder after downloading and extracting the main files from code canyon.

cd BabaCommerce

Install dependencies

npm install

For iOS

cd ios && pod install && cd ..
npx react-native run-ios

For Android

For Check that any android device is connected

adb devices

Now run

npx react-native run-android

Splash screen and app icon

For Android

Customize your launch screen app icon by creating a splashscreen.png -file , ic_launcher.png and ic_launcher_round.png and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

  • drawable-ldpi

  • drawable-mdpi

  • drawable-hdpi

  • drawable-xhdpi

  • drawable-xxhdpi

  • drawable-xxxhdpi

Change Splash Screen status bar color with primary_dark in app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources

For Ios

Customize your splash screen via LaunchImage or LaunchScreen.xib

You can check this documentation for app icon and splash screen

https://medium.com/@appstud/add-a-splash-screen-to-a-react-native-app-810492e773f9

Config file

EcommerceApp/src/components/config.tsx file

you can customize the app with this config file

import {Dimensions} from 'react-native';
import {appColorsType, fontSizeType, configType} from '../redux/types/types';
const WIDTH = Dimensions.get('window').width;
const HEIGHT = Dimensions.get('window').height;

const HEADER_ANDROID_HEIGHT = Dimensions.get('window').height * 0.07;
const HEADER_IOS_HEIGHT = Dimensions.get('window').height * 0.097;
////
const { width, height } = Dimensions.get('window');

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = (size: number) => width / guidelineBaseWidth * size;
const verticalScale = (size: number) => height / guidelineBaseHeight * size;
const moderateScale = (size: number, factor = 0.5) => size + ( scale(size) - size ) * factor;
////////////////////////////////////
const config: configType = {
  isDarkMode: false,
  borderRadius: 10,
  cardStyle: 1,
  homeStyle: 1
};

const appFontSize: fontSizeType = {
  smallSize: moderateScale(11),
  mediumSize: moderateScale(13),
  largeSize: moderateScale(15),
  fontFamily: 'arial',
};
const lightTheme: appColorsType = {
  StatusBarColor: '#F4F4F4',
  barStyle:'dark-content', // dark-content, default
  primaryDark: '#953e22',
  primary: '#d65a31',
  primaryLight: '#de7b5a',
  secondry: '#959595',
  primaryBackgroundColor: '#F4F4F4', //2b2024
  secondryBackgroundColor: '#E8E8E8', //full black
  backgroundImageColor: '#dcdcdc',
  textColor: '#000000',
  secondryTextColor: '#ffffff',
  primaryTextColor: '#ffffff',
  appFontSize: appFontSize,
};
const darkTheme: appColorsType = {
  StatusBarColor: '#282828',
  barStyle: 'light-content', // dark-content, default
  primaryDark: '#953e22',
  primary: '#d65a31',
  primaryLight: '#de7b5a',
  secondry: '#878787',
  primaryBackgroundColor: '#282828', //
  secondryBackgroundColor: '#141414', // white
  backgroundImageColor: '#dcdcdc',
  textColor: '#ffffff',
  primaryTextColor: '#ffffff',
  secondryTextColor: '#000000',
  appFontSize: appFontSize,
};

export {
  lightTheme,
  darkTheme,
  appFontSize,
  config,
  WIDTH,
  HEIGHT,
  HEADER_IOS_HEIGHT,
  HEADER_ANDROID_HEIGHT,
};

LTR and RTL labels

EcommerceApp/src/components/gLJson.ts

this file contains all English and Arabic labels. You can easily add new languages and edit these labels.

Default RTL setup

you can start the app in RTL mode for language like arabic

go into EcommerceApp/src/redux/reducers/reducers.ts file

and set rtl value true in initialstate value

Now for IOS

go into EcommerceApp/ios/EcommerceApp/AppDelegate.m file

now change the value of foreRTL and allowRTl from NO to Yes

 [[RCTI18nUtil sharedInstance] allowRTL:YES]; //<== AmerllicA config
 [[RCTI18nUtil sharedInstance] forceRTL:YES]; //<== AmerllicA config

For android

go into EcommerceApp/android/app/src/main/java/com/ecommerceapp/MainActivity.java

now change the value of foreRTL and allowRTl from false to true

  sharedI18nUtilInstance.forceRTL(this, true); 
  sharedI18nUtilInstance.allowRTL(this, true);

this is our package.json file

{
  "name": "babacommerce",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.9",
    "@react-native-community/slider": "^4.1.10",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",
    "@reduxjs/toolkit": "^1.6.2",
    "react": "17.0.2",
    "react-native": "0.66.1",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-reanimated": "^2.2.3",
    "react-native-restart": "^0.0.22",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^9.0.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.65.0",
    "@types/react-test-renderer": "^17.0.1",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2",
    "typescript": "^3.8.3"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Note: Many more themes are coming in this project

NextIonic Baba Commerce

Last updated

Was this helpful?