How to Create a Custom Mobile React Native App with Crowdbotics

React Native is an open-source framework used to create cross-platform mobile applications. It uses JavaScript at its core and has a primitive API of components to build mobile interfaces and functionalities. At Crowdbotics, the React Native framework is an integral part of the RAD stack we offer through our visual app building tool called Crowdbotics App Builder.

This tool provides a number of visual tools for creating apps. The key features of the App Builder are listed below:

• scaffold a new mobile app with a click
• choose from a set of pre-defined templates suitable for various design interfaces as well as app features
• a visual storyboard to manage different screens
• an editor in the web browser to edit the app code generated to your needs
• building and mapping data models that leads to the auto-generation of APIs
• preview app builds with the dashboard

In this post, let’s create a custom screen to learn how the majority of these features work, but more importantly, how you can use the visual design tool to implement UI interfaces in real mobile apps.

Scaffolding a new Custom Mobile App with Crowdbotics

To create a new mobile app using Crowdbotics, go the app dashboard screen and click the button Create App. The process we are going to follow in this section is called Scaffolding and is referred to as generating basic application architecture.

You will be redirected to the Create App screen, where you will see options for naming your app and choosing what type of scaffold to build. Select the option Build from Scratch in the side menu, then select the type of the app to be Mobile App. Then enter the name of the app in the input field as shown below:

Click the button Create App in the above screen. The app's scaffolding process has been started. It might take a few minutes to generate the app. You will be re-directed to the Storyboard Editor. The Storyboard editing tool provides a logical flow to maintain the collection of the app screens.

There are plenty of app modules and templates available to add to the mobile app that you can choose from. Modules are prebuilt app screens that contain a specific design and functionality. For example, the Article List module is a feed screen that displays a list of posts. This list is vertically scrollable. You may edit this screen and use it as a feed screen for any social media app or informative app.

Along with Modules, there are Templates, which are a collection of multiple modules, arranged in a logical way to provide an end-to-end mobile application. For example, if the app you are building for your business is a learning management system, you can use the template Online Course Management System and modify it to your needs.

For this guide, we are going to create an app screen from scratch. To do so, press the button in the Add Modules section that says Create a Module. This is going to generate a new blank screen module.

Each screen module added has at least a minimum of four options. The first option is Properties, which you can use to modify the screen's name and description. Let's change the name of the screen to Home Screen and a brief description as to what this screen does. After modifications, click the Save button for the changes to be stored.

Creating a custom UI with the visual editor

The second option on the Home Screen is to add or modify the current layout of the screen. Fittingly, the name of the option is Layout. Clicking that button is going to redirect you to a new page where further design implementations can be performed. Since the screen module we selected is blank, there is not going to be anything initially displayed on the screen as you can see below:

On the left side, you can view the UI elements provided. The Element Tree drop-down menu is to view what elements are being used for the current app screen and how are they organized in relation to each other. By default, the first element on any app screen or blank screen is going to be a Flex.

The Elements menu provides a set of UI elements that you can use to build the interface. Let's start building the demo app screen. Select the Flex element to add a View component.

A View component is the basic building block in a React Native component file. It puts a container element that supports layout styling with flexbox and other styles using a JavaScript object called StyleSheet. Hence, it can be said that View components are primarily used for styling and the layout of children elements. We are going to add a Flex component to contain an image component.

To modify the width and height of a UI component like the one above, you must select the element. Upon selection, the right-side menu is activated, where you can make modifications like managing interface styles of a component or providing a more suitable name to the component.

Managing styles also includes the application and manipulation of the Flexbox algorithm. The algorithm itself is designed to provide consistency among different screen sizes. There are different Flexbox properties available:

• flexDirection controls the direction of the main axis in which children components are laid out. The main axis in a mobile app by default is the Y-axis.
• justifyContent controls how the children components are aligned within the main axis of their parent component.
• The value of alignItems property affects the children components to be aligned along with the cross or the secondary axis inside the parent component.
• The value of the alignSelf property is used to change the alignment of an individual child component by overwriting the value of alignItems set by the parent component.
• The alignContent property aligns the child components across multiple lines on the secondary axis when they are wrapped using the flexWrap property.

The value of all these properties for each new element is set to their own default values. To read more about how to use Flexbox in React Native, and find out the default values of these properties, please refer to the official documentation.

There are various screens sizes available on the selection from the drop-down menu just above the visual screen.

Now, let’s add an image component.

You can use your own custom image resources by uploading them. This is done from the third menu item on the left sidebar. Do note that, uploading these image resources as shown below will also add them to the source code of the app as remote assets.

After uploading the image, from the right sidebar, it can be selected as a resource to use for a particular component. In the example below, it is used as the source for the Image element with a width property modified.

A TextInput element can be used to create an input field. The margin properties can be set to add spacing corresponding to other elements. The placeholder value for the input field can also be set using Content > Element Properties as shown below:

With Crowdbotics’ Visual App Builder, you get advantages in the form of elements such as Columns and Rows, which are pre-defined with flex properties to suit particular use cases. For example, the Columns element can be used to create a two-grid system as shown below.

Let’s add an image with a fixed width and height to the left and right grids. The Columns element is comprised of Flexbox properties just like any other container element. To align the image to the center of the right column property, align-self is used from the right side menu. The width and height of the Image element can be set using unit points (pt).

Let’s use the Text element to display the name of the product that the image in the previous step is associated with. Apart from setting up the value of the Text element, using the visual tool, you can also modify the property values such as font size of the text field, the font family, color, as well as other typography properties.

The visual tool also takes care of adding a default value for spacing using padding and margin properties.

Before proceeding, make sure to save the progress so far by clicking on the Save Changes button.

Navigating between different app screens

A Button element can be used to add further actions in the app. The properties like border-radius are used to style a button component.

