( *** VIDEO *** )

Create a Database Project in Firebase (Firestore and RealtimeDB).

Create an Authenticated user in Firebase.

Import Demo Data

Connect to Cloud Admin Panel

Create a Mobile app

(*** VIDEO *** )

Install Required software ( Node, npm, Expo, git )

Install NPM Dependencies ( npm install )

Connect to Firebase DB 

Run the app ( expo start )

Setup your environment

You will need to setup your computer to prepare for configuring the UNIEXPO React Native App.

You will need Node + NPM to build the phone apps, GIT for version control, and Expo for  development testing.

1. Install node and npm: Download it from here.
2. Install GIT: Download it from here.
3. Install Expo: Follow instructions for the local development tool and mobile client.

To verify your installation run

node --version
npm --version
git --version

Extract and initialize the uniexpo code base.

1. Download and unzip the universal-app-platform.zip file from CodeCanyon:Envato into your documents or development folder.
2. Unzip the uniexpo zip file found in  universal-app-platform\UNIVERSAL APP\Mobile app 
3. The resulting folder dimovdaniel-uniexpoapp-8d6ec940704b contains a folder named dimovdaniel-uniexpoapp-8d6ec940704b, move it to the Mobile app folder and rename it   uniexpo  .
4. Open a terminal / command line in the uniexpo folder and run   npm install 
      This will take 5+ minutes.
      You can complete steps 5+6 before step 4 is complete. 
5. Configure your app name and icon in uniexpo/app.json ( how to )
6. Configure your Firebase credentials in uniexpo/config.js ( how to )

Preview your app.

Open your project in the terminal. 

Run

expo start

This will open a new web page in your browser.

From there you can preview the app on the simulator, using the buttons

* Run on Android device/emulator

* Run on iOS simulator

This will open the app on android or ios simulator. 

In Firebase we store information about the app, like colors, navigation etc..

And in Firestore is where our actual data is. Like menu content, categories, orders etc..

We use Firebase because it has an import function. 

Let's get started. Create an account in Firebase with your google account. 

Create Firebase Project. 

Then go in Project settings, and click on "Add Firebase to your web app"

Then copy the config string. 

Then in your downloaded project, in the root folder, there is "config.js" file. At start replace the config for firebase there.

Your mobile app is set up now and connected to Firebase.

Create the real time database

Go to Database and then click on the button called "Create database"

After clicking on the button it should appear a window that will ask you about security rules. Click on the Start in test mode and after that click Enable.

With rules configured like this everyone can read and write in your database. This is ok for test and development purposes.

But for production, this is a good starting point. This will allow edit and write to all registered users. 

{
  "rules": {
    ".read": true,
     ".write": "auth !== null"
  }
} 

Create Firestore Database

        Go in Databases ->Cloud Firestore

Then, a pop up will appear. 

For now, use Start in test mode. 

This admin panel is React based admin panel and you can run it locally, deploy to your own hosting or install it in Firebase.

We have separate documentation for it. 

You have to follow just few of the step provided in our documentation. 

So let't get started

First, in the folder that you get from CodeCanyon there is folder "DemoData".

Inside that folder you will find "app.js" file.

Extract the zip file from "AdminPanel" and replace the file "src/config/app.js" with the "app.js" from the "DemoData" folder.

Next, in the same folder you will find the file "schema.json". Move that file to the "src/config" folder of your admin panel, replacing the existing file there.

In the same folder you will find the file "firestoreschema.js". Move that file to the "src/config" folder of your admin panel, replacing the existing file there.

Head over to FireAdmin Docs

Follow the following steps only

Installation - How to install FireAdmin Panle

Connect to Firebase - Connect the admin to the Firebase database you did before 

After you have finished with thous 2 steps, in the folder that you get from CodeCanyon there is folder "DemoData". 

There you will find file "demodata.json".

Go in your Firebase Console 

Open your project and go in "Database", and select "Realtime Database"

On the "More" icon on left, click on "Import JSON".

Select the "demodata.json" file. This will insert the demo data (in fact only the design for your app )inside your firebase.

That's it. The admin panel is set up. 

You can view videos of the admin panel in action to see how it works.

Next, you can publish the admin panel. 

To do that follow this guide.

Bellow you will find some configurations for the PayPal and SendGrid email notify.

PayPal

In order to accept payment in the app, you will need to have merchant paypal account. 

SendGrid

