Build React Native WordPress App [Expo way] #10 : Remove and Render bookmark
Tags: reactnative
Published: 2020-02-20 17:40:00

---
title: Build React Native WordPress App [Expo way] #10 : Remove and Render bookmark
published: true
description: 
tags: react-native
cover_image: https://cdn-images-1.medium.com/max/3840/0*d5lPU-n-Vvye4tVK.png
series: Build React native Wordpress client app with Expo 
canonical_url: http://kriss.io/build-react-native-wordpress-app-expo-way-10-remove-and-render-bookmark/
---

![](https://cdn-images-1.medium.com/max/3840/0*7cmBHVSF8WtDxnGW.png)

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since we successfully build an app on the React Native CLI path., for the next step, we try to develop this app again but using Expo. We will discover the Expo ecosystem that makes our lives comfortable and help us avoid dealing with Native modules to 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, in-app purchase, and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the [React Native Templates](http://instamobile.io) from instamobile

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:

```
removeBookMark = async post_id => {
       this.setState({ 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.

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

#### Render Bookmark

Here, we are going to change the value of the `bookmark` state based on if the article is bookmarked or not. This `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:

```
renderBookMark = async post_id => {
       await AsyncStorage.getItem('bookmark').then(token => {
           const res = JSON.parse(token);
           let data = res.find(value => value === post_id);
           if (data !== null) {
                let data = res.find(value => value === post_id);
                return data == null
                    ? this.setState({ bookmark: false })
                    : this.setState({ 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 `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:

```
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/700/0*27HXpl038MkeEFpI.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.

#### Summary

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

---

_Originally published at [Kriss](https://kriss.io/build-react-native-wordpress-app-expo-way-10-remove-and-render-bookmark/)._