“Hotify - Music Streaming App React Native CLI Ui Kit ” Documentation by “jsmThemes” v1


“Hotify - Music Streaming App React Native CLI Ui Kit ”

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!


Table of Contents

  1. Installation And Run Project
  2. Directory Structure
  3. App Configurations
  4. Customize App
  5. Components
  6. Screens
  7. Theme
  8. Javascript Language
  9. Change Logs

React-Native App


A) Installation And Run Project - top

Barber Mobile App is a React Native project. And the project works on Cli tool.

Requirements for Software :

1. TextEditor (Like as Visual Code)

    In this , Open React native code

2. Android Studio

    In this , Open Android Folder

3. Xcode

    In this , Open iOS Folder

This project works with the following tools and libraries so make sure you have them installed on your machine.
Download link for node and npm: https://nodejs.org/en/
Download link for yarn: https://yarnpkg.com/lang/en/docs/install/#mac-stable

Install Both Tools and then check by running below commands on terminal to check if they are installed

HTML Structure

For React-native cli;
	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. yarn
Step 3 :- Type below command on terminal This command will install Pods files which is required for ios app installation
	2. yarn pod
Step 4 :- Type below command on terminal This command will run the project on Android
	3. yarn run android
Step 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

B) Directory Structure - top

After importing project successfully and Open the project folder in textEditor(ex. Visual Studio) and you will get project structure like below image

HTML Structure

In "src" directory;

C) App Configurations - top

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"
  }
}





				  

D) Customize App - top

Change App name

1. Change App Name in IOS

Go to the app > Project > Project from TARGETS > General category > Bundle Identifier

HTML Structure


2. Change App Name in Android

Go to the App > res > values > strings.xml

HTML Structure


3. Change App Package Name

Please follow this link steps : https://www.npmjs.com/package/react-native-rename


Change App icon

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

HTML Structure


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"

HTML Structure

Change App Splash Screen

1. Replace Splash Screen Logo of Android

Go to the android > app > src > main > res > drawable

HTML Structure


2. Replace Splash Screen Background color Android

Go to the android > app > src > main > res > layout > launch_screen.xml

HTML Structure


3. Replace Splash Screen Logo And Background Fro Ios

HTML Structure


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

E) Components - top

If you want to self component you can create a component file in components directory. For example components/AButtton.js;

AButtton.js
import 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" },
});
	

F) Screens - top

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 (
			...
		  );
		}}
	  />
	);
  };
		

G) Theme - top

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);
		

H) Javascript Language - top

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

Go To Table of Contents


I) Change Logs - top


Version 1.0.0 (5/09/2023):
1. Uploaded Hotify item