Building Mobile Apps Using React Native And WordPress

For any web and app developers, React Native and WordPress happen to be the most popular technologies. These are some of the most common tools for building websites and mobile apps. Now, these two technologies can deliver a great combined output as WordPress backend can provide blog-like behavior while React Native provides cross-platform user experience across iOS and Android. By combining these two technologies, a superb and powerful app can be created.  

Let’s ask why we should use WordPress? Well, for many beginners it appears as a CMS solution that people prefer for a wide array of usage. Moreover, it comes with an integrated REST API that can easily fetch, edit, and delete app data just by using a simple and effective HTTP request.

As prerequisites, the developers need to have a working WordPress domain in hand. This will help in displaying some content within the app. The developers also need to build a React Native app with react-native-config and react-native-base64. While the react-native-config will help storing the API-URL and credentials react-native-base64 will help you the data on WordPress directly through the app.

WordPress REST API

Way back in 2016, WordPress released the long-awaited REST API to its core and provided solutions to facilitate decoupled backends. This helps existing WordPress and WooCommerce websites to deliver the native app-like user experience. If you want to enjoy the core WordPress benefits while syncing user profiles across the websites and native apps, you can empower a React Native app with WordPress backend.

How to Build a React Native App with a WordPress Backend?

Here through the length of this blog post, we are going to explain the ways to utilize the WordPress development skill for building a mobile app based on React Native. To understand the guidelines you need to have a fair understanding of the different WordPress APIs, the basics of React Native, a ready to use WordPress development server and access to both iOS and Android devices to test the app using Expo.

First step: Fetching Data from Rest API

This is the very first step in which you need to add your API-URL to your .env file in the React Native app. Make sure that the WordPress REST API is now located right in the /wp-json/v2/ directory of the domain.

After this, we need to create a file called api.js that will accommodate all the API-related functions that are going to be written. You can place it anywhere as per your wish but for the purpose of this tutorial, you need to place the file in the /src/lib directory.

The first function will be utilized for fetching the API data. It involves an argument that shows the entire route to the ultimate endpoint where we are going to reach. To fetch the API data you can use the Fetch API you can get in the React Native repository.

Now, you need to create a React Native Component in src/containers/Posts that can fetch all the posts published in WordPress website. But since you may not want to create an overload of posts loaded at a given time you can direct the component to load only 10 posts at a given time and load more posts as and when we scroll down the posts.

The exact route for fetching WordPress posts is /posts and additionally, we can use arguments like per page and page in the API request. There are also several other arguments that you can use.

Now for the purpose of rendering posts, you can use FlatList and because of this, we can create an onScroll function that can be used with a custom isCloseToBottom function for detecting whether we need to load more posts or not. Every rendered item is wrapped inside a TouchableOpacity that after being pressed can navigate you to the Post container having the WordPress post id. Now, this post id can be used inside the container for rendering any particular post.

Second Step: Transferring Data to WordPress Through API

Do you also want your app to send data to WordPress through the API? This can be done through community interaction or the admin functionality of the app. This is possible as WordPress provides support for POST-request for creating and updating data on the WordPress database.

For this to happen, we can use the Basic-Auth handler by WordPress for authentication. This helps us to send a post request comprising the base64 encoded username and password of the account. To allow this to happen, you should have a service account on your WordPress website with the capabilities of editing or adding content.

It is ideal to use OAuth or similar authentication methods as the Basic-Auth needs you to send base64 encoded credentials for every request. It is recommended that whenever you have service account setup, you mention the credentials in the .env file.

Now in the api.js file, you can create a function capable of updating and adding data by using POST-requests. Here you need to encode the service account’s username and password and after that send the same with the Authorization header for making the request. We can do this with the help of react-native-base64. In this respect, you need to note that the function takes two arguments, a route, and the data that we want to update and add.

After completing all these steps, now you can easily build a simple blog type React Native based app with WordPress backend running behind it. This also allows making more advanced queries by using the WordPress API. For this, you can take a closer look into the API documentation of WordPress.

Conclusion

WordPress is the world’s leading CMS solution for blogging and content publication. On the other hand, React Native is the most powerful solution for building mobile apps. As they can be utilized for turning blogs and content-rich websites into mobile apps, this development approach is likely to be popular through the years to come.

Author Bio:

Olivia is the senior developer at CMARIX TechnoLabs Pvt. Ltd., a react native development company with years of experience. She loves to write on react native technical blogs and She believes in spreading tech trends. She is an avid reader and loves thinking out of the box to promote new technologies.