Building my first Mobile App - Part 2: Ditching Expo

• Part 1: Setting up using React Native and Expo
• Part 2: Ditching Expo
• Part 3: Adding authentication with firebase

In the first part of this series, I created the base structure for the project with React Native and Expo. Next, I wanted to add a storage system to the application.

After doing some research, I settled on using firestore. I wanted a dead simple method of having an offline/online synchronized storage. Also, I appreciate that it would be simple to add authentication with Firebase.

This is when I started to face issues with Expo. Because there is no way to add native bindings manually with Expo, it meant that I had to rely on the firebase JS SDK. However, the offline storage for the JS SDK uses IndexedDB which would not work with Expo. There were a few “hacks” on some dark corners of GitHub and StackOverflow, but I couldn’t get them to work, and even if I did, I would not have any confidence in using it in production.

In leaving Expo, I had the option to keep using ExpoKit and just “eject” out of my current project, but instead I chose to start a new React Native project. This is because, I believe it will be much easier to trace the source of any issues or bugs I face if it’s a vanilla React Native project.

Installing all the requirements

I had to install and configure the following, and while I did face some issues, I eventually got it all to work.

• React Native CLI
• Watchman
• Android Studio

Our Application

Most thing remained exactly the same, I copied the App.js file and views/ folder into the new project.

Next, we have to install our dependencies:

npm install --save \
    react-navigation \
    react-native-gesture-handler \
    react-native-reanimated \
    react-native-screens \
    react-native-paper \
    react-native-vector-icons \
    react-navigation-material-bottom-tabs

react-native link react-native-vector-icons

Next there’s a few more stuff we have to do to link some libraries appropriately:

• We link the vector icons library by running react-native link react-native-vector-icons
• To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

• Next, we modify babel.config.js. It’ll look slightly different compared to the one in the Expo project:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

Running the application

I only had to follow the instructions in the React Native Docs and it worked. I’m getting some weird warnings, but I’ll figure that out later.

Conclusion

Due to the poor firebase support, we had to start a new project without Expo. In the next part, we’ll add authentication to the application.

As always thoughts and suggestions are appreciated. ✌🏾.