Communication between React Native and WordPress

…or how to use WordPress REST API to communicate with a React Native application?

This is a part that I found really interesting as it made it possible to use WordPress as a kind of management system for the app.

In this Tutorial, we will create a new Post Type in WordPress and show the corresponding posts in our app.

To do so, you will need the plugin Custom Post Type UI, by WebDevStudios

As most of you will know, the REST API allows the developer to send or receive JSON objects and thus to communicate with WordPress.
The simplest call you can do using the REST API is the following:
https://YOUR-SITE.COM/wp-json/wp/v2/posts
Replace “YOUR-SITE.COM” with your domain name and you will see what I mean.

wp-json/wp/v2/posts is called an endpoint and allows you to retrieve all your posts in a JSON format.
The wonderful thing is, you can create your own endpoints and even better, you can create endpoints to modify your WordPress content!
Here we only look at creating an endpoint to retrieve information.

As I mentioned further above, we first want to create a new Post Type which information we will then display in our app.

Creating a new Post Type

1. Install the plugin Custom Post Type UI
2. Go to WP Dashboard > CPT UI
3. In the Add New Post Type start adding all the information for your new Post Type. Keep it simple
4. In the Settings section, put
   • Public = true
   • Publicly Queryable = false
   • Show UI = true
   • Show in Nav Menu = false
   • Show in REST API = true
   • REST API base Slug = <here, depending on your new post type> (I call it for our tutorial jemarea_post_type)
   • Exclude from Search = true
   • Rewrite = false
   • With Front = false
   • Supports : Title, Editor, Featured Image, Author
   • Build-in Taxonomies: Categories
5. Save!… and you should have your new Post Type

Now to the PHP part (this is fun!)

Create your Endpoint

Go to your theme’s functions.php file and add the following:

class jemarea_Rest_Server extends WP_REST_Controller {

        //The namespace and version for the REST SERVER
        var $jemarea_rest_namespace          = 'jemarea/v';
        var $jemarea_rest_version            = '1';

        // Now let's register the route to get to our endpoint
        public function register_jemarea_route() {

                $namespace      = $this->jemarea_rest_namespace 
                                . $this->jemarea_rest_version;
                $baseMyNewPosts = 'jemarea-posts';         // for our new posts
                // Define Route for "Get Weekly Tips"
                register_rest_route( $namespace, '/' . $baseMyNewPosts, array(
                        array(
                                'methods'         => WP_REST_Server::READABLE,
                                'callback'        => array( $this, 'jemarea_my_new_posts' )
                        )
                )
        );

// This will now handle the process of retrieving the posts
public function jemarea_my_new_posts( WP_REST_Request $request ){

        //Let Us use the helper methods to get the parameters
        $postType = 'jemarea_post_type'; // Post type defined earlier
        $id             = $request->get_param( 'id' );
        $args           = array();

        // I offer the opportunity here to even search for a single post
        if ( is_numeric($id) ) {
                $args = array( 'p' => $id, 'post_type' => $postType, 'post_status' => 'publish', 'posts_per_page' => -1 );
        }
        else {
                $args = array( 'post_type' => $postType, 'post_status' => 'publish', 'posts_per_page' => -1 ); // -1 for posts_per_page will allow to get ALL the posts and skip paging (which in our case could cut the number of posts returned)
        }

        $q = new WP_Query( $args );
        $posts = $q->get_posts();

        if( empty( $posts ) ){
                return null;
        }

        // In case you are using ACF (Advanced Custom Fields) in your posts and you would like to retrieve these as well, do it this way:
        foreach( $posts as $idx=>$post ) {
                $acf_field_1 = get_field('my_acf_field_1', $post->ID);
                $posts[$idx]->acf_key = $acf_field_1;
        }
        return $posts;
}

/**
 * REGISTER routes from the controller.
 */
function register_jemarea_controller() {
        $controller = new jemarea_Rest_Server();
        $controller->register_jemarea_route();
}
add_action( 'rest_api_init', 'register_jemarea_controller' );

Save your new functions and make sure there are no issues in the code by reloading your WordPress homepage.
Read again through the code and try to understand a little what is happening there (I have put some comments to help)

Otherwise, I really recommend to read throught the WordPress REST API documentation

https://developer.wordpress.org/rest-api/reference/

https://developer.wordpress.org/rest-api/extending-the-rest-api/

I leave you with that for now and will explain in a second Post how to call all this information from the React Native App 🙂