Build WordPress App with React Native #17 : Fix react-native-render-html 
Tags: reactnativewordpre
Published: 2019-12-05 08:47:24

---
title: Build WordPress App with React Native #17 : Fix react-native-render-html 
published: true
date: 2019-12-04 18:53:32 UTC
tags: React native Wordpre
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/
cover_image: https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

 

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 Mobile Templates](https://www.instamobile.io/) from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

1. [Build WordPress Client App with React Native #1: Overview](https://kriss.io/build-wordpress-client-app-with-react-native-1-overview/)
2. [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/)
3. [Build WordPress Client App with React Native #3: Handle Navigation with React navigation](https://kriss.io/build-wordpress-client-app-with-react-native-3-handle-navigation-with-react-navigation/)
4. [Build WordPress Client App with React Native #4: Add Font Icon](https://kriss.io/build-wordpress-client-app-with-react-native-4-add-font-icon/)
5. [Build WordPress Client App with React Native #5 : Home Screen with React native paper](https://kriss.io/build-wordpress-client-app-with-react-native-5-using-react-native-paper/)
6. [Build WordPress Client App with React Native #6 : Using Html renderer and Moment](https://kriss.io/build-wordpress-client-app-with-react-native-6-using-html-renderer-and-moment/)
7. [Build WordPress Client App with React Native #7: Add pull to refresh and Infinite scroll](https://kriss.io/build-wordpress-client-app-with-react-native-7-add-pull-to-refresh-and-infinite-scroll/)
8. [Build WordPress Client App with React Native #8: Implementing SinglePost Screen](https://kriss.io/build-wordpress-client-app-with-react-native-8-implementing-singlepost-screen/)
9. [Build WordPress Client App with React Native #9: implement simple share](https://kriss.io/build-wordpress-client-app-with-react-native-9-implement-simple-share/)
10. [Build WordPress Client App with React Native #10: Setup and save bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-10-setup-and-save-bookmark/)
11. [Build WordPress Client App with React Native #11: Remove and Render Bookmark](https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/)
12. [Build WordPress Client App with React Native #12: Categories screen](https://kriss.io/build-wordpress-client-app-with-react-native-12-categories-screen/)
13. [Build WordPress Client App with React Native #13: Configuring firebase in contact screen](https://kriss.io/build-wordpress-client-app-with-react-native-13-configuring-firebase-in-contact-screen/)
14. [Build WordPress Client App with React Native #14 : Implementing Settings Screen](https://kriss.io/build-wordpress-client-app-with-react-native-14-implementing-settings-screen/)
15. [Build WordPress Client App with React Native #15 : Forwarding message to inbox with Cloud function](https://kriss.io/build-wordpress-client-app-with-react-native-15-forwarding-message-to-inbox-with-cloud-function/)
16. [Build WordPress Client App with React Native #16 : Dark theme](https://kriss.io/build-wordpress-client-app-with-react-native-16-dark-theme/)

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 from the **react-native-paper** package and pass the screens into it.

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` module fro the react-native-paper package as shown in the code snippet below:

```
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:

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

Next, we need to pass the `color` code to the `tagStyles` prop of the
`HTMLRender` component as shown in the code snippet below:
```javascript
    <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/’ folder. Then, we need to use the code from the following
cdode snippet into the Cards.js file:
```javascript

    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:
```javascript

    <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` component and used it inside the `FlatList` component. The `Card` component is set with all the necessary props to pass down to Card.js.

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

![](https://kriss.io/wp-content/uploads/2019/12/img_5de7ffa6c7703.png) ![](https://kriss.io/wp-content/uploads/2019/12/img_5de7ffb1736fd.png)

## Summary

In this chapter,  we learned how to use the `DarkTheme` component from the react-native-paper package in order to change our UI theme made using the components from this package to dark. By using `withtheme` component from the react-native-paper package,

The post [Build WordPress Client App with React Native #17 : Fix react-native-render-html to change theme](https://kriss.io/build-wordpress-client-app-with-react-native-17-fix-react-native-render-html-to-change-theme/) appeared first on [Kriss](https://kriss.io).