Build Application with react-native code

We are using React Native to build application for both IOS and Android.

1: Download Code

• Download theme from themefore then unzip, you will see APP folder includes.

• This is React Native Code, you can use it to customize code like add logo, change words...

  • You can find all files in "Code" folder.

  • instruction_build_app.rtf: This is instruction file to build code

2: Build Application

We use React Native for creating app. You can follow instruction for making your app.

- Step 1: Setting up the development environment

https://reactnative.dev/docs/environment-setup

- Step 2: Create Project
+ Open terminal 
+ cd to Root folder that included project
+ Run code in terminal:
npx react-native init testmeup

- Step 3: Run project
+ Go to project by command:
cd testmeup
Run in IOS: npx react-native run-ios
Run in Android: npx react-native run-android
+ The project setup correctly if you see “Welcome To React Native” screen. If you can’t see this screen, please check again step 1 and create again project to test.


- Step 4: Install dependencies

+ npm install @react-native-async-storage/async-storage
+ npm install react-native-barcode-mask
+ npm install react-native-camera
+ npm install react-native-gesture-handler
+ npm install @react-navigation/native
+ npm install @react-navigation/native-stack
+ npm i deprecated-react-native-prop-types
+ npm install react-native-screens
+ npm install react-native-safe-area-context

- Step 5: Fix for React Native Camera

- Develop environment in MacOs - IOS

- Go to testmeup/ios/testmeup/Info.plist and add bellow code. Note insert before </dict>

	<key>NSCameraUsageDescription</key>
    <string>${PRODUCT_NAME} Camera Usage</string>

    <key>NSBluetoothPeripheralUsageDescription</key>
    <string>${PRODUCT_NAME} BluetoothPeripheral</string>

    <key>NSCalendarsUsageDescription</key>
    <string>${PRODUCT_NAME} Calendar Usage</string>

    <key>NSContactsUsageDescription</key>
    <string>${PRODUCT_NAME} Contact fetch</string>

    <key>NSHealthShareUsageDescription</key>
    <string>${PRODUCT_NAME} Health Description</string>

    <key>NSHealthUpdateUsageDescription</key>
    <string>${PRODUCT_NAME} Health Updates</string>

    <key>NSHomeKitUsageDescription</key>
    <string>${PRODUCT_NAME} HomeKit Usage</string>

    <key>NSLocationAlwaysUsageDescription</key>
    <string>${PRODUCT_NAME} Use location always</string>

    <key>NSLocationUsageDescription</key>
    <string>${PRODUCT_NAME} Location Updates</string>

    <key>NSLocationWhenInUseUsageDescription</key>
    <string>${PRODUCT_NAME} WhenInUse Location</string>

    <key>NSAppleMusicUsageDescription</key>
    <string>${PRODUCT_NAME} Music Usage</string>

    <key>NSMicrophoneUsageDescription</key>
    <string>${PRODUCT_NAME} Microphone Usage</string>

    <key>NSMotionUsageDescription</key>
    <string>${PRODUCT_NAME} Motion Usage</string>

    <key>kTCCServiceMediaLibrary</key>
    <string>${PRODUCT_NAME} MediaLibrary Usage</string>

    <key>NSPhotoLibraryUsageDescription</key>
    <string>${PRODUCT_NAME} PhotoLibrary Usage</string>

    <key>NSRemindersUsageDescription</key>
    <string>${PRODUCT_NAME} Reminder Usage</string>

    <key>NSSiriUsageDescription</key>
    <string>${PRODUCT_NAME} Siri Usage</string>

    <key>NSSpeechRecognitionUsageDescription</key>
    <string>${PRODUCT_NAME} Speech Recognition Usage</string>

    <key>NSVideoSubscriberAccountUsageDescription</key>
    <string>${PRODUCT_NAME} Video Subscribe Usage</string>

- Install pod by:
+ cd ios
+ pod install


- Develop environment in MacOs - Android

+ Install Android Studio 

+ Add permissions to your app android/app/src/main/AndroidManifest.xml file:

	<!-- Required -->
    <uses-permission android:name="android.permission.CAMERA" />

    <!-- Include this only if you are planning to use the camera roll -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <!-- Include this only if you are planning to use the microphone for video recording -->
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>


+ Insert the following lines in android/app/build.gradle:
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

Note: You have to one Android Studio before run above command also choose simulator output in Android Studio.


Step 6: Copy App.tsx and ‘src’ folder from ‘Code’ folder in package to ‘testmeup’ folder

- Run app in IOS
+ cd root/testmeup
+ npx react-native run-ios

- Run app in Android
+ cd root/testmeup
+ npx react-native run-android

Step 7: For first login app:
Please login app then logout and login again.