Before I upgraded my React Native version to the latest, the react-native-render-html node module was working fine. After upgrading node.js, React Native, and Expo to the latest, it threw errors. At first I thought WordPress was the problem and I tried to solve it by coding a WordPress plugin to strip the HTML tags from the WordPress REST API output. But that left me with non-customizable text. I’ll share this solution first should you need to use it for a project. I have shared my solution last.

Modify output of WordPress REST API to remove HTML tags

First, a little of the React Native code that I’ve written to receive the WordPress plugin modified REST API text. This is code from the Stack Navigation screen for receiving params from the Blog screen. It’s not all of it.

return ( //The ? before the period, lets the data fill up then be ready before rendering it out.
        <ScrollView>
          {loaded ? (
          <> 
            {/* <Text>{postData.title?.rendered}</Text> */}
            <Text>{postData.title_plaintext}</Text>
            <Text>{postData.content_plaintext}</Text>
          </>
          ) : (
            <>
              <ActivityIndicator size="small" color="#1C97F7" />
            </>
          )}
        </ScrollView>
    )

And I couldn’t have created this WordPress plugin without this article leading me in the right direction although that code was six years old and I just needed to update a function name. This only seems to work as a plugin not as a must-use plugin and that’s safer in the long run. This code adds three new fields to the WordPress REST API JSON output and each result strips out the HTML code. You’ll need to define the plugin name and version at the top of the file in the comments before placing the code into the file.

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly



//Return title_plaintext for title.rendered
add_action( 'rest_api_init', function () {
	register_rest_field( 'post', 'title_plaintext', array(
		'get_callback' => function( $object, $field_name, $request ) {
			return strip_tags( html_entity_decode( $object['title']['rendered'] ) );
		},
	) );
} );


//Return content_plaintext for content.rendered
add_action( 'rest_api_init', function () {
	register_rest_field( 'post', 'content_plaintext', array(
		'get_callback' => function( $object, $field_name, $request ) {
			return strip_tags( html_entity_decode( $object['content']['rendered'] ) );
		},
	) );
} );

//Return excerpt_plaintext for excerpt.rendered
add_action( 'rest_api_init', function () {
	register_rest_field( 'post', 'excerpt_plaintext', array(
		'get_callback' => function( $object, $field_name, $request ) {
			return strip_tags( html_entity_decode( $object['excerpt']['rendered'] ) );
		},
	) );
} );

Use RSS feed instead of WordPress REST API

Another option is to build the blog screen on the React Native app as an RSS Reader by pulling posts using RSS and style each of the XML tags.

---

My solution

I decided this solution was best for me. I’m pulling in the posts from the WordPress REST API then using react-native-render-html to style the output. The node module takes a string that WordPress REST API is already providing as item.excerpt.rendered. Here’s how to include that in your code.

//Blog.js - DrawerNavigation Screen
import RenderHtml from 'react-native-render-html';

<RenderHtml source={{html: item.excerpt.rendered}} contentWidth={width} ignoreDomNode={ignoreAnchorTag} tagsStyles={tagsStyles} />



//Posts.js - StackNavigation Screen
import RenderHtml from 'react-native-render-html';

<RenderHtml source={{html: postData.title.rendered}} contentWidth={width} />