Sign up for free SendGrid account. With this in place, you will receive an email when new order is place. 

You can use Smooch email, and have thous orders received in Slack 

AdMob

Sign up on AdMob. In the navigation menu you have Apps, click on the Apps and then click on ADD APP. Enter your app name and choose the platform(Android or iOS). And then click on NEXT: Create Ad Unit. Then you have to create banner id or interstitial id. Now go into your firebase console open your project and in the config you will add 4 variables:

- showBannerAds - set it to true if you want to have bannerAds in your app

- bannerID - insert your given banner id from AdMob

- showinterstitialAds - set it to true if you want to have interstitialAds in your app

- interstitialID -insert your given interstitial id from AdMob

Look at the image below

Go into the project and go in App/Images folder and replace the old logo.png, navlogo.png and the sidelogo.png with your logo.

Color change

-- Content goes here

The shopping functionality is available in the following apps

1. Restaurant app
2. Shopping app
3. Events app

And each of them follow the similar / same data structure of the products/items/tickets and their prices. 

We have implemented / followed the Shopify variants and options system. 

Learn about it here: https://help.shopify.com/manual/products/variants

Each product has Options and Variant. 

Options

Options are array of options, and each options has name and array of values. 

So, lets imagine we are selling sun glasses. 

The sunglasses can have the following options: color, UVprotection, lensWidth. 

And each of them can have the following values

color: red, black, white, green

uv-protection: yes, no

lensWidth: 66, 70

So with the things declared above our options in JSON format will look like this

"options":{
        "option1":{
          "name":"Color",
          "values":["Red","White","Green"]
        },
        "option2":{
          "name":"UV-Protection",
          "values":["Yes","No"]
        },
        "option3":{
          "name":"lensWidth",
          "values":["66","70"]
        }
      },

if this is general schema for all your product you can put it in "src/config/firestoreschema.js" - but it is not required since you can change the default options there. 

So when new product is inserted through the admin panel, you will have the options there. And you can modify them to suit your needs. 

Each product should have the options element 

When you click on options, and some of the options, you get the details of single option, and you can modify existing or add new values.

Variants

In the above example we had the following options for the sunglasses product

color: red, black, white, green

uv-protection: yes, no

lensWidth: 66, 70

With this options we can build 4 * 2 * 2 = 16 variants of product

Example

1.  Red, With UV Protection, 66 mm - We sell it for 20$
2.  Red, No UV Protection, 66 mm - We sell it for 22$
3.  Green, with UV Protection, 60 mm - We sell it for 40$

etc...

So we need to define prices for each of the variants we have ( not all variants are required - at leas one is necessary ) 

Based on the examples above our JSON structure for single variant will looks like this

{
      "option1":"Red",
      "option2":"Yes",
      "option3":"66",
      "price":20,
      "title":"Red, With UV Protection, 66mm"
    }

But thanks to the Firebase Admin Panel, each product will came with 1 variant inside by default. You job will be to add more and modify existing. 

Each product will have "Variants" colleciton

And you can add / modify / delete variants. 

Summary 

We have taken what we think is good and extendable model. You can have as much as you want options and variants so the solution can work for every situation. 

And this is how the options / variants and their prices are displayed on the app side

1. Shop app
2. Restaurant app

By default the orders will be received on your email and and saved in Firestore DB that you can preview in your Firebase Admin panel. 

So the email will be more like a notification that you have received an order, and you will manage the order in your Admin. 

Here is how the order will look on the admin site. In the delivery element, you can view the delivery details. You can change the order status and preview all the ordered items. 

First of all if you want to have login and signup screens in your app, you have to set it up first in your firebase realtime database.

In meta -> config you have to add loginRequired: true, just look at the screenshot below.

Facebook and Google login

After the login setup you can add in your app facebook and google+ login. This option you can set up from the downloaded project, just open and you will find config.js. Around line 27 you will find exports.loginSetup, there you can customize your welcome text, facebook and google login.

Set up facebook login

First you have to turn facebookLogin:true, and after that you should make your facebook app id.

 - https://developers.facebook.com/apps create your facebook app.

- When the app is created then go to settings and scroll to the bottom, now you will see add platform button. Just add iOS and Android.

- For iOS in the BundleID just add host.exp.Exponent, look at the picture below.

- For Android in the Key Hashes just add rRW++LUjmZZ+58EbN5DVhGAnkX4= , look at the picture below.

