Boilerplate to start building Cross-Platform Apps with Expo and React Native

Expo and React Native is the perfect combination to build Cross-Platform Apps.

When I started to build Apps using this approach I had to understand the limitations and that, although, the React Native ecosystem is big I cannot use all the libraries if I wanted to run my app on Web, Native & Desktop with a single codebase.

There are different libraries to do the same job and it’s important to choose the one that fits better and is cross-platform.

What are you going to find in this boilerplate

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

React Native for Web

React Native for Web makes it possible to run React Native components and APIs on the web using React DOM.

It was included in Expo SDK 33, so one less thing to worry about.

React Navigation adss routing and navigation to your React Native apps.

Electron

Electron let you build cross platform desktop apps with JavaScript, HTML, and CSS.

Easy Peasy

Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience.

React Native Async Storage

React Native Async Storage is an asynchronous, persistent, key-value storage system for React Native.

React Native Paper

Although, I use it in most of my Apps, sometimes I prefer to use my own components. Anyway, if you prefer to start with a collection of customizable and production-ready Cross-Platform components for React Native, I highly recommend to you add to your project with:

$ expo install react-native-paper

How to try this boilerplate

You can download and run the repository from my Github account: jferrer/expo-boilerplate

Clone the repo and install dependencies:

$ git clone https://github.com/jferrer/expo-boilerplate.git
$ cd expo-boilerplate
$ yarn install

Run for Web & Native:

$ expo start

Run for Desktop:

$ yarn expo-electron start

Inside, you’ll see the basic configuration and screens to start an App:

Typical Tab Bar navigation like Facebook or Instagram
Action & Form Screen to add elements to the Store
List Screen