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 . For that, we need to use the code from the following code snippet: removeBookMark removeBookMark = post_id => { .setState({ : }); bookmark = AsyncStorage.getItem( ).then( { res = .parse(token); res.filter( e !== post_id);
    }); AsyncStorage.setItem( , .stringify(bookmark));
  }; async this already_bookmark false const await 'bookmark' => token const JSON return => e await 'bookmark' JSON Here, we have changed the state of to false. Then, we have got the book item using the getItem function of the 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. already_bookmark AsyncStorage Render Bookmark Here, we are going to change the value of the state based on if the article is bookmarked or not. This state will handle the showing of bookmarked or not bookmarked template in the screen. For that, we need to create a new function called as shown in the code snippet below: already_bookmark already_bookmark SinglePost renderBookMark renderBookMark = post_id => { AsyncStorage.getItem( ).then( { res = .parse(token); data = res.find( value === post_id); data == ? .setState({ : })
        : .setState({ : });
    });
  }; async await 'bookmark' => token const JSON let => value return null this already_bookmark false this 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 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 state to true else we set it to false. getItem already_bookmark Then, we need to call this function on and set post id as a parameter which we get from the navigation props as shown in the code snippet below: componentDidMount() componentDidMount() { .fetchPost().then( { .renderBookMark( .props.navigation.getParam( ));
    });
   
  } this => () this this 'post_id' Hence, we will get the following result in the emulator screens: 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 file. Bookmark.js 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: ere, 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 and . The will store the bookmarked post that we fetch from the server. And, the state is for showing the loader. They are defined as shown in the code snippet below: bookmark_post isFetching bookmark_post isFetching { (props) { (props); .state = { : [], : ,
    };
  } class Bookmark extends Component constructor super this bookmark_post isFetching false Then, we need to import the AsyncStorage package in the file as shown in the code snippet below: Bookmark.js AsyncStorage ; import 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 as shown in the code snippet below: fetchBookMark fetchBookMark() { bookmark = AsyncStorage.getItem( ).then( { res = .parse(token); (res != ) { result = res.map( { + post_id;
        }); result.join( );
      } { ;
      }
    }); response = fetch( ); post = response.json(); .setState({ : post });
  } async let await 'bookmark' => token const JSON if null const => post_id return 'include[]=' return '&' else return null const await `https://kriss.io/wp-json/wp/v2/posts? ` ${bookmark} const await //this.setState({ posts: post }); this bookmark_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 state variable. bookmark_post Next, we are going to use the to display articles List just as in the Home Screen. The overall implementation is shown in the code snippet below: FlatList componentDidMount() { .fetchBookmark();
   
  }
render() { ( <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>
    );
  }
} this return < > 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 hook. componentDidMount Hence, we will get the following result in the emulator screen: Here, we have got the bookmarked post list on the Bookmark screen. But, when we switch tab, we will see that the doesn’t fire. This not good because the bookmark can update every time. Without refreshing the Bookmark screen, the bookmark posts won’t update. componentDidMount So, after brainstorming through this issue, we can get the solution in S . It recommends triggering then by update class. Now, we are going to make configuration as in the documentation. First, we need to make the following import: tackOverflow didFocusevent {withNavigationFocus} ; { import from 'react-navigation' class Bookmark extends Component Here, we imported from the . Then, we need to move export default to bottom with inside the withNavigationFocus function as shown in the code snippet below: withNavigationFocus react-navigation withNavigationFocus(Bookmark); export default And, for the listener event, we are going to use it in the as shown in the code snippet below: componentDidMount componentDidMount() { {navigation} = .props; .focusListener = navigation.addListener( , () => { .fetchBookmark();
    });
    
  } const this this 'didFocus' this Hence, we will get the following result in the emulator screens: 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 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. AsyncStorage This series intends to show how I build an 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 from instamobile React Native App Templates

Fetch

Super

How To Build WordPress Client App with React Native Part #12: Creating Categories Screen

How To Build WordPress App with React Native Part #10:  Save Bookmark Feature

visit more my tutorial

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Build WordPress Client App with React Native Part #11: Remove Bookmark Feature

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

10 Best React Native Chart Libraries

10 Web Development Boosting Node.js Libraries and Frameworks

10 Things You Didn't Know You Could Do With Google Keep

10 Best Low-Code And No-Code AI Application Development Platforms in 2022

10 Data Table Libraries for JavaScript

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps