App Configuration

  1. Configuring App.json file
  2. Configuring package.json file
  3. Configuring Colors
  4. Configuring Assets and other things
  5. Configuring backend related information
  6. App Translation / Changing Language
  7. Map and Location Settings
  8. Admob (Google Ads) Settings
  9. Social Login
    i. Facebook
    ii. Google
    iii. Apple

Configuring App.json file

  1. This file is located in the project root directory.
  2. Change the name property to your desired app name.
  3. Similarly change slug, version, bundleIdentifier for ios and package for android.
  4. [important] For android, the versionCode property will be 1 for the first time you’re uploading it to Play store. After that for every new version release, the versionCode will increase by 1. (I.e., for version 1.0.1 versionCode will be 1. And for version 1.0.2 version code will be 2).
  5. Change splash “backgroundColor” property as needed. (This is the screen you see before the app opens).
  6. Copy and paste your Google maps API Key in “googleMapsApiKey” for iOS and “apiKey” for android. (If you use map feature this step is very important)

Configuring package and package lock json files

  1. These files are located in the root directory.
  2. Open it and change the name and version property as required. The name will be lowercase, space less string.

Configuring Colors

  1. Navigate to variables folder.
  2. Open color.js
  3. Here you can find and change all the colors used in this app.
  4. We recommend not to change all the colors except the primary color, primary_soft and bg_primary.

Configuring Assets and other things

Step 1: You will find all the assets and animations in the assets folder located in the root directory.
Step 2: If you choose to change any image or icon, just replace the existing file with the same name, same resolution and size.
Step 3: To change the header logo, replace the logo_header.png. But keep the name and size the same.


Step 4: Similarly, you can change the other assets (icon, splash, logo etc.)
Step 5: If you’re building an iOS app, please keep in mind that if your app icon has a transparent background, it might give an error while building. If you face this kind of error just go to the asset folder and replace icon.png file with another icon file which doesn’t have a transparent background.

(This Link might help to create proper assets)

Step 6: Go to the app/services folder and open appName.js file and change your AppName property.

Configuring backend related information

  1. Navigate to api folder and open the client.js file.
  2. Replace the values of the domain and apiKey property. (How to get API key)
  3. You can also change the api request timeout. By default, it is set to 30 seconds.

Do not edit any other information in this file.

Configuring Pagination information across app

  1. Navigate to app/pagination/paginationData.js file.
  2. Here you’ll get all the pagination data for this app. Only edit the per_page property if needed. per_page property defines item per page while scrolling through a list of items.




App Translation / Changing App Language

  1. First of all, go to this link. See the available languages there and find the language code for your preferred language. e.g. ( For English (US) code is “en”, for French code is “fr”, for Russian code is “ru”).
  2. To change language in app, Go to Language folder and locate en.json file.
  3. Duplicate the en.json file and rename it with your preferred language code. e.g. ( For English (US) filename is “en.json”, for French filename is “fr.json”, for Russian filename is “ru.json”).
  4. Now open the new language file and replace all the english texts with translated texts.
  5. Now stringPicker.js file from the same folder. Import the new language file here and change the value of defaultLng to your preferred language code . ( See video )

Map and Location related settings

  1. By default, the map feature is disabled from backend. To enable this feature please follow the instructions from this Link.
    ** Please keep in mind that google might charge you for using this feature. And your google map api key must not has any restrictions.
  2. By default, the location type is set to local from backend. To change location type to google please follow this link.
  3. If you use map feature please set your Google Map Api key in app.json file. (This step is very important.)


Admob (Google Ads) Settings

  1. Go to https://apps.admob.com/ and signup with your existing gmail if you don’t have admob account already.
  2. Now from the left menu click on Apps > ADD APP
  3. Now select platform (Android/iOS) . Create separate apps for Android and iOS.

4. Select no if your app is not on app store or playstore and Press ADD APP.
If your app is already in any of the stores, select Yes, the app is listed on a supported app store and in the next step enter your package / bundle identifier and click search. Your app will be shown in the list . Click ADD button next to your app. And finally click ADD APP button.
5. Now from the left menu click Ad units > Get Started > Banner

Click on Select

6. Now type your ad unit name and press Create ad unit and press Done.
7. From left menu click on Ad units and click on your ad unit name you’ll see something like the following image

8. Now click Implementation instructions and you’ll see like following image

Step : 8

9. Copy the code which is beside mark A (ca-app-pub-6377007785042974~8598264183)
10. Open app.json paste the code in expo>android>config>googleMobileAdsAppId. For iOS, in expo>ios>config>googleMobileAdsAppId

11. Now copy the code beside B marking from step 8
12. Open App>services>adMobConfig.js . Paste the code in admobConfig>admobBannerId>android oradmobConfig>admobBannerId>ios .
13. Finally set the value of admobConfig>admobEnabled to true.

Common issue: After setting everything if you get any error from admob, Please check the error codes here





Social Login

Note: If you’re building an iOS app with social login enabled, you must add sign in with apple functionality. Otherwise apple will reject your app from app store. We’ve added this functionality since version 1.11.1