- On the top of https://developers.facebook.com/apps you should see your APP ID, copy the id and replace the current facebookID in config.js in the downloaded project with your APP ID.

Set up Google login

First you have to turn googleLogin:true, and after that you should make your google ids.

Get an app set up on the Google Developer Console

• Go to the Credentials Page
  
• Create an app for your project if you haven't already.
  
• Once that's done, click "Create Credentials" and then "OAuth client ID." You will be prompted to set the product name on the consent screen, go ahead and do that.
  

Create an iOS OAuth Client ID

• Select "iOS Application" as the Application Type. Give it a name if you want (e.g. "iOS Development").
  
• Use host.exp.exponent as the bundle identifier.
  
• Click "Create"
  
• You will now see a modal with the client ID.
  

            - The client ID that in iosClientId, copy and replace it into config.js file. Look at the picture below.

Create an Android OAuth Client ID

• Select "Android Application" as the Application Type. Give it a name if you want (maybe "Android Development").
• Run openssl rand -base64 32 | openssl sha1 -c in your terminal, it will output a string that looks like A1:B2:C3 but longer. Copy the output to your clipboard.
  
• Paste the output from the previous step into the "Signing-certificate fingerprint" text field.
  
• Use host.exp.exponent as the "Package name".
  
• Click "Create"
  
• You will now see a modal with the Client ID

            - The client ID that is in androidClientId, copy the id and replace it into config.js file. Look at the picture below.

Profile screen style

After that, there are two types of profile screens, you will decided which one fits more to your app design.

This is ProfileOption1

This is ProfileOption2

 - When you will decided which one you will use please open again config.js file, around line 41 you will see exports.profileScreen='ProfileOption2', so choose which one you like more.

How to add allowed users

If you want to limit which accounts will have the access to use the application all you have to do is to follow this two simple steps.

Step 1. All you have to do is to add array in your meta -> config called allowedUsers. The format should be like the picture below.

Step 2. Add field in the same place ( meta-> config) that must be called userVarification and set this field to true, just like in the picture below.

In app.json instead of 

"extra": {
      "firebaseMetaPath": "/meta"
    },

Change the firebaseMetaPath to "/apps"

"extra": {
      "firebaseMetaPath": "/apps"
    },

Step 2. Import all apps in /apps

In your filrebase real-time database create new node apps and create some element inside, just to create the node, later will be overwritten. 

Now click on "apps" so you path in firebase is there. 

In the Demo Data folder, you will find  another folder All

Inside there is apps.json

Import that files in Firebase. 

Step 3. Let uni expo know that this is a preview app

In config.js at the end, there is

exports.isPreview=false;

Make it true

Now run your app

The easier way to do this is by doing drag&drop in React App Builder.

But in App platform, we don't have that drag&drop functionality.

So the easiest way to do that, that we can think of is the following. 

1. Do Step 2 from the guide.

2. Find the app and component that you need, go inside it. and export it.  This will download a JSON file.

Ex. I want to use the map section from the conference app.

3. In your app navigation menus path in firebase ( probably meta/navigation/menus ) manually add the next item in the array, just to create the value.

4. Go inside the newly created item. And import the exported component. This will import the component into your app. 

5. This where all steps to import the components into the app. But now you should be able to edit them ( their data ) in the admin panel. The easiest way to declare them is to explore how the admin panel for the component you copied is done.
For example, I copied the "Location" component from the conference app. 
I need to open the app.js file for the demo/conference app and copy the specific item from the navigations.

Next. I need to paste this navigation item in my admin panel src/config/app.js/-->navigation array

Besides this, I need to copy the collection firestore schema.

And place it into my firestoreschema.js. 

Check this error

https://github.com/firebase/firebase-js-sdk/issues/283

In "App/Datapoint/Firebase.js" add the following code on start

