How To Build WordPress App with React Native Part #17: Fixing react-native-render-html

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the React Native App Templates from instamobile

Here, the components from the react-native-render-html do not change the theme automatically. So, we need to fix them as well. For that, we are going to provide the higher-order component named

withTheme 

First, we need to make imports to the Home.js file as shown in the code snippet below:

import {Headline,Card, withTheme} from 'react-native-paper';

Then, while exporting the Home screen Home component, we need to wrap it with the 

withTheme 

export default withTheme(Home);

Now, we will be able to access the theme variable in the screen props a shown in the code snippet below:

render() {
        const {colors} = this.props.theme;
        return (

Next, we need to pass the color code to the tagStyles prop of the

HTMLRender

   <HTMLRender
      html={item.excerpt.rendered}
      tagsStyles={{p: {color: colors}}}
    />

This process is required in other screens as well. So instead of repeating the same process again and again, we are going to implement the new component which can be shared in all the screens.

Implementing Card component

Here, we are going to implement the card component which represents the list of cards that displays the articles in the Home, Categorie and Bookmark screens.

For that, we need to create a new file called Cards.js in the

‘./src/components/’

 import React, {Component, useContext} from 'react';
    import {View, StyleSheet, TouchableOpacity} from 'react-native';
    import {Avatar, Button, Card, Title, Paragraph} from 'react-native-paper';
    import HTMLRender from 'react-native-render-html';
    import moment from 'moment';
    export default ({item, navigation, textColor}) => {
      return (
        <TouchableOpacity
          onPress={() =>
            navigation.navigate('SinglePost', {
              post_id: item.id,
            })
          }>
          <Card
            style={[
              {
                shadowOffset: {width: 5, height: 5},
                width: '90%',
                borderRadius: 12,
                alignSelf: 'center',
                marginBottom: 10,
              },
            ]}>
            <Card.Content>
              <Title>{item.title.rendered}</Title>
              <Paragraph>Published on {moment(item.date).fromNow()}</Paragraph>
            </Card.Content>
            <Card.Cover source={{uri: item.jetpack_featured_media_url}} />
            <Card.Content>
              <Card.Content>
                <HTMLRender
                  html={item.excerpt.rendered}
                  tagsStyles={{p: {color: textColor}}}
                />
              </Card.Content>
            </Card.Content>
          </Card>
        </TouchableOpacity>
      );
    };

Here, we have imported and implemented every component necessary to display the card interface in the screens. The steps we have undertaken are provided below:

• First, we receive the required prop parameters from the parent screens or components
• Second, we implement the UI of Card component as same that was previously shown in the Home and other screens
• We also configure the navigation from the react-navigation event passed down as prop
• We configure the 

  textColor

   from theme variable passed down as prop

Now, we need to import the Card.js file back to the Home.js file and use it to display the card templates in the Home screen. For that, we need to use the code from the following code snippet:

 <FlatList
              data={this.state.lastestpost}
              onRefresh={() => this.onRefresh()}
              refreshing={this.state.isFetching}
              onEndReached={this.handleLoadMore}
              onEndReachedThreshold={0.1}
              ListFooterComponent={this.renderFooter}
              renderItem={({item}) => (
                <Card
                  item={item}
                  navigation={this.props.navigation}
                  textColor={colors.text}
                />
              )}
              keyExtractor={item => item.id}
            />

Here, we have imported the Card.js file as a 

Card 

FlatList 

Card 

Hence, we will get the following result in the emulator screens:

Summary

In this chapter, we learned how to use the 

DarkTheme