“Workreap - React Native Mobile APP” Documentation by “Amentotech”

“Workreap - React Native APP”

Created: 22/10/2019
By: Amentotech
Email: help.amentotech@gmail.com

Thank you for purchasing our mobile APP. 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. Start

Download - top

Upon downloading the zip package file from Codecanyon, you'll have all files you need inside. Zip package contains the following files...

Files in Main-files.zip
Please make sure you have installed Workreap APP API plugin, which is builtin in Workreap Theme

  • workreap_app.zip - App Source code
  • documentation.zip folder (It contains documentation for App)

You will have to install Workreap theme on your WordPress first then

  1. if you have already installed these then its ok otherwise install these:
    • brew install yarn
    • brew install node
    • brew install watchman
    • brew tap AdoptOpenJDK/openjdk
    • brew cask install adoptopenjdk8
  2. Install workreap_api.zip
  3. Install Node Js server
  4. Setup Visual studio code and project
  5. Run command npm install in Terminal
  6. Update API Base URL
  7. Create Build

For support: you can send email at help.amentotech@gmail.com

To use this app you must have visual studio code already installed. For more information regarding installing the visual studio code, please visit

Visual Studio Code

After Installing visual studio code, simply unzip app source code .zip file and open source code in visual studio code.

Install plugin given in .zip in already setuped Workreap theme.

You don’t need to download those plugins yourself.

Click on Begin installing plugins and Simply select plugin and install it. Then activate the plugin:

elegant icons

App Configuration - top

Configure app for your already working Workreap theme

At this point theme, website running Workreap theme should be ready with given plugin in download package.

Follow the following steps to configure app with your theme.

  1. Step 1. Open Project in visual studio code.
  2. Step 2. Open Constant file: src/constant.js
    3. elegant icons
  3. Step 2. Open File file: index.android.bundle
    4. elegant icons
  4. Step 3.After Configure every thing for Andorid run this command in terminal
    react-native run-andorid
  5. Step 4. Download Xcode from App store to test the app on ios device. open ios/yorapp.xcworkSpace file in Xcode and run the project on device
    6. elegant icons elegant icons
  6. Please run commands:
    To install node modules:
    1- npm install

    To install ios pod files:
    2- cd ios
    3- pod install

    To clear cache of android:
    4- cd android
    5- gradlew clean (for window) || bash gradlew clean (for Macbook)

    To test app on your device:
    6- react-native run-android

  7. Setting ANDROID_HOME enviromental variable on Windows
    Where the Android-SDK is installed depends on how you installed it.
    You have to open Envirnment Verable and add Android Sdk path there
    elegant icons elegant icons

  8. Setting ANDROID_HOME enviromental variable on Mac OS X
    Where the Android-SDK is installed depends on how you installed it.

    If you downloaded the SDK through their website and then dragged/dropped the Application to your Applications folder, it's most likely here:

    /Applications/ADT/sdk (as it is in your case).
    If you installed the SDK using Homebrew (brew cask install android-sdk), then it's located here:
    /usr/local/Caskroom/android-sdk/{YOUR_SDK_VERSION_NUMBER}
    If the SDK was installed automatically as part of Android Studio then it's located here:
    /Users/{YOUR_USER_NAME}/Library/Android/sdk
    Once you know the location, open a terminal window and enter the following (changing out the path to the SDK to be however you installed it):

    export ANDROID_HOME={YOUR_PATH}
    Once you have this set, you need to add this to the PATH environment variable:
    export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools Lastly apply these changes by re-sourcing .bash_profile:
    source ~/.bash_profile
    Type - echo $ANDROID_HOME to check if the home is set.
    echo $ANDROID_HOME

Congratulations, your app is now working with your website.

General Settings - top

  1. Change App Name for Android

    2. To change app name, open android/app/src/main/values/string.xml file and replace app_name key value.

    elegant icons
  2. Change App Name for Ios

    3. To change app name, open Xcode under info section

    elegant icons
  3. Change Splash Screen

    4. To change spalsh screen image, replace src/images/splashbackground.jpg image file in drawable folder.

    elegant icons
  4. Change App Icon for Android

    5. To change app icon, go to android/app/src/main/res/mipmap and replace all mipmap images with your logo

    elegant icons
  5. Change App Icon for Ios

    6. To change the application icon for the iOS copy all the content of AppIcon.appiconset from the ios>AppIcon.appiconset directory of downloaded makeappicon zip. After copying all the icons from the downloaded icons paste the same in your projects AppIcon.appiconset directory (YourProject -> ios -> YourProject -> Images.xcassets -> AppIcon.appiconset) if it ask to replace the json then click yes to replace.

    elegant icons
  6. change_packagename for Android

    7. According to this This link
    you can run this command from the start
    react-native init yourProject -package "com.example.app"
    But if you already generated your app via
    react-native init yourProject
    You can modify app name in file
    android/app/src/main/res/values/strings.xml
    Then you can modify package name in files
    android/app/src/main/java/com/reactNativeSampleApp/MainActivity.java
    android/app/src/main/java/com/reactNativeSampleApp/MainApplication.java
    android/app/src/main/AndroidManifest.xml ( optional as per my experience )
    android/app/build.gradle
    Lastly, run the following commands (from inside the app's android/ directory)
    ./gradlew clean
    ./gradlew assembleRelease

    elegant icons

Styling

You can add your change color in constant.js file

elegant icons

Release Build - top

For Android:
You can generate build for Android run this command first
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
then in terminal run this comamnd
react-native run-android --variant=release
you can find release apk file from android/src/main folder in project

For Ios:
You have to make some changes in Xcode. First you need dto purchase Apple Developer Account then after it go to your Xcode product/scheme/edit scheme and change Build Configration form Debug to release.

elegant icons