# 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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://divfusion0.gitbook.io/divfusion/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.