# React Native Baba Commerce with Expo

## Installation

There are two tools that you need to develop apps with Expo: a command line app called Expo CLI to initialize and serve your project and a mobile client app called Expo Go to open it on iOS and Android. Any web browser will work for opening the project on the web.

You don't need macOS to build an iOS app with Expo, you only need an iOS device to run the Expo Go app. For your development machine, Windows, Linux, and macOS are all supported.

#### [Requirements](https://docs.expo.dev/get-started/installation/#requirements)

* [Node.js LTS release](https://nodejs.org/en/)
* [Git](https://git-scm.com/)
* [Watchman](https://facebook.github.io/watchman/docs/install#buildinstall) for macOS users

#### [Installing Expo CLI](https://docs.expo.dev/get-started/installation/#installing-expo-cli)

`# Install the command line tool`

```
npm install --global expo-cli
```

You can set your environment by this official link provided by Expo

{% embed url="<https://docs.expo.dev/get-started/installation>" %}

## Configuring a splash screen and app icon

Please follow this URL to configure a splash screen and icon

{% embed url="<https://docs.expo.dev/tutorial/configuration>" %}

## 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,
};

```

this is our package.json file

```
{
  "name": "expobabaapp",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/slider": "4.1.7",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@types/react-redux": "^7.1.20",
    "@unimodules/core": "~7.2.0",
    "@unimodules/react-native-adapter": "~6.5.0",
    "expo": "~43.0.2",
    "expo-linear-gradient": "~10.0.3",
    "expo-status-bar": "~1.1.0",
    "fiction-expo-restart": "^1.1.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.8.0",
    "react-native-web": "0.17.1",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "typescript": "~4.3.5"
  },
  "private": true
}

```


---

# 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/react-native-baba-commerce-with-expo.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.