Building Mobile Apps with React Native and WordPress REST API: A Step-by-Step Guide

Introduction

In today’s mobile-first world, extending your WordPress website to a native mobile app can significantly boost user engagement. With React Native and WordPress REST API, you can create powerful cross-platform mobile applications that seamlessly connect with your WordPress backend. This guide will walk you through the process of leveraging WordPress as a headless CMS for your React Native app.

Why WordPress REST API with React Native?

WordPress REST API turns your WordPress site into a powerful data source, while React Native enables you to build native iOS and Android apps using JavaScript. Together, they offer:

• Single source of truth – Manage content once in WordPress, display everywhere
• Cost-effective development – Build for both platforms with one codebase
• Familiar ecosystem – Use WordPress admin interface you already know
• Real-time updates – Push content changes instantly to your app

Prerequisites

Before we begin, ensure you have:

• A WordPress website (version 4.7+)
• Node.js and npm installed
• React Native development environment set up
• Basic knowledge of JavaScript and React

Step 1: Enable WordPress REST API

First, ensure your WordPress site has REST API enabled (it is by default in recent versions). You might want to install plugins for enhanced functionality:

// Recommended plugins:
// - JWT Authentication for WP REST API (for user authentication)
// - ACF to REST API (if using Advanced Custom Fields)
// - Custom Post Type UI (for custom content types)

Step 2: Explore Your WordPress API Endpoints

Visit yourdomain.com/wp-json/wp/v2/ to see available endpoints. Common endpoints include:

• /posts – Blog posts
• /pages – Static pages
• /categories – Post categories
• /media – Images and files
• /users – Author information

# Create a new React Native project
npx react-native init WordPressApp

# Navigate to project directory
cd WordPressApp

# Install necessary dependencies
npm install axios @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

Step 4: Create API Service Layer

// services/wordpressApi.js
import axios from 'axios';

const BASE_URL = 'https://your-wordpress-site.com/wp-json/wp/v2';

const wordpressApi = axios.create({
  baseURL: BASE_URL,
  timeout: 10000,
});

export const getPosts = async (page = 1, perPage = 10) => {
  try {
    const response = await wordpressApi.get('/posts', {
      params: {
        page,
        per_page: perPage,
        _embed: true, // This includes featured images and author info
      },
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw error;
  }
};

export const getPostById = async (id) => {
  try {
    const response = await wordpressApi.get(`/posts/${id}`, {
      params: { _embed: true },
    });
    return response.data;
  } catch (error) {
    console.error('Error fetching post:', error);
    throw error;
  }
};

export const getCategories = async () => {
  try {
    const response = await wordpressApi.get('/categories');
    return response.data;
  } catch (error) {
    console.error('Error fetching categories:', error);
    throw error;
  }
};

export const searchPosts = async (searchTerm) => {
  try {
    const response = await wordpressApi.get('/posts', {
      params: {
        search: searchTerm,
        _embed: true,
      },
    });
    return response.data;
  } catch (error) {
    console.error('Error searching posts:', error);
    throw error;
  }
};

Step 5: Create Main App Component with Navigation

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import PostDetailScreen from './screens/PostDetailScreen';
import CategoryScreen from './screens/CategoryScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen}
          options={{ title: 'Latest Posts' }}
        />
        <Stack.Screen 
          name="PostDetail" 
          component={PostDetailScreen}
          options={{ title: 'Post Details' }}
        />
        <Stack.Screen 
          name="Category" 
          component={CategoryScreen}
          options={{ title: 'Category' }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;