Building an Ecommerce Mobile App with React Native and WooCommerce

Prerequisites

Before you start, make sure you have the following:

• Node.js installed
• Postman installed
• A React Native development environment set up
• Working knowledge of React Native
• A fully set up WordPress blog with WooCommerce installed

Setting up WooCommerce in WordPress

To get started, navigate to your WordPress admin panel and install the WooCommerce plugin. Once installed, activate it and add new products to your store. You can also import a list of products from a CSV file.

Generating the WooCommerce REST API

Next, generate an API to consume your product data using React Native. Go to the WordPress sidebar and navigate to the WooCommerce settings. Click on the REST API setup and add a new key. This will generate keys that allow you to access your store outside of WordPress.

Example of generating REST API keys:

curl -X POST \
  https://yourwebsite.com/wp-json/wc/v3/products \
  -H 'Content-Type: application/json' \
  -d '{"consumer_key":"your_consumer_key","consumer_secret":"your_consumer_secret"}'

Testing the REST API

Before proceeding, test the API to ensure it’s working correctly. Use Postman to send a GET request to the API endpoint, and verify that you receive a response with a list of products.

Example of testing the REST API:

curl -X GET \
  https://yourwebsite.com/wp-json/wc/v3/products \
  -H 'Authorization: Bearer your_consumer_key'

Setting up a Node.js Microservice

To handle requests on non-SSL-enabled sites, create a basic Node.js microservice. This will fetch data from the WooCommerce store and provide it to the React Native app.

Example of setting up a Node.js microservice:

const express = require('express');
const axios = require('axios');

const app = express();

app.get('/products', async (req, res) => {
  try {
    const response = await axios.get('undefinedyourwebsite.com/wp-json/wc/v3/products');
    res.json(response.data);
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Error fetching products' });
  }
});

app.listen(3000, () => {
  console.log('Microservice listening on port 3000');
});

Setting up the React Native Application

Initialize a new React Native application using the npx react-native init command. Then, install the required dependencies, including Axios and React Native HTMLView.

Example of setting up the React Native application:

npx react-native init MyEcommerceApp
cd MyEcommerceApp
npm install axios react-native-htmlview

Implementing Drawer Navigation

Implement drawer navigation to display the app’s screens. Create a Drawer.Navigator component and define the screens, including the home screen and cart screen.

Example of implementing drawer navigation:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import CartScreen from './CartScreen';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    
      
        
        
      
    
  );
};

export default App;

Displaying Products

Create a Products component to display the list of products from the WooCommerce store. Use Axios to fetch the product data and render it in a ScrollView.

Example of displaying products:

import React, { useState, useEffect } from 'react';
import { ScrollView, Text } from 'react-native';
import axios from 'axios';

const Products = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    axios.get('undefinedyourwebsite.com/wp-json/wc/v3/products')
      .then(response => setProducts(response.data))
      .catch(error => console.error(error));
  }, []);

  return (
    
      {products.map(product => (
        {product.name}
      ))}
    
  );
};

export default Products;

Displaying and Removing Items from the Cart

Create a Cart component to display the items in the cart. Use Axios to fetch the cart data and render it in a ScrollView. Implement functionality to remove items from the cart.

Example of displaying and removing items from the cart:

import React, { useState, useEffect } from 'react';
import { ScrollView, Text, TouchableOpacity } from 'react-native';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('https://yourwebsite.com/wp-json/wc/v3/cart')
      .then(response => setCart(response.data))
      .catch(error => console.error(error));
  }, []);

  const handleRemoveItem = async (itemId) => {
    try {
      await axios.delete(`undefinedyourwebsite.com/wp-json/wc/v3/cart/${itemId}`);
      setCart(cart.filter(item => item.id !== itemId));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    
      {cart.map(item => (
         handleRemoveItem(item.id)}>
          {item.name}
        
      ))}
    
  );
};

export default Cart;

Showing a Specific Product

Create a Product component to display a specific product’s details. Use Axios to fetch the product data and render it in a ScrollView.

Example of showing a specific product:

import React, { useState, useEffect } from 'react';
import { ScrollView, Text } from 'react-native';
import axios from 'axios';

const Product = ({ productId }) => {
  const [product, setProduct] = useState({});

  useEffect(() => {
    axios.get(`https://yourwebsite.com/wp-json/wc/v3/products/${productId}`)
      .then(response => setProduct(response.data))
      .catch(error => console.error(error));
  }, [productId]);

  return (
    
      {product.name}
      {product.description}
    
  );
};

export default Product;