Converting a React App to React Native

I have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile development I have had so far. It has great, web-like developer tools, lets me use NPM packages plus a lot of great react-native ones, and also produces faster, smoother apps than Cordova or Ionic. It shares the same workflow as a React application for the web which is pretty easy to reason about and find where things are quickly.

Now I am building an app to gamify recycling in Indiana. I have a web app completed in alpha, however, the app required the use of geolocation, augmented reality, and some other features, so I am building a mobile app to complement the one for the web. Since the web app is in React, I figured it would be easier to build the Native version in iOS and Android at the same time using React Native.

Here are some mockups to give you an idea.

(I changed the menu from the right side to the left side after this)

Setting Up the React Native App

Link to simple set up instructions.

After getting it to run in the simulator, I create a ‘src’ directory to put all my code in. Then I turn on live reload (command + D opens the dev menu on iOS and control + D on Android) and begin developing!

A quick note about React-style applications: If you are new to this, it can feel a little strange to return your view from your .js files.

React, in its simplest form is a way to write modular, reusable code. Each component is broken down into sub components wherever it makes sense. Each component is encapsulated as a function or class in its own file, meaning you only import what you need. The function then return its view — the content to display on the screen from the component.

Menu and Navigation

react-native-side-menu is a great little library that was pretty easy to set up. I tested out the swiping to make sure it was smooth and then added links to the side menu.

RN doesn’t come with a built in navigation solution, so I added react-native-router-flux. It works great, even if you are not using a traditional flux (flux was similar in concept to Redux) state management system and it’s easy to set up.

router.js

A Scene is a ‘view’ or a ‘page’ in the application (you can see how the navigation works together in the short video clip at the end). The title attribute shows up in the header at the top, the key is used for navigating to the specific page, and the component is the actual Javascript file that contains the React Native component to display on that page. So, I created a component for each page with placeholder content:

Now, there is a menu and basic dummy pages and the user has the ability to navigate around the app. That was pretty quick and easy —I just installed a few modules and wrote a minimal amount of code.

List Views

For this app, I have an ever-growing array of various characters that I wanted to display in a scrollable list on mobile. React Native offers ScrollView and ListView as build in solutions for handling infinite scroll.

Each one of the animals above can be clicked on and viewed on an individual page:

I set the ‘Amici Info’ page as a scene in the router and populate it with the information of the creature that was clicked on.

Reusable Components

Porting Over Redux

The only thing I am doing so far is fetching the character objects from DynamoDB (AWS).

This is the reducer to match this action:

That’s basically the state of Redux so far. I still have a lot more work to do on the Redux part but this is a good start. Next up: I need to set up a map component and display the locations for users to see.

Debugging and Dev Tools

It’s one click to open up Chrome Developer Tools or use an inspector similar to the inspect element option when right-clicking in a browser.

Wrapping Up

I really enjoy working in React Native and I will continue to use it whenever possible until something better comes along.

If I’m missing any information in this article or you have any questions, let me know :)

Programmer. Blockchain and ML enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store