Step By Step Guide

Introduction

Expected result

By following this guide you will build your own mobile app (iOS, Android or both) with all Ethora engine features (alternatively you may choose to disable / limit some features via Config file).

In the process you will specify your own name and do a basic branding (logo, colours).

How long does it take?

A) It takes just 0.5h for a React Native engineer experienced with Ethora engine to produce a new app build.

B) A React Native engineer without previous Ethora experience should be able to complete it within around 1 work day.

C) You may need a 2-3 work days if you have done some software development but you don't have much experience with React Native.

In any case, it would take not less than 4-6 months for a team of experienced software engineers to develop a new app for your project with similar qualities and a feature set of Ethora engine. So irrespective of the option above, you are going to be saving a ton of time and investment by building on top of it.

Note: whilst Ethora can be called a "no-code" or a "low-code" product and we encourage you to use the product as is, some projects would opt for an advanced customization. Such as adding new screens, features, custom backend integrations or chat bots etc. You might need to allocate 1-2 months or more if you plan to add new functionality on top of Ethora engine, depending on the extent of additional functionalities and modifications.

Make sure to check the Config file first to see if the changes you want are not covered by parameters and switches there.

Pre-requisites

You are expected to have your system set up already for React Native development for either iOS or Android, or both.

If you don't have that setup yet, you will need to install the required packages, such as:

• Android Studio
• Node.js
• Yarn or NPM
• React Native environment (https://reactnative.dev/docs/environment-setup)

Note for vscode users: if you use Visual Studio Code, we personally recommend installing the following extensions to make your life better/easier:

• React native snippet
• Gitlens
• Color highlight
• Prettier

Steps to build

Step 1 - create a new React Native project locally

Open the terminal at your project directory and create your new project npx react-native init [proj_name]

It will download the react-native template and install cocoapods dependencies. This may take few minutes depending on your network speed.

Step 2 - activate Yarn

Now we need to go inside the project folder to execute further commands

cd [proj_name]

yarn

Step 3 - retrieve and set up the repository

Now download/clone the code from GitHub repo and update the folder structure as instructed below.

Locate "src" and "docs" folder in Ethora project directory and copy both the folders

Paste them in your project directory

Now open both the projects in your code editor side by side.

Navigate to package.json and replace dependencies, devDependencies and jest from package.json of Ethora to your project's package.json

Navigate to index.js

Now we need to change the import from default app.js to app.js from inside the src folder

In order to do this, change import App from './App'; to import App from './src/App';

Go to your terminal again and execute yarn command in your project directory because the package.json is now updated.

This will install all the required packages.

Step 4 - build for iOS/Android

Now in your project folder execute the following commands.

cd ios

pod install

resolve the errors then in your project directory execute yarn ios for iOS or yarn android for Android build.

This will build the app.

Step 5 - configure and add your branding

Dismiss the notice and navigate to "docs" folder in your project directory.

Open config.js

You can now set the appTitle to your project name and add your own logo for rebranding.

You'll find all the options for the modification in this config.js for you to continue building your own product with ethora engine.

NOTE: If you're not using M1 chipset mac machine then remove the line __apply_Xcode_12_5_M1_post_install_workaround(installer) from Podfile.

Please check out the video for more details regarding the setup of Ethora.

Video guide

The video guide below demonstrates the steps listed above.

This video hasn't been edited. This is to show how long does it take with all the compiling, troubleshooting etc: 32 minutes from A to Z.

Troubleshooting: Android

Can't run the build on the physical device

Enable the "Developer options" menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".

Note: enabling "Developer options" may vary across devices / OS versions. Google the instructions for yours.

Note: sometimes you need to enable multiple options, for example in my case I needed to enable these 3:

• USB debugging
• Install via USB
• USB debugging (Security settings)

Things don't update

If you changed some asset like a logo or background image, launch and see the old one (or see image is gone) the culprit could be the cache. To troubleshoot:

1. Kill the node server (just close your terminal tab where Metro is running)
2. Open a new terminal (in vs code or a new terminal window in the same project folder) and run this command: yarn start --reset-cache
3. Build again ("yarn android").