React Native CRUD with Firebase and Firestore | Tutorial | Code with Beto

In this video, I show you how to build a React Native app with Expo that performs CRUD operations (create, read, update, and delete) using Firebase and Firestore. We build a simple product manager with a name, price, and emoji, with data updating in real time. You also get features to mark products as sold and delete them.

This tutorial is a great fit if you want to integrate Firebase in React Native with Expo, work with a real-time database, and use screen navigation. I also add an emoji picker to give each product a visual identity and make the app easier to use.

What's inside

Creating and configuring an Expo React Native project
Setting up Firebase and Firestore, including project and database creation
Connecting the React Native app to Firebase with keys and configuration
Installing key dependencies: firebase, react-navigation, emoji-picker, and more
Using React Navigation for stack screens and navigation
Implementing an emoji picker to select product icons
CRUD operations: create products, show a real-time list, update sold status, and delete
Managing environment variables with Expo Constants to protect keys

Creating and configuring an Expo React Native project

To get started, I create a new Expo project with and pick the blank template. That gives us a clean base for Firebase and the app itself. Then I open the project in Visual Studio Code for a comfortable dev setup.

This step matters because it makes sure Expo is configured correctly, which simplifies dependencies and testing on real devices. Expo also gives you tools like Expo Go to preview the app quickly.

Setting up Firebase and Firestore, including project and database creation

In Firebase, I create a new project and enable Firestore. I choose "Start in test mode" so reads and writes are open during development, which speeds up testing without complex rules. I also pick the closest region to reduce latency.

This setup lets you move fast without permission issues while building. When the app is ready for production, you should tighten security rules to protect your data.

Connecting the React Native app to Firebase with keys and configuration

I register the app in Firebase as a web app to get the configuration keys. I copy those keys and use them to connect Firebase inside the Expo project. Do not expose these keys in public repos to avoid misuse or unauthorized access.

To protect credentials, I recommend environment variables and Expo Constants. That keeps keys private and out of source control. I also explain where to paste the config in your code.

I install Firebase version 9.6.7 to avoid compatibility issues that can show up in newer releases. I also add react-navigation and its dependencies for modular screen navigation. For emoji selection, I use , which is lightweight and easy to integrate.

I install Expo Constants for environment variables and Firebase key protection. Finally, I add dependencies like react-native-gesture-handler and react-native-screens so navigation and the picker work without errors.

I configure a stack navigator with React Navigation: a main screen for the product list and a second screen to create products. That keeps navigation modular and the UX straightforward.

I use navigation hooks and props to pass data between screens and refresh the UI when products are created or updated. This structure is standard in React Native apps and scales well.

Implementing an emoji picker to select product icons

I integrate an emoji picker so users can pick an emoji for each product. It appears on the create screen, and the selected emoji shows in the main list next to the name and price.

The picker is simple and improves the visual experience without cluttering the UI. I use for a friendly selector that adds personality without extra complexity.

CRUD operations: create products, show a real-time list, update sold status, and delete

I implement product creation with name, price, and emoji, stored in Firestore. The product list updates in real time with Firestore listeners, so changes appear instantly. I also add the ability to mark a product as sold, which updates its state and appearance.

You can delete products from the app with immediate updates in the database and UI. All of this uses Firestore APIs to create, read, update, and delete documents for a dynamic, reactive experience.

Managing environment variables with Expo Constants to protect keys

I use Expo Constants to store Firebase keys in environment variables instead of hardcoding them. That is important for security, especially if the project lives on a public GitHub repo.

With this approach, credentials stay private and the app reads them at runtime without leaking them in the bundle. I always recommend environment variables for sensitive configuration.

Resources

CourseReact Native course

React Native fundamentals and full app development, ideal for Firebase integration and navigation.

LessonAnimations and Gestures

Learn animations and gestures in React Native to improve user experience.

Let's connect!

React Native CRUD with Firebase and Firestore | Tutorial