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
1
https://reactnative.dev/docs/environment-setup
Copied!
Navigate to the project folder after downloading and extracting the main files from code canyon.
1
cd BabaCommerce
Copied!
​
Install dependencies
1
npm install
Copied!
​
For iOS
1
cd ios && pod install && cd ..
Copied!
1
npx react-native run-ios
Copied!
For Android
​
For Check that any android device is connected
1
adb devices
Copied!
Now run
1
npx react-native run-android
Copied!

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
1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
<color name="primary_dark">#000000</color>
4
</resources
Copied!
​
For Ios
Customize your splash screen via LaunchImage or LaunchScreen.xib
You can check this documentation for app icon and splash screen

Config file

EcommerceApp/src/components/config.tsx file
you can customize the app with this config file
1
import {Dimensions} from 'react-native';
2
import {appColorsType, fontSizeType, configType} from '../redux/types/types';
3
const WIDTH = Dimensions.get('window').width;
4
const HEIGHT = Dimensions.get('window').height;
5
​
6
const HEADER_ANDROID_HEIGHT = Dimensions.get('window').height * 0.07;
7
const HEADER_IOS_HEIGHT = Dimensions.get('window').height * 0.097;
8
////
9
const { width, height } = Dimensions.get('window');
10
​
11
//Guideline sizes are based on standard ~5" screen mobile device
12
const guidelineBaseWidth = 350;
13
const guidelineBaseHeight = 680;
14
​
15
const scale = (size: number) => width / guidelineBaseWidth * size;
16
const verticalScale = (size: number) => height / guidelineBaseHeight * size;
17
const moderateScale = (size: number, factor = 0.5) => size + ( scale(size) - size ) * factor;
18
////////////////////////////////////
19
const config: configType = {
20
isDarkMode: false,
21
borderRadius: 10,
22
cardStyle: 1,
23
homeStyle: 1
24
};
25
​
26
const appFontSize: fontSizeType = {
27
smallSize: moderateScale(11),
28
mediumSize: moderateScale(13),
29
largeSize: moderateScale(15),
30
fontFamily: 'arial',
31
};
32
const lightTheme: appColorsType = {
33
StatusBarColor: '#F4F4F4',
34
barStyle:'dark-content', // dark-content, default
35
primaryDark: '#953e22',
36
primary: '#d65a31',
37
primaryLight: '#de7b5a',
38
secondry: '#959595',
39
primaryBackgroundColor: '#F4F4F4', //2b2024
40
secondryBackgroundColor: '#E8E8E8', //full black
41
backgroundImageColor: '#dcdcdc',
42
textColor: '#000000',
43
secondryTextColor: '#ffffff',
44
primaryTextColor: '#ffffff',
45
appFontSize: appFontSize,
46
};
47
const darkTheme: appColorsType = {
48
StatusBarColor: '#282828',
49
barStyle: 'light-content', // dark-content, default
50
primaryDark: '#953e22',
51
primary: '#d65a31',
52
primaryLight: '#de7b5a',
53
secondry: '#878787',
54
primaryBackgroundColor: '#282828', //
55
secondryBackgroundColor: '#141414', // white
56
backgroundImageColor: '#dcdcdc',
57
textColor: '#ffffff',
58
primaryTextColor: '#ffffff',
59
secondryTextColor: '#000000',
60
appFontSize: appFontSize,
61
};
62
​
63
export {
64
lightTheme,
65
darkTheme,
66
appFontSize,
67
config,
68
WIDTH,
69
HEIGHT,
70
HEADER_IOS_HEIGHT,
71
HEADER_ANDROID_HEIGHT,
72
};
73
​
Copied!

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
1
[[RCTI18nUtil sharedInstance] allowRTL:YES]; //<== AmerllicA config
2
[[RCTI18nUtil sharedInstance] forceRTL:YES]; //<== AmerllicA config
Copied!

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
1
sharedI18nUtilInstance.forceRTL(this, true);
2
sharedI18nUtilInstance.allowRTL(this, true);
Copied!
this is our package.json file
1
{
2
"name": "babacommerce",
3
"version": "0.0.1",
4
"private": true,
5
"scripts": {
6
"android": "react-native run-android",
7
"ios": "react-native run-ios",
8
"start": "react-native start",
9
"test": "jest",
10
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
11
},
12
"dependencies": {
13
"@react-native-async-storage/async-storage": "^1.15.9",
14
"@react-native-community/slider": "^4.1.10",
15
"@react-navigation/bottom-tabs": "^6.0.9",
16
"@react-navigation/drawer": "^6.1.8",
17
"@react-navigation/native": "^6.0.6",
18
"@react-navigation/native-stack": "^6.2.5",
19
"@react-navigation/stack": "^6.0.11",
20
"@reduxjs/toolkit": "^1.6.2",
21
"react": "17.0.2",
22
"react-native": "0.66.1",
23
"react-native-app-intro-slider": "^4.0.4",
24
"react-native-gesture-handler": "^1.10.3",
25
"react-native-image-zoom-viewer": "^3.0.1",
26
"react-native-linear-gradient": "^2.5.6",
27
"react-native-reanimated": "^2.2.3",
28
"react-native-restart": "^0.0.22",
29
"react-native-safe-area-context": "^3.3.2",
30
"react-native-screens": "^3.8.0",
31
"react-native-splash-screen": "^3.2.0",
32
"react-native-vector-icons": "^9.0.0",
33
"react-redux": "^7.2.6",
34
"redux": "^4.1.1",
35
"redux-persist": "^6.0.0"
36
},
37
"devDependencies": {
38
"@babel/core": "^7.12.9",
39
"@babel/runtime": "^7.12.5",
40
"@react-native-community/eslint-config": "^2.0.0",
41
"@types/jest": "^26.0.23",
42
"@types/react-native": "^0.65.0",
43
"@types/react-test-renderer": "^17.0.1",
44
"babel-jest": "^26.6.3",
45
"eslint": "^7.14.0",
46
"jest": "^26.6.3",
47
"metro-react-native-babel-preset": "^0.66.2",
48
"react-test-renderer": "17.0.2",
49
"typescript": "^3.8.3"
50
},
51
"resolutions": {
52
"@types/react": "^17"
53
},
54
"jest": {
55
"preset": "react-native",
56
"moduleFileExtensions": [
57
"ts",
58
"tsx",
59
"js",
60
"jsx",
61
"json",
62
"node"
63
]
64
}
65
}
66
​
67
​
Copied!
​
Note: Many more themes are coming in this project
​
​
Last modified 3d ago