Fitness App React Native Version

Getting Started

Version: 1.0
Author: V1 Technologies

Created: January 2026
Updated: January 2026

If you have any questions that are beyond the scope of this help file, Please feel free to whatsapp us via Our Contact Us Page.

Introduction

First of all, Thank you so much for purchasing this product and for chosing V1 Technologies. You are awesome!
Please note that we do our best to privide you advice and exceptional support from V1 Technologies, however you are downloading the Codes Only and Paid Support is not included in the price.

This document is based on the version mentioned. If you are running a different version, please use the appropriate commands. (Google is always helpful in finding the latest commands)

This documentation will help you at installation of the product easily and quickly . Please go through the documentation carefully to understand how to set up the code and get everything running smoothly. We have tried our best to document each and every steps for any beginners or with intermediate expertise to get the app up and running.

Requirements

To install and set up the project, the following requirements must be met:

1. System Requirements

Operating System: macOS, Windows, or Linux
Code Editing Software: (eg: Visual Studio Code , Sublime Text or Notepad Plus)
iOS Deployment To deploy to iOS you need Mac Machine with X-Code latest version installed
Android Deployment To deploy to Android you need Android Studio latest version installed
Watchman (Optional for macOS/Linux): Install Watchman

2. React Native Requirements

There are two ways to install React Native:

Expo CLI (Beginner-Friendly)
React Native CLI (Advanced, Full Control)

A. Expo CLI (Recommended for Beginners)


            # Install Expo CLI
            npm install -g expo-cli
            
            # Create a new project
            npx create-expo-app MyApp
            cd MyApp
            npm start

Use Expo Go App to test on mobile (iOS/Android).

B. React Native CLI (Advanced Users)


            # Create a new React Native project
            npx @react-native-community/cli@latest init MyApp
            cd MyApp
            
            # Run the app
            npx react-native run-android   # For Android
            npx react-native run-ios       # For iOS (Mac required)
            (Note: Since this is React Native 0.77.0, use npx react-native run-ios, as it will automatically start in the terminal.)

3. Additional Dependencies

Metro Bundler (Default React Native Packager)
React Navigation (For Navigation System)


            npm install @react-navigation/native
            npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

State Management: Redux or Context API
Styling: Styled Components, Tailwind, or Native Base

4. Build & Deployment

To build and deploy your React Native app:


            # Build for Android
            cd android && ./gradlew assembleRelease
            
            # Build for iOS
            cd ios && pod install

For deployment, use Firebase, Play Store, or App Store.

For more details, visit: React Native Official Docs

Files Structure

The project follows a structured folder hierarchy to maintain modularity and scalability. Below is a basic folder structure for a React Native app:

/android - Contains Android native project files
/ios - Contains iOS native project files
/assets - Stores images, fonts, and other assets
/src - Main source folder for app development
- /components - Reusable UI components
- /screens - Different screens of the app
- /navigation - Navigation configuration
- /utils - Utility/helper functions
/node_modules - Installed dependencies
App.js - Main entry point of the app
package.json - Project dependencies and scripts
index.js - Entry point for React Native
babel.config.js - Babel configuration

Below is a sample App.js file:


                import React from 'react';
                import {StatusBar, useColorScheme, View} from 'react-native';
                import {NavigationContainer} from '@react-navigation/native';
                import AppNavigator from './src/navigation/AppNavigator';
                import {environment} from './src/environments/environments';
                import 'react-native-gesture-handler';
                import 'react-native-reanimated';
            
                const App = () => {
                  const colorScheme = useColorScheme();
                  return (
                    <NavigationContainer>
                    <View style={{flex: 1, backgroundColor: 'white'}}>
                    <StatusBar
                    animated={true}
                    backgroundColor={environment.white_color}
                    barStyle={colorScheme === 'dark' ? 'dark-content' : 'dark-content'}/>
                    <AppNavigator>
                    </View>
                    </NavigationContainer>
                  );
                };
                export default App;

For more details on React Native project structure, visit: https://reactnative.dev/docs/environment-setup

Customisation

In React Native, we do not use external CSS files for theming. Instead, we use a environment.js file to store color schemes.

We have provided Color Schemes inside environment.js. You can switch themes dynamically in your app.

How to Change Colours

