How to Build an E-commerce App in React Native with Firebase
Tags: reactnative, react, ecommerce, firebase
Published: 2023-07-20 04:38:03

---
title: How to Build an E-commerce App in React Native with Firebase
published: true
description: 
tags: reactnative, react, ecommerce, firebase
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-20 04:36 +0000
---

This tutorial is intended for developers interested in building an e-commerce application using React Native and Firebase.

## Prerequisites:
- Basic understanding of JavaScript
- Familiarity with React Native
- Node.js and npm/yarn installed on your system
- An active Firebase project

## Getting Started

Firstly, you will need to set up a new React Native project.

If you don't have the React Native command line interface, install it globally with npm:

```bash
npm install -g react-native-cli
```

Then, create a new React Native project:

```bash
react-native init ecommerceApp
```

Navigate into your new project folder:

```bash
cd ecommerceApp
```

I recommend using [VSCode for React Native](https://instamobile.io/mobile-tools/vscode-react-native/) development, so get it if you don't have it yet.

## Setting up Firebase

Next, install Firebase in your project:

```bash
npm install firebase
```

In your Firebase console, go to "Project settings", under the gear icon, then go to "Your apps", add a new web app and copy your Firebase config object.

In your project, create a new file called `Firebase.js` in your root directory and paste your config object:

```jsx
import firebase from 'firebase';

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  databaseURL: "your-database-url",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase;
```

Replace the placeholders with your Firebase details.

## Creating the App Navigation

We'll use React Navigation for routing. Install it using the following command:

```bash
npm install @react-navigation/native @react-navigation/stack
```

We're going to create three screens: Home, Product Details and Cart.

Let's create a new directory called `screens` and inside it, create three files: `Home.js`, `ProductDetails.js`, and `Cart.js`.

Your directory should look like this:

```
ecommerceApp/
  screens/
    Home.js
    ProductDetails.js
    Cart.js
  App.js
  Firebase.js
```

## Building the Home Screen

In `Home.js`, we're going to fetch the products from Firebase and display them:

```jsx
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import firebase from '../Firebase';

const Home = ({ navigation }) => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const db = firebase.firestore();
      const data = await db.collection("products").get();
      setProducts(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    };

    fetchProducts();
  }, []);

  return (
    <View>
      <FlatList 
        data={products}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => navigation.navigate('ProductDetails', { item })}>
            <Text>{item.name}</Text>
            <Text>{item.price}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

export default Home;
```

## Building the Product Details Screen

In `ProductDetails.js`, we're going to display the product details and provide an option to add the product to the cart.

```jsx
import React from 'react';
import { View, Text, Button } from 'react-native';
import firebase from '../Firebase';

const ProductDetails = ({ route, navigation }) => {
  const { item } = route.params;

  const addToCart = async () => {
    const db = firebase.firestore();
    await db.collection("cart").add(item);
    navigation.navigate('Cart');
  };

  return (
    <View>
      <Text>{item.name}</Text>
      <Text>{item.description}</Text>
      <Text>{item.price}</Text>
      <Button title="Add to Cart" onPress={addToCart} />
    </View>
  );
};

export default ProductDetails;
```

## Building the Cart Screen

In `Cart.js`, we're going to fetch the products from the cart collection and display them:

```jsx
import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import firebase from '../Firebase';

const Cart = () => {
  const [cart, setCart] = useState([]);

  useEffect(() => {
    const fetchCart = async () => {
      const db = firebase.firestore();
      const data = await db.collection("cart").get();
      setCart(data.docs.map(doc => ({ ...doc.data(), id: doc.id })));
    };

    fetchCart();
  }, []);

  return (
    <View>
      <FlatList 
        data={cart}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View>
            <Text>{item.name}</Text>
            <Text>{item.price}</Text>
          </View>
        )}
      />
    </View>
  );
};

export default Cart;
```

Finally, update the `App.js` file to include the navigation:

```jsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './screens/Home';
import ProductDetails from './screens/ProductDetails';
import Cart from './screens/Cart';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="ProductDetails" component={ProductDetails} />
        <Stack.Screen name="Cart" component={Cart} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
```

You now have a basic e-commerce app. You can run the app using:

```bash
react-native run-android
```

or

```bash
react-native run-ios
```

Remember, this is a very basic e-commerce app. For a production-ready app, you'll need to add user authentication, error handling, a checkout process, and more. You can check out this amazing fully functional [React Native E-commerce App](https://instamobile.io/app-templates/react-native-ecommerce-app-template/) if you want to save a ton of time. Happy coding!

Find more articles at [Devbrite Medium](https://medium.com/@devbrite).