Facebook Login
  1. Go to https://developers.facebook.com/ and login with your facebook id.
  2. From the top menu click on “My Apps”.
  3. Now Click “Create App” > “Consumer” > “Continue” .
  4. Now give a display name for your app & press “Create App”. Facebook might ask for password here.
  5. After providing facebook password, your app will be crated and you’ll be taken to the dashboard.
  6. Now, from the side bar menu click “Settings” > “Basic” .
  7. Scroll to bottom and click “+ Add Platform” and select [ios] or [Android].

    Android
    a. Provide Google play package name. You’ll get it from your app.json file under “android”>”package”. It’ll look like com.appname.domain.
    b. Under the field “Key Hashes” field, first paste this value (without quotes) “rRW++LUjmZZ+58EbN5DVhGAnkX4=”. This hash is for expo go environment. This is only for development and testing the app in expo go. When you publish the app in play store, you can remove this hash.
    c. Remember, you must build your app once before performing this step. Now go to your project folder and run this command expo fetch:android:hashes . This will give you some credentials. Copy the value of “Facebook Key Hash” and paste it under “Key Hashes” field from previous step.
    d. **Important Step** The key hashes you’ve provide in step b & c are for development stage only. When you publish your app in play store, these hash will not work. To get new hash , go to this link https://play.google.com/console/. Login to your play console account and select your published app. On the next page select “App Integrity” under “Setup” option from the sidebar. You’ll see something like the image below. Copy the “SHA-1 certificate fingerprint” under “App signing key certificate”. Go to this link and paste the copied hex key and press “convert”. You’ll get output in base64 format. Now copy this base64 value and paste it in the field “Key Hashes” and remove the previous values.
  • iOS
    a. Provide “Bundle ID” . You’ll get this from app.json file under “ios” > “bundleidentifier” . It’ll look like com.appname.domain.

8. Now scroll to top and provide Privacy policy URL and User Data Deletion URL.
9. Now press “Save Changes” .
10. Go to dashboard and Copy your App’s display name, App ID and paste these in your app.json file like the below image.

11. Now go to this link https://developers.facebook.com/docs/facebook-login/android and search for “fb_login_protocol_scheme”. Copy & paste the value in your app.json file under “facebookScheme” like the above image.
12. Open “app” > “services” > “socialLoginConfig.js”.
13. Under socialConfig, change the value of “enabled” from “false” to “true”.(see below image)
14. Add the value “facebook” under “socialPlatforms” array (e.g. “socialPlatforms” : [ ”facebook” ] ). (see below image)
15. Now again copy & paste your app id and display name here like the below image.




Google Login
  1. Open this link https://console.cloud.google.com/apis/credentials , login with your google account and agree to the terms and press “AGREE AND CONTINUE”.
  2. Now press “CREATE PROJECT”. Give it a name and press “CREATE”.
  3. Now press “+ CREATE CREDENTIALS” and select “OAuth Client ID”. It’ll ask to configure consent screen. Go on and press “CONFIGURE CONSENT SCREEN”. In the next screen press “CREATE”.
  4. Provide your app name , user support email, developer’s email and press “SAVE AND CONTINUE” for the rest of the screens until you see the summary screen.
  5. Now go back to Dashboard > Click “Credentials” > Click “+ CREATE CREDENTIALS” > Select “OAuth Client ID”.
  6. You have to create Two or three OAuth Client ID depending on your need. One for expo Go client, one for Android and one for iOS.

    For Expo Go
    Application Type: Web Application
    Give it a name (e.g. “Expo Go Proxy”).
    Authorized JavaScript origins: https://auth.expo.io
    Authorized redirect URIs: https://auth.expo.io/@your-expo-username/your-project-slug

    For iOS
    Application Type: iOS Application
    Give it a name (e.g. “iOS App”).
    Bundle ID: Must match the value of ios > bundleIdentifier in your app.json. (e.g. com.appname.domain)

    For Android
    Application Type: Android Application
    Give it a name (e.g. “Android App”).
    Package name: Must match the value of android > package in your app.json.(e.g. com.appname.domain)
    Signing-certificate fingerprint: To get this, you must build your android app once. After a successful android build, login to your expo account. From the side bar , under the projects menu, click on your project/app name. Now from the sidebar click on Credentials. You’ll se Build Credentials for Android (Classic). Copy the value of “SHA-1 Certificate Fingerprint” and paste it under Signing-certificate fingerprint.
  7. After creating the OAuth Client IDs, Go to Dashboard > Credentials. You’ll see all the OAuth Client ID’s.

8. Now in your project folder open “app” > “services” > “socialLoginConfig.js”.
9. Under socialConfig, change the value of “enabled” from “false” to “true”.(see below image)
10. Add the value “google” under “socialPlatforms” array (e.g. “socialPlatforms” : [ “facebook”, ”google” ] ). (see below image)
11. Copy and paste the client Ids to their respective fields like the below image.



Apple Login
  1. Log into the Apple Developer Console, go to “Certificates, Identifiers, & Profiles” and then “Identifiers” (Perform this steps only after you’ve run expo buil:ios once successfully).
  2. In the list of identifiers, click on the one corresponding to your app. Enable the “Sign In with Apple” capability by marking the checkbox, now click “Edit” right next to “Sign In with Apple”, and choose the “Enable as a primary App ID” option. Save the new configuration. Again press save from the top right corner.
  3. Next, go to the “Keys” page and register a new key. Add the “Sign In with Apple” capability, and make sure to choose the correct bundle ID on the configuration screen.
  4. Finally, when you want to make a standalone build t, run expo build:ios --clear-provisioning-profile --revoke-credentials so that your provisioning profile will be regenerated with the new entitlement.




Activating Rest Api from backend

This is a mandatory step in order to get a working app.  To enable Rest Api and get the API key please follow this link.




Misc. (Backend)

  1. Please make sure that you use the latest version of our Theme and Plugin to get a fully functional mobile app.
  2. Please make sure your .htaccess file does not include duplicate codes and see the below attachment. Make sure there’s no duplicate line inside mod_rewrite.c segment.