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:
npm install -g react-native-cli
Then, create a new React Native project:
react-native init ecommerceApp
Navigate into your new project folder:
cd ecommerceApp
I recommend using VSCode for React Native development, so get it if you don't have it yet.
Setting up Firebase
Next, install Firebase in your project:
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:
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:
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:
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.
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:
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:
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:
react-native run-android
or
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 if you want to save a ton of time. Happy coding!
Find more articles at Devbrite Medium.
Top comments (1)
Great article! Creating an e-commerce app with React Native is a smart choice for building fast, cross-platform apps. The step-by-step guide does a great job of explaining how to integrate essential features like product listing, cart management, and payment systems. React Native's flexibility and performance make it ideal for scaling e-commerce apps. How do you handle performance optimization when scaling such apps for larger audiences?
Looking to build a high-performance e-commerce app with React Native? Dive into this detailed guide that covers everything from architecture to optimisation techniques for a seamless shopping experience. Click here to get started: Build High-Performance E-commerce App with React Native
Some comments may only be visible to logged-in visitors. Sign in to view all comments.