Build Linkedoff using React Native, Redux, and Backendless — Part 2: RN Setup

A Simple Linkedin Clone Android Application

Read the Previous Article — Part1:Introduction

As I said before, this article require you to have basic understanding of React Native. So let’s use our open source React Native Boilerplate called “React Native DumbWays Boilerplate” (https://github.com/DumbwaysDotId/RnDwBoilerplate). We are using this to make our work faster. But don’t worry, I’ll try to explain step by step how to use this boilerplate.

React Native DumbWays Boilerplate

This is a complete React Native Boilerplate including React Navigator, Redux, and Nativebase. This Boilerplate helps us quickly jump to code as soon as possible without being confuse about structures, and setup. We make it as modular as possible to avoid headache on a big app with a big team.

Prerequisites

• Xcode or Android Studio installed and exported on your ~/.bash_profile or similar
• JDK 1.8
• Node >= 8.*
• Watchman
• react-native-cli

Installation

open terminal and change directory to your desired folder, then:

$ git clone https://github.com/DumbwaysDotId/RnDwBoilerplate Linkedoff
$ cd Linkedoff
$ npm install

Running Your App

Make sure to open your emulator first, then

$ react-native run-android
or
$ react-native run-ios

Your default app will looks like this

Hello Linkedoff!

To test our cloned boilerplate worked as expected, let’s do a programmer ritual to show “Hello Linkedoff!” text on our screen. Open your app on ur desired code editor.

Because we are using RnDwBoilerplate, we should follow it’s structure to make our life easier. Create folder “profiles/screens” inside “app”, then add “index.js” file inside it. Your structure will looks like this:

the app/profiles/screens/index.js files will looks like this:

On the above code, we make simple component that print “Hello Linkedoff!” using Text tag from react-native.

We can’t still show the result on screen yet! To show our Profiles page that contain “Hello Linkedoff!” text, we should register it on React Navigation. If you are new to React Navigation, you can read more about it here https://reactnavigation.org/. To register our profiles page, we must open “app/navigators/RootNavigator.js”

if you noticed, before we edit the code, we have ContactsList etc registered on StackNavigator. We remove it because we don’t need it in our app. That’s just an example to give you basic understanding how this boilerplate works. For now we just need the Profiles page.

After registering Profiles page, we should tell our app to call the Profiles page at the first init. To do that, at the “app/redux/nav.js” change the 4th line code to “Profiles” instead of “ContactsList”.

That’s it!! Now we can reload our app, and our app should looks like this

Cool, We already did our setup! If you need the running source code, you can access it from here https://github.com/DumbwaysDotId/Linkedoff/tree/1.hello-linkedoff. Make sure to use the correct branch.

In the next part, we’ll setup our Backend using Backendless!

Read the Next Article — Part3: Backendless Setup