An action on a Button element can be used to navigate between different screens. So far, the demo app has only one screen module. Let's add another one, and call it Details Screen.

To navigate from Home Screen to Details Screen by pressing the button View More, we need to associate an action with the button. Go to the Home Screen component, select the Button element we previously added, and then go to Content > Actions and click on the button Add Action.

When adding an action, the type for the action is required. The only action type on a Button element that is currently available is called onPress. It detects when a user taps the button on a device's screen and then executes the associated business logic in the form of a function. The visual editor provides a set of common actions.

For example, for navigation from one screen to another, there is an action called Navigate to. Once this action is selected, the name of the screen to navigate can be specified.

Using a prebuilt module as app screen

We have already discussed the significance of a module in Storyboard. There are verified modules available that are maintained by the Crowdbotics team of engineers.

Another category of modules available is called community modules. To view and use these modules, you can change the selection from the drop-down menu. These modules are created by app developers who are part of the Crowdbotics community. These modules are often based on the same set of React Native API components and other open-source libraries used in Crowdbotics React Native apps.

Let’s use a prebuilt module to see how a verified module is added to the application flow. Open the Storyboard screen left-hand navigation bar. Then open Modules and select the Sign In screen.

The app screens by default are arranged in the order they are created. To manage the flow from one screen to another, you can link them.

Defining Data Models

Data Models in a RAD Stack app provide a way for you to define a structure of the underlying data that powers the application. Each piece of information is stored inside an object, and each object is stored inside a list of objects. The list of objects is a data model. A data model usually describes what type of data is required in the app, where it is coming from, and how it is stored in form of a table. To view and define custom data models, please open the Data Models page from the left sidebar.

The Crowdbotics app generates a default set of data models that triggers the communication between the mobile and the backend. A Crowdbotics app uses the Django framework (the “D” in RAD stack) to create backend APIs.

As you can see, the default data models consist of CustomText, which is a mock piece of data, the HomePage, and User. For this demonstration's purpose, let's create our own data models. The first one we are going to create is called Products. You can relate this data model to the list of other data objects.

To create a new data model, select the Data Models tab from the right-hand side, and then select Add model. Enter the name of the app, and the data model itself. The app generated with Crowdbotics comes with an admin panel that you can access using the source code of the app. The admin panel provides a way to view and create new data sets using the Django framework. Selecting the Admin option here is going to enable that.

Next, it is going to prompt for what field types to include. Each data model can have one or multiple fields. Each field is constituted of a specific type. These field types help to define what type of value to expect when the actual data is used to display information in the application.

For example, a field type of name should be a text field since its value is going to contain characters, and the field type of phone number should be of type integer since its value is going to have numeric characters. There are various field types available that can be used to define data, and you can find more information about them here.

Add a field type called Shoes to the data model Products. The type of this field is going to be CharField. This field is going to represent a collection (or a list) of data or products.

Clicking the Save button is going to generate the data model.

Since the Products data model is a collection of other products, let's create a new data model called Product that contains field types related to an individual product item. It is going to have multiple fields:

• The name of the product is of field type CharField and represents the name of the product. It also has an option of maximum length of fo characters set to 256 by default.
• The price is of field type FloatField and represents the numeric price value of the product.
• The image is of field type URLField since the image for each product is going to be an URL field of an image hosted in a cloud service.

To connect two different data models, there are three special field types available. These fields are used to connect different objects of information.

The ForeignKey references to one-to-many connections. Let's create and connect the sneakers in the Products data model to connect it with the Product data model. A data of type sneakers is going to have multiple objects and each object has corresponding fields of name, price, and image.

Building the application

In the Status page from the left sidebar menu, you can build the application. The Build Status is the first view that is displayed, and it tells whether the app has been deployed before or not. If the is ready to be deployed, the status will read Ready.

Clicking the button Deploy App will trigger the build process. This process includes the deployment of the backend API and also builds an Android version of the app. The deployment process may take a few minutes.

The App Activity below the Build Status view is where you get all the information about the build process with other essentials, like any pull requests to the GitHub repository of the app, GitHub commits, and server logs.

The third view on the right side is where the preview Android app is available after the build process has taken place successfully. The other advantage of building the app leads to access to the Admin Panel of the backend API. Once the app is built, you can generate the credentials to access the data from the Admin Panel and then view the panel from the Settings page.

Accessing source code via GitHub

So far all the steps described in this post did not require any line of code to be altered. There are chances that to match some of an app’s requirements (depending on your app’s architecture), you might want to access and modify the existing code.

Any app generated with Crowdbotics App Builder automatically hosts the source code related to that app in a GitHub repository. When a new app is scaffolded, you get an invitation to access the GitHub repo.

You can also access the same repository from Settings > View Code. All the files generated and used to build the mobile application and the backend API are available.

To view or modify the code available in the repository, you can either download the repository or clone it. After having the access to the repository at your local environment, you can use a code editor like VScode and a command-line terminal application to install dependencies and build the app for the iOS or Android platform or the backend API. All the instructions on what steps to take next to build the app are provided in the README.md file with the source code.

After building the app, you can easily view and test out the functionality in an iOS/Android emulator or a real device.

Conclusion

Now you have a better understanding of how to leverage the Crowdbotics App Builder to build your own app. At Crowdbotics, we offer both the low-code Crowdbotics App Builder and managed app development by expert PMs and engineers. The Crowdbotics App Builder includes automated and drag-n-drop visual scaffolding tools, the pre-built modules and templates, and the complete flexibility to customize and modify source code using GitHub.

This is a great place to start building your app without coding from scratch. Not only does it save a good amount of development hours, but you get an organized structure to follow and customization options with all the integrations of open-source technologies, as well as a setup for backend API.