Created: 5/9/2023
Created: Sep 5, 2023
By: jsmThemes
Email: thejsmtemplates@gmail.com
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
In this , Open React native code
2. Android StudioIn this , Open Android Folder
3. XcodeIn this , Open iOS Folder
This project works with the following tools and libraries so make sure you have them installed on your machine.npx react-native init AwesomeProject
Project Installation And Run
Follow below Steps on project's root directory
Step 1 :- Open terminal and go to project directory
Step 2 :- Type below command on terminal This command will install all the dependencies
1. yarnStep 3 :- Type below command on terminal This command will install Pods files which is required for ios app installation
2. yarn podStep 4 :- Type below command on terminal This command will run the project on Android
3. yarn run androidStep 5 :- Type below command on terminal This command will run the project on ios
4. yarn run ios
For Setup React-native configuration in ios https://www.facebook.com/rnlab.io/videos/780519085693772
For Setup React-native configuration in android https://www.facebook.com/rnlab.io/videos/498816687651963
After importing project successfully and Open the project folder in textEditor(ex. Visual Studio) and you will get project structure like below image
Package.json Configurations
If you want to see all configurations you can check package.json file in root directory.
{ "name": "hotify", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "pod": "cd ios && pod install && cd ..", "lint": "eslint .", "start": "react-native start", "test": "jest", "release-android": "react-native run-android --variant=release" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.19.1", "@react-native-community/clipboard": "^1.5.1", "@react-native-community/datetimepicker": "^7.4.1", "@react-native-community/masked-view": "^0.1.11", "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "@shopify/flash-list": "^1.5.0", "@twotalltotems/react-native-otp-input": "^1.3.11", "patch-package": "^8.0.0", "react": "18.2.0", "react-native": "0.72.3", "react-native-actions-sheet": "^0.9.0-alpha.21", "react-native-countdown-component": "^2.7.1", "react-native-device-info": "^10.8.0", "react-native-element-dropdown": "^2.9.0", "react-native-gesture-handler": "^2.12.1", "react-native-image-crop-picker": "^0.40.0", "react-native-localization": "^2.3.2", "react-native-modal-datetime-picker": "^17.0.0", "react-native-pager-view": "^6.2.0", "react-native-popup-menu": "^0.16.1", "react-native-progress": "^5.0.0", "react-native-safe-area-context": "^4.7.1", "react-native-screens": "^3.23.0", "react-native-slider": "^0.11.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.10.0", "react-native-tab-view": "^3.5.2", "react-native-track-player": "^3.2.0", "react-native-vector-icons": "^10.0.0˙", "react-redux": "^8.1.2", "redux": "^4.2.1", "redux-thunk": "^2.4.2" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.9", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.7", "prettier": "^2.4.1", "react-native-svg-transformer": "^1.1.0", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" } }
1. Change App Name in IOS
Go to the app > Project > Project from TARGETS > General category > Bundle Identifier
2. Change App Name in Android
Go to the App > res > values > strings.xml
3. Change App Package Name
Please follow this link steps : https://www.npmjs.com/package/react-native-rename
1. Change app icon in iOS
Required minimum app icon 1024 * 1024 .png file You can convert it as per iOS app require from https://makeappicon.com/ It convert all size icon which is require for app
Go to the app > project > Assets > AppIcon > Replace all icon as per it's size
2. Change app icon in Android
Place your app icon inside mipmap folder -> app\res\mipmap\
Icon of the name should be "ic_launcher.png"
1. Replace Splash Screen Logo of Android
Go to the android > app > src > main > res > drawable
2. Replace Splash Screen Background color Android
Go to the android > app > src > main > res > layout > launch_screen.xml
3. Replace Splash Screen Logo And Background Fro Ios
And other change in splash screen to follow this link :
https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae
If you want to self component you can create a component file in components directory. For example components/AButtton.js;
AButtton.jsimport React from "react"; import { StyleSheet, TouchableOpacity, Text } from "react-native"; export const AButtton = ({ title, onPress }) => { return ( ... ); }; const styles = StyleSheet.create({ text: { color: "white", fontSize: 16, fontWeight: "600" }, });
All screens defined in screens directory.
For example NewsListScreen.js file;export const NewsListScreen = () => { const navigation = useNavigation(); const [news, setNews] = useState([]); useEffect(() => { NewsService.getNews() .then((res) => setNews(res.data)) .catch((err) => Alert.alert(err)); }, []); const onClickItem = (item: News) => { navigation.navigate(NavigationNames.NewsDetailScreen, { model: item, }); }; return ( `key${index}`} ItemSeparatorComponent={() => } contentContainerStyle={{ paddingVertical: 12, paddingHorizontal: 12 }} renderItem={({ item }) => { return ( ... ); }} /> ); };
You can define theme variables in "themes/colors.js" file.You need to define colors for light and dark mode separately.
colors.js;//App colors const LightColor = { light: 'light', background: '#FFFFFF', textColor: '#212121', textColor2: '#757575', textColor3: '#424242', btnColor1: '#FFFFFF', borderColor: '#EEEEEE', inputBg: '#FAFAFA', inputBg2: '#FAFAFA', dark3: '#E6F9ED', labelColor: '#616161', labelColor2: '#424242', }; const DarkColor = { dark: 'dark', background: '#181A20', textColor: '#ffffff', textColor2: '#E0E0E0', textColor3: '#FFFFFF', btnColor1: '#1F222A', borderColor: '#35383F', inputBg: '#1F222A', inputBg2: '#181A20', dark3: '#35383F', labelColor: '#E0E0E0', labelColor2: '#E0E0E0', }; // Common colors export const commonColor = { lightColor: '#F5F5F5', darkColor: '#000000', primary: '#06C149', inputFocusColor: '#06C14914', whiteColor: '#FFFFFF', placeHolderColor: '#9E9E9E', alertColor: '#F75555', grayScale1: '#F5F5F5', grayScale3: '#E0E0E0', grayScale5: '#9E9E9E', grayScale6: '#757575', grayScale7: '#616161', grayScale8: '#424242', grayScale9: '#212121', modalBg: 'rgba(0,0,0,0.35)', primary2: '#9BE6B6', primary3: '#6ADA92', primary4: '#38CD6D', primary5: '#06C149', transparent: 'rgba(0,0,0,0)', }; export const colors = { light: { ...LightColor, ...commonColor, }, dark: { ...DarkColor, ...commonColor, }, };Usage;
import {useSelector} from 'react-redux'; const colors = useSelector(state => state.theme.theme); console.log(colors.primary);
We use javascript language in this template.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
jsmThemes
1. Uploaded Hotify item