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
Copy https://reactnative.dev/docs/environment-setup Navigate to the project folder after downloading and extracting the main files from code canyon.
Install dependencies
For iOS
Copy cd ios && pod install && cd ..
Copy npx react-native run-ios For Android
For Check that any android device is connected
Now run
Copy 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:
Change Splash Screen status bar color with primary_dark in app/src/main/res/values/colors.xml
Copy <?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
Copy 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
Copy [[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
Copy sharedI18nUtilInstance.forceRTL(this, true);
sharedI18nUtilInstance.allowRTL(this, true); this is our package.json file
Copy {
"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