const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body) {
if (body === '') {
    originalSend.call(this);
} else {
    originalSend.call(this, body);
};

The category list appears just like lines, no content is displayed.

Reason

Removed style "list" replaced with "grid1"

Solution

This is the bug in version 5.0.0 and older. In the new versions, this is fixed

Solution 1 ( Recommended )

In Categories.js around line 37 add the following

if(theProps.data.categorySetup&&theProps.data.categorySetup.category_style=="list"){
    theProps.data.categorySetup.category_style="grid1";
}

Solution 2

In Firebase, in your navigation setup in "categorySetup/category_style", instead of "list" enter "grid1";

2018-04-19  

Summary

In version 5.0.0 we have added the new Night Club app.

To update from version 4.0.0 just replace the updated files listed below

Updates

• NEW APP: Night Club app
• Feature: Window design change
• Feature: Tab Bar change
• Feature: Category selector in Master View
• Feature: Gallery screen

Updated files

ver 4.0.0

2018-03-21

Summary

In version 4.0.0 we have added the new Events app.

To update from version 3.0.0 just replace the updated files listed below

Updates

• NEW APP: Events Mobile app
• Feature: Expo push notifications
• Feature: Checkout on item details
• Feature: Map - show items on Map
• Feature: Better order screen, with details window
• Feature: Configurable infoboxes

Updated files

"javascript.implicitProjectConfig.experimentalDecorators": true

Step 1.- Open Settings

Step 2. Open settings.json

Step 3. Add your settings

Let me know if this helps.

We would suggest to always use the latest Node and NPM version

Updating Node

The easiest way to update node is to install "n" -> a node version control. 

Install it by running npm install n -g

Then run n latest 

Updating NPM

npm install -g npm

Then run

node -v

npm -v 

Send this version with any support request 

Common Problem #1 - ERR! Tried to download(404): https://fsevents-binaries

Problem 

npm install firebase fails due to grpc

Solution

Use the latest version from firebase in the package.json

1. Go on the firebase NPM package page 

    https://www.npmjs.com/package/firebase

2. There you will find the latest version of this package

3. Open package.json file 

4. Locate the "firebase" string in the dependencies object

5. Replace the value with the latest version that you found.

6. Remove the ^ symobl

7. Run npm install

Note: This fix may produce another error, related to firestore datetime. 

Solution: https://mobidonia.freshdesk.com/support/solutions/articles/35000089514-firestore-date-object-behaviours-

Problem

Firestore now changed they way date object are fetched. 

And you may get an error screen like this one

Solution

In App/Datapoints/Firebase.js at the end of the file, before export default firebase add this

/**
 *  Fix for latest version on Firestore
 */
const firestore=firebase.firestore();
const settings={
 timestampsInSnapshots:true
}
firestore.settings(settings);
//END FIX 

It takes around 5 min to learn the process here.

https://docs.expo.io/versions/latest/distribution

Follow the guide step by step.

Important

In order the MAP to work in your standalone Android app, you need to follow this guide

https://docs.expo.io/versions/latest/sdk/map-view#if-you-already-have-not-configured-google

These three items are required in each and single menu item in the app. 

• Icon - is the icon of the menu
  
• Name - is the name of the section
• sectionType - the type of section

          -  "master-detail" empty or null - if you are creating master view detail

          -  "profile" - Section when users can register or view their profile 

          - "listOfUsers" - To show the list of registered users

          - "cart" - If you are creating some kind of application that should have a payment section

          - "orders" - To show the list of orders

          -  "web" - If you want to show some website or to show some HTML code

          - "map" - If you are creation application that has a map to show some locations (ex: night club location,             event location)

          -  "notifications" - To show the list of notifications

          -  "scanner" - If you want to have a ticket scanner app 

But it also has different scenarios, when categories are the first to show, then the master then the detail. Also, there are use cases when this section directly displays the details view.

Let's go step by step and explain all the configuration options.

We can separate the configuration options in 4 types

1. Basic configurations
2. Categories configurations - categorySetup
3. Master configuration - listingSetup
4. Details configurations - detailsSetup
5. Form configurations - form

{
 "category_first" : true,
 "icon" : "MdRestaurantMenu",
 "isRoot" : true,
 "listStyle" : "grid",
 "name" : "General",
 "goDirectlyInDetails":false,
 "objectIdToShow":"xxxxx",
 "categorySetup" : CONF_SETUP,
 "listingSetup" : CONF_SETUP,
 "detailsSetup" :  CONF_SETUP
}

Basic configurations

1. "category_first" - If you want to show category first - The value can be true or false.
2. "showCategoryFilter" - If you want to show 
3. "isRoot" - if this is the root section
4. "listStyle" - Choose how you want to display the categories (You have 3 choices: grid, grid2, list)
5. "goDirectlyInDetails" - If you have only one item to show and to display only the detail from that item, just set this value to true
6. "objectIdToShow" - The id from the firestore document that you want to be shown if goDirectlyInDetails is true
7. The standard elements (only icon and name ) 

Categories configurations 

 "categorySetup" : {
     "category_style" : "",
     "data_point" : "",
     "fields" : {
        "description" : "",
        "image" : "",
        "title" : ""
      }
 }

1. "category_style" - what kind of listing style you want to be listed your categories
2. "data_point" - the name of the collection that you want to get your data
3. "fields" -which fields have to be shown into the category container and from where to get that data  

Master configurations

"listingSetup" : {
    "collection_key" : "",
    "data_point" : "",
    "fields" : {
        "actionButton" : "",
        "numReview" : "",
        "rating" : "",
        "showRating" : true,
        "description" : "",
        "image" : "",
        "subtitle" : "",
        "subtitleFunctions" : "",
        "title" : ""
    }
}

1. "collection_key" - Key of the object in firestore that represents the collection this object appears in.
2.  "data_point" - from which collection to get the data
3. "hasFeatures" - if you want to display the newest items in the slider, turn this value to true
4. "listing_style" - Choose how you want to display the categories (You have 3 choices: grid, grid2, list)
5. "showCategoryFilter" - If you want to display a category tab, on the top below the navigation bar set this item to true
6.   "fields" : {

                    - "actionButton" - Text of the action button

                    - "description" - description of the item

                    - "numReview" : -field for the number of reviews,

                   - "rating" : - the rating,

                    - "showRating" : - set it to true or false,

                    - "image" - an image of the item

                    - "subtitle" - show the subtitle of the item

                     - "subtitleFunctions" - If the subtitle is kind of a price

                    - "title" - a title of the item

"detailsSetup" : {
    "actionButton" : "",
    "actionButtonWhenActionDone" : "",
    "cartCODAvailable" : true,
    "collections" : [ "", "" ],
    "descriptionTitle" : "",
    "isShopping" : true,
    "photosTitle" : "",
    "shareButton" : "",
    "showPhotos" : true,
    "callButton" : "Call",
    "chatButton" : "Chat with the owner",
    "deleteButton" : "Delete",
    "editButton" : "Edit",
    "reviewButton" : "Write a review",
    "fields" : {
        "description" : "",
        "rating" : "rating",
        "review" : "review",
        "shareLink" : "url",
        "descriptionFunctions" : ",",
        "image" : "",
        "photos" : "",
        "price" : "",
        "priceFunctions" : "",
        "shareLink" : "",
        "subPrice" : "",
        "subPriceFunctions" : "",
        "subtitle" : "",
        "subtitleFunctions" : "",
        "title" : "",
        "titleFunctions" : "",
        "video" : ""
    }
}

1. "actionButton" - Text of the action button
2. "actionButtonWhenActionDone" - The text of the action button when the action is done
3. "cartCODAvailable" - Do we have Cash On Delivery Available - in effect only if isShopify is false.
4. "collections" - What collections or how many variants
5. "callButton" : -Add this button if in the description of the item you want to have button for making a call,
6.  chatButton" : - This button if for chatting with the owner of the item,
7. "deleteButton" : If you are the owner of the item, then you will see the delete button for deleting the item,
8. "editButton" : If you are the owner of the item, then you will also see the edit button for editing the item,
9. "reviewButton" :  Button for leaving athe review of the item,
10. "descriptionTitle" : The title of the description section
11. "fields" : {

                 - "description" : "description",

                 - "descriptionFunctions" : ",",

                 - "image" : "image",

                 - "photos" : "photos",

                 - "price" : "price",

                 - "priceFunctions" : "round,toCurrency~USD,prepend~Price: ",

                 - "shareLink" : "link",

                 - "subPrice" : "price",

                - "subPriceFunctions" : "multiply{qty},round,toCurrency~USD,prepend~/per peace ,append~ for {qty} item/s.",

                - "subtitle" : "calories",

                - "subtitleFunctions" : "prepend~Calories: ,append~ kCal",

                - "title" : "title",

                - "titleFunctions" : "trim:40",

                - "video" : "video"

"formSetup" : [ {
        "key" : "title",
        "label" : "Title",
        "type" : "input"
      }, {
        "key" : "description",
        "label" : "Description",
        "type" : "textArea"
      }, {
        "key" : "phoneNumber",
        "label" : "Phone",
        "type" : "input"
      }, {
        "key" : "image",
        "label" : "Image",
        "type" : "image"
      }, {
        "key" : "eventLocation",
        "label" : "Location",
        "type" : "map"
      }, {
        "key" : "photos",
        "label" : "Photos",
        "type" : "photos"
      }, {
        "key" : "category",
        "label" : "Category",
        "type" : "checkBox"
      } ],

Summary

So the overall Master View details configuration looks like this

{
  "categorySetup" : {
    "category_style" : "grid2",
    "data_point" : "",
    "fields" : {
      "description" : "description",
      "image" : "image",
      "title" : "title"
    }
  },
  "category_first" : true,
  "detailsSetup" : {
    "actionButton" : "ADD TO CART",
    "actionButtonWhenActionDone" : "PRODUCT ADDED",
    "cartCODAvailable" : true,
    "collections" : [ "variants", "ingredients", "photos" ],
    "descriptionTitle" : "Description",
    "fields" : {
      "description" : "description",
      "descriptionFunctions" : ",",
      "image" : "image",
      "photos" : "photos",
      "price" : "price",
      "priceFunctions" : "round,toCurrency~USD,prepend~Price: ",
      "shareLink" : "link",
      "subPrice" : "price",
      "subPriceFunctions" : "multiply~{qty},round,toCurrency~USD,prepend~/per peace ,append~ for {qty} item/s.",
      "subtitle" : "calories",
      "subtitleFunctions" : "prepend~Calories: ,append~ kCal",
      "title" : "title",
      "titleFunctions" : "trim:40",
      "video" : "video"
    },
    "isShopping" : true,
    "photosTitle" : "Product Images",
    "shareButton" : "Share this recepie",
    "showPhotos" : true,
    "videoButton" : "View Video"
  },
  "icon" : "MdRestaurantMenu",
  "isRoot" : true,
  "listStyle" : "grid",
  "listingSetup" : {
    "collection_key" : "collection",
    "data_point" : "",
    "fields" : {
      "actionButton" : "BUY",
      "description" : "description",
      "image" : "image",
      "subtitle" : "price",
      "subtitleFunctions" : "roundOn,toCurrency~USD",
      "title" : "title"
    },
    "listing_style" : "list"
  },
  "name" : "General"
}

The cart menu is configured like this

{
        "CODAvailable" : true,
        "PayPalAvailable" : true,
        "isShopify" : true,
        "shopifyLink" : "https://mobidonia.myshopify.com/",
        "icon" : "MdShoppingCart",
        "name" : "Cart",
        "sectionType" : "cart"
}

1. CODAvaialble - Do we have Cash On Delivery Available - in effect only if isShopify is false.
2. PayPalAvailable - Do we have PayPal payments - in effect only if isShopify is false.
3. isShopify - is this a Shopify cart
4. shopifyLink - link to your Shopify shop - needed only if isShopify is true.
5. The standard elements ( icon, name, sectionType )

1. category_image - URL to the header image that should be displayed

2. display_header_image - Do we want to display the header image

3. subMenus - An array that contains other menus.

4. The standard elements (icon,name)

1. html - HTML code
2. url - The web site that should be displayed
   
3. webSource - You can choose what you want to display (html code or website url)
   
4. sectionType 

They are more like templates for the UNI Expo App

Ex. 

UniExpo - Wordpress

UITemplate (Components) - Template

The components live in a "Components" folder and each of them has her own folder

We have the following themes

•  UNI ( The default one )
• Awesome UI ( https://ui8.net/products/awesome-ios-ui-kit )
  
• Sketch Elements ( https://sketchapp.com/elements )
  

When you release your Android app, Expo will include a lot of permissions in the app by default.

And Google Play doesn't like this a lot :) 

Good thing is that you can control which permissions you need in app.json file. 

Read about this guide

https://docs.expo.io/versions/v32.0.0/sdk/permissions/#android-permissions-equivalents-inside-appjson

To see how to set up the permissions you need.

SMS Permission

In Expo 30.0.0 the SMS permission is requested, which will mark your app as dangerous. 

In that case, it is recommended to set app.json permissions manually. 

Our new updates will be on expo sdk version 32.0 +. So the SMS permission will not be requested. 

You are not able to build the app. You get a similar error like this one.

Cause

One of the npm modules we require has created bugs.

react-native-ui-kitten

Solution

Remove its usage in the file

"Mobile App/App/Containers/MenuLayouts/Grid.js"

To fix the problem simply replace that file with this content

https://bitbucket.org/mobidonia/public-downloads-updates/raw/333f543636e95ce97accf13ba2a4227a00c9526e/uniexpo/Grid.js