Modify the environment.js file located at src/environment/environment.js:


              // environment.js - Define Multiple Themes
              export const environment = {
                brown_color: '#f37022',
                red_color: '#a00e0f',
                splash_color: '#ff8da1',
                Coral_Red: '#ff8da1',
                white_color: '#fff',
                light_gray_color: '#d3d3d3',
              };
              // Default theme
              const defaultTheme = environment.Coral_Red;

How to Apply a Theme in Your Component?


              import React, { useState } from 'react';
              import { View, Text, Button, StyleSheet } from 'react-native';
              import  environment  from './src/environment/environment.js';
              
              const App = () => {
                const [currentTheme, setCurrentTheme] = useState(environment.light_gray_color);
              
                return (
                  <View style={[styles.container, { backgroundColor: currentTheme.background }]}>
                    <Text style={[styles.text, { color: currentTheme.primary }]}>
                      This is {currentTheme.primary} theme
                    </Text>
                    <Button title="Switch to Red Theme" onPress={() => setCurrentTheme(environment.red_color)} />
                  </View>
                );
              };
              
              const styles = StyleSheet.create({
                container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
                text: { fontSize: 18, marginBottom: 10 },
              });
              
              export default App;

For more advanced theming, consider using React Context API or Styled Components. Learn more at: https://reactnative.dev/docs/stylesheet

Icons

react-native-vector-icons is used in React Native.

Installation


            # Install the package
            npm install react-native-vector-icons

Import the icons in your React Native component:


                import React from 'react';
                import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
                import Arrowleft from 'react-native-vector-icons/AntDesign';
                import {environment} from '../../environments/environments';                
            
                const Header = ({title, showBackButton, onBackPress}) => {
                  return (
                <View style={styles.container}>
                {showBackButton ? (
                  <TouchableOpacity style={styles.backButton} onPress={onBackPress}>
                  <Arrowleft name="arrowleft" size={25} style={styles.backIcon} />
                  </TouchableOpacity>
                ) : (
                  <View style={styles.placeholder} />
                )}
                <View style={styles.titleContainer}>
                <Text style={[styles.title, styles.getTitleMargin(title)]}>
                    {title}
                    </Text>
                    </View>
                </View>
              );
            };
            
            const styles = StyleSheet.create({
              container: {
                width: '100%',
                flexDirection: 'row',
                alignItems: 'center',
                height: '6%',
                paddingHorizontal: '2%',
              },
              backButton: {
                width: '12%',
              },
              backIcon: {
                fontWeight: '500',
              },
              placeholder: {
                width: '12%',
              },
              titleContainer: {
                width: '88%',
              },
              title: {
                fontSize: 23,
                color: environment.Coral_Red,
                fontWeight: '500',
              },
              getTitleMargin: title => ({
                marginLeft:
                  title === 'Values Assessment'
                    ? '12%'
                    : title === 'IQ Assessment'
                    ? '20%'
                    : '0%',
              }),
            });
            
            export default Header;

Note For a full list of icons, visit: React Native Vector Icons

Demo

App Demo

The App can be downloaded from here: App Demo

Video Demo

The Video Demo can be seen here:

Installation

Follow the steps below to set up your React Native app:

Extract the downloaded package and open the /ReactNative folder to find all the project files.
Below is the folder structure, which needs to be set up in your system:
- ReactNative/src - Contains all of the source code
  - ReactNative/src/components - Reusable UI components
  - ReactNative/src/screens - App screens
  - ReactNative/src/assets - Images, fonts, etc.
  - ReactNative/src/navigation - Navigation setup
  - ReactNative/src/redux - State management (if used)
- ReactNative/App.js - Main entry point
- package.json - Dependencies and scripts
Run the following commands to install dependencies and start the app:
- npm install (or yarn install)
- npx react-native start - Start Metro bundler
- npx react-native run-android - Run on Android
- npx react-native run-ios - Run on iOS
You are now ready to customize your app and add content!

Setup Instructions for React Native

🍏 iOS Setup

Install **Xcode** from the Mac App Store.
Install CocoaPods (if not installed) by running:


                sudo gem install cocoapods

Navigate to your project directory and install iOS dependencies:


                cd ios
                pod install

Run the project on an iOS simulator:


                npx react-native run-ios
                (Note: Since this is React Native 0.77.0, use npx react-native run-android, as it will automatically start in the terminal.)

🎯 Common Issues & Fixes

If you face issues while running the project, try the following:

For Android: Ensure the **Android Emulator** is running before executing the command.
For iOS: If you see a `pod install` error, try **removing the `Pods` folder** and reinstalling:


                cd ios
                rm -rf Pods
                pod install --repo-update

🔗 Learn More

For more details, visit the official React Native setup guide: React Native Setup Docs

Xcode Setup for iOS

To run your React Native app on iOS, you need to set up Xcode properly. Follow these steps to configure Xcode and run your app on an iOS simulator or device.

1️⃣ Install Xcode

Download and install the latest version of Xcode from the Mac App Store or from Apple's Developer Website.

2️⃣ Install CocoaPods

Run the following command in your terminal:

sudo gem install cocoapods

3️⃣ Set Up Your iOS Project

Navigate to the ios folder in your project and install dependencies:

cd ios && pod install && cd ..

4️⃣ Open Xcode and Configure Signing

Open the .xcworkspace file inside the ios folder:

open ios/YourAppName.xcworkspace

Inside Xcode, do the following:

Go to Signing & Capabilities tab.
Select a development team (create one if needed).
Ensure the Bundle Identifier is unique.

5️⃣ Run the iOS App

To run your app on an iOS simulator, use:

npx react-native run-ios

Or, open Xcode and click **Run**.

If you need more advanced configurations, refer to the official guide: React Native Environment Setup.

iOS Setup

In React Native, we use react-navigation to create a Drawer Sidebar.

📌 iOS Setup

If you are setting up the project for iOS, follow these additional steps:

Make sure you have Xcode installed.
Install CocoaPods if you haven't already:
```
sudo gem install cocoapods
```
Navigate to the ios folder inside your project and install dependencies:
```
cd ios && pod install && cd ..
```
Run the iOS app:
```
npx react-native run-ios
```
(Note: Since this is React Native 0.77.0, use npx react-native run-ios, as it will automatically start in the terminal.)

📌 Drawer Sidebar Example

Below is an example of a sidebar with navigation links.


              import React from "react";
              import { createDrawerNavigator } from "@react-navigation/drawer";
              import { NavigationContainer } from "@react-navigation/native";
              import { View, Text, StyleSheet } from "react-native";
            
              const Drawer = createDrawerNavigator();
            
              const Screen1 = () => (
                <View style={styles.screen}>
                  <Text>Screen 1</Text>
                </View>
              );
            
              const Screen2 = () => (
                <View style={styles.screen}>
                  <Text>Screen 2</Text>
                </View>
              );
            
              const SidebarNavigation = () => (
                <NavigationContainer>
                  <Drawer.Navigator initialRouteName="Screen1">
                    <Drawer.Screen name="Screen 1" component={Screen1} />
                    <Drawer.Screen name="Screen 2" component={Screen2} />
                  </Drawer.Navigator>
                </NavigationContainer>
              );
            
              const styles = StyleSheet.create({
                screen: {
                  flex: 1,
                  justifyContent: "center",
                  alignItems: "center",
                },
              });
            
              export default SidebarNavigation;

📌 Light Sidebar

Light background color with dark text.


              const styles = StyleSheet.create({
                drawer: {
                  backgroundColor: "#fff",
                },
              });

📌 Dark Sidebar

Dark background with light text.


              const styles = StyleSheet.create({
                drawer: {
                  backgroundColor: "#222",
                  color: "#fff",
                },
              });

You need to install react-navigation and react-native-gesture-handler to use Drawer Navigation. Also, ensure you run cd ios && pod install before running on iOS.

Running the iOS Project on Xcode

To run the React Native app on an iOS device or simulator, follow these steps:

1. Navigate to the iOS folder & Install Pods


            cd ios
            pod install

2. Open the Xcode Project


            open ios/YourProjectName.xcworkspace

3. Run the App in Xcode

Select a simulator (or connected iPhone) and click the **Run** button (▶) in Xcode.

4. Alternatively, Run from Terminal

You can also use the following command to run the app on an iOS simulator:


            npx react-native run-ios

Make sure you have Xcode installed from the Mac App Store before running the iOS project.

How to Run React Native App on Xcode

To run a React Native app on Xcode for iOS development, follow these steps:

Step 1: Install Dependencies

Ensure you have the required dependencies installed:

macOS with the latest version
Xcode
Homebrew (for installing dependencies)
Node.js and Watchman

Step 2: Navigate to the iOS Folder

Go to your React Native project directory and run:

cd ios

Step 3: Install iOS Dependencies

Run CocoaPods install command:

pod install

This will install all iOS dependencies in the ios/ folder.

Step 4: Open the Project in Xcode

Run the following command to open your project in Xcode:

xed .

Alternatively, you can open the project manually by navigating to:

ios/MyProject.xcworkspace

Double-click the .xcworkspace file to open it in Xcode.

Step 5: Select a Simulator

In Xcode:

Click on the top-left device selection dropdown.
Select an iPhone simulator (e.g., iPhone 14 Pro).

Step 6: Build and Run

Click the "Run" button (▶) in Xcode or use the terminal command:

npx react-native run-ios

Step 7: Debugging

If you face issues, open the iOS logs in the terminal using:

npx react-native log-ios

For more details, visit: https://reactnative.dev/docs/environment-setup

Android Setup

To use the accordion feature in your React Native project on Android, follow these steps:

1. Install Dependencies

Run the following command to install required dependencies:

npm install required-dependencies-Name

2. Run the Android App

Once dependencies are installed, start the Metro server and run the app on an Android emulator or real device:


        npx react-native start     # Start Metro Server
        npx react-native run-android  # Run App on Android
        (Note: Since this is React Native 0.77.0, use npx react-native run-android, as it will automatically start in the terminal.)

3. Troubleshooting

If you face issues while running the app, try cleaning the build cache:


        cd android
        ./gradlew clean
        cd ..
        npx react-native run-android

Make sure you have Android Studio installed and the emulator is running. If you are using a real device, enable USB Debugging from Developer Options.

Android Project Setup

To run the React Native project on an Android device or emulator, follow these steps:

1. Install Dependencies

Make sure you have Node.js, JDK, and Android Studio installed. Then, install the dependencies:


        npm install -g react-native-cli
        npm install

2. Setup Android Environment

Install Android SDK and set up environment variables:


        export ANDROID_HOME=$HOME/Library/Android/sdk
        export PATH=$PATH:$ANDROID_HOME/emulator
        export PATH=$PATH:$ANDROID_HOME/tools
        export PATH=$PATH:$ANDROID_HOME/tools/bin
        export PATH=$PATH:$ANDROID_HOME/platform-tools

3. Start Metro Bundler

Metro Bundler is required to run React Native projects.


        npx react-native start

4. Run the App on Android

Connect your device via USB or start an emulator, then run:


        npx react-native run-android
        (Note: Since this is React Native 0.77.0, use npx react-native run-android, as it will automatically start in the terminal.)

If you face any issues, check the React Native documentation: https://reactnative.dev/docs/environment-setup

Generate APK in React Native

Follow these steps to generate an APK for your React Native project:

1️⃣ Setup Required Dependencies

Make sure you have the following installed:

Node.js (LTS version recommended)
Java JDK 11+ (For Android development)
Android Studio (With SDK and Emulator setup)

2️⃣ Generate a Signed APK

Run the following commands in your project root directory:


      cd android
      ./gradlew assembleRelease  # For Mac/Linux
      gradlew assembleRelease    # For Windows

After successful build, the APK will be available at:

android/app/build/outputs/apk/release/app-release.apk

3️⃣ Install APK on Your Device

To install the generated APK on a connected device, use:


      adb install android/app/build/outputs/apk/release/app-release.apk

4️⃣ Generating Signed APK for Play Store

To publish your app on the Play Store, you need to generate a signed APK.

Follow these steps:

Open android/app and run:

keytool -genkeypair -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias

Move my-release-key.jks to android/app/ folder.
Update android/gradle.properties with your keystore details.
Build the signed APK using:

cd android && ./gradlew assembleRelease

📌 Additional Resources

For more details, visit: React Native Official Docs

Support

Please appreciate that you have purchased a very affordable product and you have not paid for a full-time web design agency. We do not offer Free Support on code only purchases. Paid Support is also available and is 100% optional and we provide it for your convenience if you want to buy Paid Support please contact us via Whatsapp.

Whatsapp Us

We aim to respond to your whatsapp message within 8 hours.

Note: While we provide the best possible support, it is available only to verified buyers and covers issues related to our React Native template such as bugs and errors. Custom modifications or third-party library integrations are not included in the support.

Enjoying the Template? Rate Us!

Your feedback means a lot to us! If you love the template, please leave a review.
Go to your Themeforest Profile > Downloads Tab > Select our React Native template > Click on Rate & Review.
Thank you for your support!

Copyright & license

Code released under the Single License use. Violation or Infringement of the licence and copyright may lead to disputes. For multiple uses, please buy additional copies of the software.

For more information about copyright and license check V1 Technologies.