PrevNext
Getting Started With Expo React Native Kit
Getting Started With Expo React Native Kit
•5 min read

Getting Started With Expo React Native Kit

Simple Steps to setup Simple Expo Kit in minutes, guide, troubleshooting, and best practices. The goal of developing simple expo kit, a react native boilerplate for founders and dev, is to quickly start the new hybrid app with basics already done, so the starting point shifts to focus on app, business logic, and design UI/UX.

This expo react native kit, also comes pre-configured with light-weight serverless admin (firebase & supabase), that is capable of handling a business application quite well.

Download & Setup

Dowload the zip that you get from the purchase, and extract it to your desired location.

1. Renaming the Project

First, Rename the app project from simple-expo-kit to your-app-name. We need to update the name in several places, this helps ensures that their is no ambiguity from the start.

  • Change the name of the project directory.
  • Change the name of the app in package.json.
  • Change the name of the app in app.json both slug and name.

Best way to do it is to open your favorite coding editor find simple-expo-kit and replace it with your your-app-name.

2. Initialize Git Repository

This is a great point to start a git repository.

Create a project in your favorite Git provider, your-app-name, without adding any files.

Copy Git Origin URL. (SSH/HTTPS), whichever you normally use.

Open your terminal and navigate to root folder or if you have already opened the project in your favorite editor, open integrated terminal.

Use the following commands to initialize git repository:

  • Initialize git in the project.
git init
  • Paste the remote origin to replace <REMOTE_URL>
git remote add origin <REMOTE_URL>

3. Setting up App Identifier

This is a very important step and moment to decide what are you going to call your app package, which will be your application id on google play store and app store and shouldn't be changed or you run it to hell a lot of configuration issues or bugs.

Usually it looks something like com.company.appname For example for this project, we have com.mhlabs.simpleexpokit.

Now inside the project, locate file app.json, and replace com.mhlabs.simpleexpokit.

  • Replace "bundleIdentifier": "com.mhlabs.simpleexpokit", for ios with your bundle indentifier.
  • Replace "package": "com.mhlabs.simpleexpokit" for android.

Make sure stick with the name you decide for your app bundle id, as it is going to be used for important configurations with firebase and others.

Keep it as short as possible but follow this pattern com.company.appname or com.domain.appname.

4. Setting Up ENV for your Expo Hybrid Mobile App

In this kit, we have two different set of environment variables.

First, public environment variables that will be bundled with the app. You can safely commit it to the code, project already does that.

Second, private environment variables inside admin, these are not committed, for security reasons and contain private keys for backend services like firebase, supabase and others.

  • Copy the env files from admin/.env.example to admin/.env
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
FIREBASE_SERVICE_ACCOUNT_PATH=../google-service-keys.json
SUPABASE_URL=supa-url
SUPABASE_SERVICE_ROLE_KEY=supa-service-role-key
  • and copy the .env.example to .env in root directory.
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID="add-your-web-client-id-here"
EXPO_PUBLIC_REVENUECAT_API_KEY="your-key-here"
EXPO_PUBLIC_APP_ENV="development"
EXPO_PUBLIC_SUPABASE_URL=https://YOUR_PROJECT_REF.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...your-anon-key...

We will replace the dummy values with your real values in next steps.

5. Configuring RevenueCat

Simple Expo Kit aka SEK comes pre-integrated with RevenueCat SDK. Meaning you can accept payments for both ios & android store, from day 1. For development server we will use test keys.

  1. Go to RevenueCat Dashboard
  2. From sidebar, sellect Apps & Providers.
  3. Click Configurations or API Keys.
  4. Copy Public Key (test key), and replace demo key with your key in .env file under EXPO_PUBLIC_REVENUECAT_API_KEY

Simple Expo Kit comes with pre built paywall, and service code, you can redesign & customize that depending on your entitlements and business needs.

This completes the initial setup part of the project, should only take less that 5 minutes of your time. We used both Supbase & Firebase, in this app kit, to ensure you can use either or both depending on your needs.

Installation & Dependencies

Let's run npm install inside project terminal to install all the dependencies.

  • Install app dependencies, like expo, push notification, auth etc.
npm install
  • Install admin dependencies, like supabase, firebase sdk and more.
 cd admin
 npm install or (with) pnpm install

Note: Project will hit configuration errors and will not run properly until we setup Firebase & Supbase

Tips for your Hybrid App Development Journey

  • If your app needs a lot of data and data is tightly coupled, I recommend using Postgres via (Supbase or Neon DB), this will ensure least cost adn smooth application operations.

  • If your data requirements are simple, and your data shape, changes frequently you can go ahead with Firestore, you will enjoy it's realtime benefits and built-in cache persistance.

  • You can also use combination of both, this strategy is perfect to keeping the cost insanely low, if you know where to put what.

Next Steps

Let's move on to Step 2 - Setting Up your Firebase Project for Expo React Native App.

Next Reads

View all