> For the complete documentation index, see [llms.txt](https://divfusion0.gitbook.io/divfusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://divfusion0.gitbook.io/divfusion/master.md).

# React Native Baba Commerce with CLI 

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

#### &#x20;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**