React Native Boilerplate — Expo 54 + Firebase + TypeScript Prebuilt Template App

🚀 Grab your React Native boilerplate today — start coding in 10 minutes!

Tired of wasting hours wiring up authentication, navigation, and Firebase?
This React Native + Expo + Firebase App Boilerplate gives you a ready-to-run foundation so you can focus on the fun stuff — building features and launching faster.

Follow the instructions in the README, run a few commands and complete Firebase setup. You'll be coding within 10 minutes.

🔧 What’s Included

• ⚡ Expo + TypeScript setup — preconfigured, clean folder structure
• 🔐 Firebase Authentication — sign up & login ready
• ☁️ Firebase Realtime Database integration
• 🧭 Navigation tabs prebuilt
• ⚙️ Settings page with functionality
• 📱 Reusable UI components — text, buttons, colours, and themes
• 📄 Comprehensive README — start coding within 10 minutes

👩‍💻 Who It’s For

• Indie devs who want to ship faster
• Freelancers who build apps for clients
• Small teams starting MVPs
• Students learning React Native and Firebase

💬 Why It’s Worth It

This boilerplate saves you hours of setup and debugging. Everything just works — Firebase connected, navigation configured, and Expo ready to run instantly.

Spend your time building your idea, not boilerplate.

💾 What You Get

• 📁 Full project source code (.zip)
• 📘 Setup instructions + Firebase guide
• 🧰 Maintenance updates (when new Expo/Firebase versions release)
• 🧑‍🤝‍🧑 Support to get up and running smoothly

💸 Pricing & Licensing

Single-developer license — one developer can use it in unlimited personal or client projects.
Team or enterprise licensing available on request.

🏁 Get Started Now

Run one command. Watch it load in Expo.
Your next React Native app starts here.

Github clone available on request.

📄 README preview

Below is a large snippet of the README included in the boilerplate, which will give you guidance and instructions on how to get up and running quickly and smoothly. The actual file is much more readable than this, due to limitations of the Gumroad listing.

# Welcome to your React Native Expo boilerplate from Cyberfreak Software 👋

## Launch the template

1. Copy the entire contents of this .zip into an empty project folder

2. Install dependencies

npm install

You may still see lots of red problems at this stage. Close and reopen your editor to allow Typescript to refresh.

3. Start the app

npx expo start

You can interact with your development build instantly using the Expo Go mobile app.

Scan the QR code in your terminal using your phone to access your build.

## Create your Firebase project

Before you can start programming, you must create a project within Google's Firebase where your Authorisation and Database will live.

This has a free tier and is very easy to set up (≈10 mins).

1. Firebase console setup

Go to https://console.firebase.google.com/

Click "Create a new Firebase project" and enter your project name. Decide if you want Analytics, Gemini, etc for your project.

Within your new project, click "Add app"

Click "Web" and enter your project name again

Click "Register"

Copy the code generated for you. The firebaseConfig object is very important and we will use it shortly.

Continue to console and in the left toolbar, click

"Build" -> "Realtime Database"

"Build" -> "Authentication"

Under "Project shortcuts" click "Realtime Database" -> "Create Database"

Choose your region and "Next"

I recommend to "Start in Test Mode" - you should update your database rules for security once your start developing.

Under "Project shortcuts" click "Authentication" -> "Get started"

Choose "Email/Password"

Click "Enable" at the top and "Save"

Go to "Settings" -> "Authorised domains" and add this domain for development: auth.expo.io

All done! Your Firebase console setup is complete, now back to your boilerplate.

2. Plug in config values from Firebase console to .env

Copy the contents of the firebaseConfig object from the console into your .env

Each of the keys should match teh fields in your .env file.

If you can't find your firebaseConfig object, click the "Cog" icon next to "Project Overview" -> "Project Settings"

Under "General", scroll down to find the firebaseConfig values needed for your .env

If FIREBASE_DATABASE_URL isn't included here, it can be copied from the "Realtime Database" tab in your project

Just click the "Link" icon to copy

It should be in the format https://xxxxx-default-rtdb.firebaseio.com/

## Begin development

At this stage, you should be ready to go.

The information below is very helpful, but not necessary for setup. You can begin developing without reading any further if you want to.

1. General layout

The account tray that opens from the side, the navigation bar at the bottom and the header at the top are all controlled in index.tsx.

This is the root entry point for your app meaning it is the first component to be loaded when the app starts.

Other pages, such as "home", "settings" and any others you want to add, are controlled using their own .tsx file.

In index.tsx, there are two seperate blocks of jsx, one for iOS and one for Android. If you make a change to one, remember to make the same change to the other.

Some places also use the Platform API from react, which allows for conditional rendering or styling depending on the operating system of the device.

Example usage:

marginTop: Platform.OS === 'ios' ? 10 : 0

2. Use global styles

Applying a global style in _styles.ts will make it available across all components, and styling your jsx elements this way will allow you to:

manage font styling centrally,

change default spacing of elements,

avoid repeating styles for each component/page,

all using a single line of code.

Change the colours of your app using the ThemeColors object in settingsContext.tsx

Change your font by adding the .ttf file to assets/fonts and import it using the loadFonts function in index.tsx

3. Settings

You will have an example settings page. The Appearance for dark/light mode and Haptics settings already work out the box, the others are examples.

To apply dynamic haptics to other onPress handlers, use

triggerHaptic();

4. Adding a new page

Go to Tab.Navigator in index.tsx to customise your navigation bar and header.

You'll be able to add another page to your nav bar here, as well as customise the styling for the header text and nav bar text and icons.

5. Using your own images

First, add your images to assets/images. Then, you'll be able to replace the example images I've left with your own.

Use the ImageBackground component in home.tsx to change to your own background. This can be applied in other pages too.

Use CTRL+F in app.config.js and search for "assets/images" to change the icon and splash screen from the Cyberfreak Software logo.

6. Using icons

The setup is already in place for you to use FontAwesome icon libraries.

Open fontawesomeSetup.js and add the icon you want - go to https://fontawesome.com/search?ic=free&o=r to find icons!

There are some instructions in the file too.

In your components, you will now be able to use icons. See examples in home.tsx or index.tsx for usage.

You can also use Ionicons in this boilerplate out of the box. There are some examples in index.tsx.

For any other icon libraries, you will need to run the install commands.

7. Using notes.txt

I've left a helpful .txt file which I personally use for development.

This contains styling structures, colour codes that I use often and my "to do" list.

Feel free to make use of this notetaking convention.

keywords:

react native, boilerplate, expo, firebase, typescript, starter, template, app development