Modify app source code


The React App Builder is an Expo.io app. And Expo is the fastest way to build React Native app.

As backend we use Firebase. In a way, we use Firebase as a store manager. 

We use almost everything from Firebase. Real-time DB, Firestore, FireCloudFunction, FireCloudStorage etc..

The goal of this project is to be

  1. Super easy for the user to make mobile apps
  2. Able to make apps without programming knowledge
  3. Super simple to publish an app on google play and App Store
  4. To be able to make iOS and Android apps on Windows and Mac PC. 
  5. Free tech stack - Both Firebase ( start plan ) and Expo+React are free to use

And with Expo + Firebase I think we made a great choice. 


Before starting modifying the app source code, we recommend to do some reading on React JS and React Native.  Learn about React Components, props, state, React native modules and components. 

Then you will be able to efficiently extend the mobile code. 


Ok, let's start. 

The app code is located in the App folder. Inside, you will find the following folders. 

ComponentsReact Native Components used in the app
ContainersScreens / Pages in the mobile app ( React Native Components )
DatapointsConnection to the Firebase database
FunctionsSimple common function used across the app. 
ImagesImages used inside the app like logo, background etc.. App icon and splash screen are located in /assets
StylesDisplay styles used in the app.



Containers

We will start with explaining the Containers, So you can get the bigger picture about the app code. 

We have two types of Containers. 


Master Details Containers

Containers that are common for all section. We use this 3 files to show categories, list and details for the different data object. Ex, news, products. recipes, events. All are Master/Details Components.

fQK4vZJ0dVRWyCwI1lFkKerVnIlDCl8tNVl7cbug.png

Specific sections

Sections / Pages that do specific actions. User related screens -ex Login Screen,  E-commerce related screens ex. Cart, Web Screen etc..

SphJSbXMXp1cTV1ZEWRG9HVCl0u5IJYjukPBSFch.png


Master / Details

So if you want to edit something lets say for the "Events" app Details. You should edit App/Containers/Details.js. 

But you will also change details page for all displays. So take care of that you should think that this Page is used for all other item types. 


The render function of the Details.js contains this code

              {this.showHeaderImage()}
              {this.createTheInfoBoxes()}
              {this.showReview()}
              {this.createTheStreamDetail()}
              {this.createThePhotos()}
              {this.createThePrice()}
              {this.createTheCheckBoxes()}
              {this.showDirectionLink()}
              {this.createDescription()}
              {this.showListOfReviews()}
              {this.showShoping()}
              {this.showShareLink()}
              {this.phoneApp()}
              {this.showChatButton()}
              {this.showCommentButton()}
              {this.showAddReviewButton()}


Each section display inside is a call to a function that is Inside Detail.js 

You can modify thousl funcition in order to change the login of the display. 


Components

Inside this folder, we put all the individual components we use in the app. There are separated in a few folders, so it is easier for you to locate the component you want to modify.

QpEQp2obaMOChwQaz5BPWsw74GyJMYnAXeU6TaWy.png

The folder names describe what kind of components they contain. The important ones are the 

Details and Smartrow folder. 


Components > Details

Here we have all the components are displayed on the Details Page of the Master / Details Sections.

3SJuVolqicxWFfQ3romtUIjRNtA0GDqS3o9cblT4.png

So let's say you want to remove the black  Gradient that appears on the Top image in the details view of let's say your Restaurant Menu item. You probably guess that it should be in HeaderImage.js


Components > Details > HeaderImage.js

Open the file.

On top, you will notice all the required imports we make for the component to function. 

import React, {Component} from "react";
import {Text, View, TouchableOpacity,ImageBackground, UIManager} from "react-native";
import style from "./style";
import css from '@styles/global'
import { Ionicons } from '@expo/vector-icons';
import {LinearGradient } from 'expo';


Then you will notice the Component Declaration 

export default class HeaderImage extends Component {


Most of React Native components have the following methods 

  • constructor - used to initialize the component and state
  • componentWillMount / componentDidMount - function that fires when components is displayed
  • render - return the output of the components

So as you may guess, to remove the black Gradient that appears on the Top image in the details view we should look into the render function.

Ths components return this from the render method. 

<ImageBackground style={[style.headerImage,{borderRadius:css.dynamic.general.rounded+""=="true"?7:0}]} source={{uri:this.props.image}}>
        {this.renderPlay()}
        <LinearGradient
            colors={['transparent',"black"]}
            start={[0.0,0.0]}
            end={[0.0,1.0]}
            style={style.imageRowShadow}
          >
          <View style={style.imageRowTitleArea} >
            <Text numberOfLines={1} style={[{textAlign: "center",color:css.dynamic.category.textColor,fontSize:23,fontWeight:"bold",fontFamily:'lato-bold'},rtlText]}>{this.props.title}</Text>
          </View>
        </LinearGradient>
      </ImageBackground>

Even without programming knowledge, you can guess that need to remove the LinerGradient Wrapper that wraps the view with the text. 

So our code should look like

<ImageBackground style={[style.headerImage,{borderRadius:css.dynamic.general.rounded+""=="true"?7:0}]} source={{uri:this.props.image}}>
        {this.renderPlay()}
          <View style={style.imageRowTitleArea} >
            <Text numberOfLines={1} style={[{textAlign: "center",color:css.dynamic.category.textColor,fontSize:23,fontWeight:"bold",fontFamily:'lato-bold'},rtlText]}>{this.props.title}</Text>
          </View>
      </ImageBackground>

Save the file. Run the app and see the change. 


Components > Smartrow

In this folder, you will find the files used to print all the lists and tiles inside the app. 

Rows in the categories, rows in the master screen, in orders, in chat list. Everything comes from this folder. 

Start by opening the index.js fille. 

Here is the folder structure

IXOF8gHUValwRU6Yfxy5mpM6rIkGCpv97Sc3TPBa.png