The story of my first App : React Native + React Native Web. Part1

Programming is fun, it gives you a practical ability to shape user experiences and create unique or simply helpful solutions. For my graduation project, within a Technigo Frontend Bootcamp, I decided to create an App that I actually need in my life, and it may turn out that I am not alone in it.

The concept

This geo-location App provides an opportunity to search for the nearest hiking routes around you, check out some useful stats like distance, duration and difficulty level as well as to save selected routes in individual profile for future reference.

Stack

The key challenge started with one of the project requirements that app has to be also accessible in web. After some googling and collecting brief summary of the community views, I went for a combination of React Native and React Native Web with Expo Web.

Thats how it looks so far in IOS Simulator and Web:

IOS Simulator

Web

My Curvy learning Curve

Keeping in mind that my main focus for the past year was React.js, you could easily imagine my initial struggles, here are few examples:

1. Syntactic differences

For sure there are many nuances , however if you already familiar with React you can take a look and spot few differences from the button component on the screen below. Something like onPress instead of onClick, usage of TouchableOpacity component instead of Button one, styling within StyleSheet etc.

2. Styling

Apart from few syntactic differences, some css props are also vary between React and React native. Check out this list of available props before starting your fresh project.

For example: there is no justifySelf prop in React Native.

Initially I probably had to use component library for styling, something like : React Native Paper, that is not only cross-platformed but also responsive from the box. Hmmm … nope it was way too interesting to try everything myself.

3. Debugging

I found React Native to be relatively easy to debug with quite descriptive and newbie friendly console errors. However, some issues are not that straight forward. For instance, if you are writing a cross-platform solution pay extra attention to component imports and don’t fully rely on your autofill. This simply looking error below took me few hours of searching for the place where I thought I accidentally used <div> instead of <View> .

It turned out to be an import issue, where I relied on autofill and ended up importing the <View> from react-native-web , instead of react-native itself:

Triggered rendering error :

import { View } from “react-native-web”;

Solution:

import { View} from “react-native”;

4 Cross-platform Routing

Another thing worth mentioning is a cross-platform routing, when it comes to React Router it ends to be either NativeRouter for native or BrowserRouter (sometimes other like HashRouter). In order to make your app render conditionally depending on what platform it runs you can use following approach:

• create a separate routes folder with dedicated files for each native routing and web routing, .web.js is vital for conditional logic, so don’t modify this part.

• import all required components along with {Routes} from assigned packages, create variables with same naming for Router, Route and Link that your app use.

• in App.js you will only need an import for these variables to make it alive:

• Thats it, you are good to go and with a pitch of this magic your app is going to use React Router on both platforms:

*** Attribution and great thanks to Eduardo for his life-saving repo ***

To be continued …

This project is currently on a Beta stage and there are a lot of new features and refactoring ahead of me. But I am very happy on how it turned out to be and hope that some of my recent challenges will help someone else.

I have a plan to deploy the final version on AppStore. So if you gonna be intrigued with this project, stay tuned for the part 2 of this story and an actual release.