Build WordPress App with React Native #11: Remove and Render Bookmark
Tags: reactnativewordpre
Published: 2019-12-05 08:00:42

---
title: Build WordPress App with React Native #11: Remove and Render Bookmark
published: true
date: 2019-12-04 15:54:29 UTC
tags: React native Wordpre
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-11-remove-and-render-bookmark/
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) 

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. [React Native Plant App UI #10 : Categories Section in Browse Screen](https://kriss.io/react-native-plant-app-ui-9-categories-section-in-browse-screen/)

Here, we are going to implement the removing of the bookmark from the articles. This case is simpler than saving the bookmarks. Here, we are going to define a function called `removeBookMark`. For that, we need to use the code from the following code snippet:

```javascriptv
    removeBookMark = async post_id => {
        this.setState({already_bookmark: false});
        const bookmark = await AsyncStorage.getItem('bookmark').then(token => {
          const res = JSON.parse(token);
          return res.filter(e => e !== post_id);
        });
        await AsyncStorage.setItem('bookmark', JSON.stringify(bookmark));
      };
```
Here, we have changed the state of `already_bookmark` to false. Then, we have
got the book item using the `getItem` function of the `AsyncStorage` module.
Then, we parse the response to JSON and store it in res constant. Then using the
filter HOC we remove the post id from the `bookmark`. Then, we save the
remaining value in the `bookmark` array using `setItem` again.

#### Render Bookmark

Here, we are going to change the value of the `already_bookmark` state based on
if the article is bookmarked or not. This `already_bookmark` state will handle
the showing of bookmarked or not bookmarked template in the SinglePost screen.
For that, we need to create a new function called `renderBookMark` as shown in
the code snippet below:
```javascript
    renderBookMark = async post_id => {
        await AsyncStorage.getItem('bookmark').then(token => {
          const res = JSON.parse(token);
          let data = res.find(value => value === post_id);
          return data == null
            ? this.setState({already_bookmark: false})
            : this.setState({already_bookmark: true});
        });
      };
```
Here, the function takes post id as a parameter. Then, by using the post id, we
get the bookmark ids using the `getItem` function of `AsyncStorage`. After we
get the values, we parse it and then check if the articles post id is present in
the `bookmark` array or not. If present, we set the `already_bookmark` state to
true else we set it to false.

Then, we need to call this function on `componentDidMount()` and set post id as
a parameter which we get from the navigation props as shown in the code snippet
below:
```javascript
    componentDidMount() {
        this.fetchPost().then(()=>{
           this.renderBookMark(this.props.navigation.getParam('post_id'));
        });
       
      }
```
Hence, we will get the following result in the emulator screens:

![](https://cdn-images-1.medium.com/max/800/0*Ubvvz082HsZu_aeL.png)

![](https://cdn-images-1.medium.com/max/800/0*xWvlQbT47XQQJEhX.png)

As we can see, we have successfully implemented the bookmark feature in the
SinglePost screen. Now, we are able to bookmark the articles. But, we need to
show the bookmarked post somewhere as well. We are going to do that in the
Bookmark screen in the Bookmark.js file.

#### Bookmark index screen

Here, we are going to implement the Bookmark Screen to display all the
bookmarked articles. We have already set up the navigation to Bookmark screen in
our bottom tab navigator. Hence, we can see the Bookmarks in the emulator
screens below:

![](https://cdn-images-1.medium.com/max/800/0*zJrWE7SmjQR2eFrS.png)

![](https://cdn-images-1.medium.com/max/800/0*V8GSgysAj-qi6sOp.png)

Here, we are going to show the posts which are going to be similar to that of
the Home Screen. We are going to fetch the bookmarked posts from the server and
display them as a list.

But first, we need to define new state variables called `bookmark_post` and
`isFetching`. The `bookmark_post `will store the bookmarked post that we fetch
from the server. And, the `isFetching` state is for showing the loader. They are
defined as shown in the code snippet below:
```javascript
    class Bookmark extends Component {
      constructor(props) {
        super(props);
        this.state = {
          bookmark_post: [],
          isFetching: false,
        };
      }
```
Then, we need to import the AsyncStorage package in the Bookmark.js file as
shown in the code snippet below:

`import AsyncStorage from '@react-native-community/async-storage';`

Then, we need to fetch the bookmarked posts from the server. For that, we need
to define a new function called `fetchBookMark` as shown in the code snippet
below:
```javascript
    async fetchBookMark() {
        let bookmark = await AsyncStorage.getItem('bookmark').then(token => {
          const res = JSON.parse(token);
          if (res != null) {
            const result = res.map(post_id => {
              return 'include[]=' + post_id;
            });
            return result.join('&');
          } else {
            return null;
          }
        });
        const response = await fetch(
          `https://kriss.io/wp-json/wp/v2/posts?${bookmark}`
        );
        const post = await response.json();
        //this.setState({ posts: post });
        this.setState({ bookmark_post: post });
      }
```
Here first, we get the bookmark data from `AsyncStorage` then we map all post id
to build query string match on WordPress API. Then, we request to WordPress API
using `fetch` function and get the response of the bookmarked post. We parse the
response as JSON and then set it to the `bookmark_post `state variable.

Next, we are going to use the `FlatList` to display articles List just as in the
Home Screen. The overall implementation is shown in the code snippet below:
```javascript
    componentDidMount() {
        
          this.fetchBookmark();
       
      }
    render() {
        return (
          <View>
            <Headline style={{marginLeft: 30}}>Bookmark Post</Headline>
            <FlatList
              data={this.state.bookmark_post}
              renderItem={({item}) => (
                <TouchableOpacity
                  onPress={() =>
                    this.props.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} />
                      </Card.Content>
                    </Card.Content>
                  </Card>
                </TouchableOpacity>
              )}
              keyExtractor={item => item.id}
            />
          </View>
        );
      }
    }
```
We need to remember to make the imports just as in the Home screen. And, we need
to call the fetch function in the `componentDidMount` hook.

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

![](https://cdn-images-1.medium.com/max/800/0*eEv9mlf2Ga2-4J5n.png)

![](https://cdn-images-1.medium.com/max/800/0*uv_MjI0HWZrUa1MY.png)

Here, we have got the bookmarked post list on the Bookmark screen. But, when we
switch tab, we will see that the `componentDidMount` doesn't fire. This not good
because the bookmark can update every time. Without refreshing the Bookmark
screen, the bookmark posts won't update.

So, after brainstorming through this issue, we can get the solution in
S[tackOverflow](https://reactnavigation.org/docs/en/function-after-focusing-screen.html).
It recommends triggering `didFocus`event then by update class. Now, we are going
to make configuration as in the documentation. First, we need to make the
following import:
```javascript
    import {withNavigationFocus} from 'react-navigation';
    class Bookmark extends Component {
```
Here, we imported `withNavigationFocus` from the react-navigation. Then, we need
to move export default to bottom with inside the `withNavigationFocus` function
as shown in the code snippet below:

    export default withNavigationFocus(Bookmark);

And, for the listener event, we are going to use it in the `componentDidMount`
as shown in the code snippet below:
```javascript
    componentDidMount() {
        const {navigation} = this.props;
        this.focusListener = navigation.addListener('didFocus', () => {
          this.fetchBookmark();
        });
        
      }
```
Hence, we will get the following result in the emulator screens:

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

As we can see, now the Bookmark screen fetches the bookmarks every time we navigate to it.

## Summary

In this chapter, we learned how to remove and render the bookmark. Then, making use of the `AsyncStorage` and `fetch` method, we successfully fetched the bookmarked post to be displayed on the Bookmark screen. Lastly, we learned how to re-fetch the bookmarked post every time we enter the Bookmark screen so that new bookmarks show up.

 

The post [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/) appeared first on [Kriss](https://kriss.io).