We are going to learn how to bookmark the articles so that we can easily access them in our Bookmark screen later. The process is simple. We are going to save post id to Asyncstorage from the SinglePost screen and then fetch the articles on the bookmark screen. Here, we are going to add the bookmark icon to the SinglePost screen and configure its functionality. But first, we need to define the state variable called in the file in order to handle the showing of bookmark enabled or disabled icon. For that, we need to use the code from the following code snippet: already_bookmark SinglePost.js (props) { (props); .state = { : , : [], : ,
        };
      } constructor super this isloading true post already_bookmark false Then, we need to add the Bookmark icon to the screen. For that, we need to use the code from the following code snippet: <List.Item
                 title={ }
                 right={props => { ( .state.already_bookmark == ) { ( <FontAwesome name="bookmark" size={30} />
                       </TouchableOpacity> <TouchableOpacity
                         onPress={() => this.saveBookMark(post[0].id)}>
                         <FontAwesome name="bookmark-o" size={30} />
                       </TouchableOpacity>
                     );
                   }
                 }}
               /> `Published on ` ${moment(
                   post[ ].date, ,
                 ).fromNow()} 0 'YYYYMMDD' if this true return this.removeBookMark(post[0].id)}> < = => TouchableOpacity onPress {() );
                   } else {
                     return ( Here, we have displayed the bookmark icon template based on the state. The template has the component that wraps the component. In the events we have called the and function. These functions are use to bookmark the article or remove the bookmark from the article. already_bookmark TouchableOpacity FontAwesome onPress removeBookMark saveBookMark Hence, we will get the following result in the emulator screen: Next, we need to use the AsyncStorage component from the package. For that, we need to use install the package first. In order to install the package we need to run the command from the following code snippet: @react-native-community/async-storage yarn add @react-native-community/ -storage async We can get the information as well as the installation instruction from the package . documentation Now, we need to import this package into our Bookmark.js file as shown in the code snippet below: AsyncStorage ; import from '@react-native-community/async-storage' Save Bookmark Here, we are going to implement the function. For that, we need to define the function first as shown in the code snippet below: saveBookMark saveBookMark = post_id => { .setState({ : });
      }; async this already_bookmark true Here, we have taken the parameter as post id with asynchronous execution of the function. Then, we have set the state variable to true. already_bookmark Now, we need to save the post id of the bookmarked post to the . For that, we need to use the code from the following code snippet: AsyncStorage saveBookMark = post_id => { .setState({ : }); bookmark = [];
             bookmark.push(post_id);
             AsyncStorage.setItem( , .stringify(bookmark));

     }; async this already_bookmark true let 'bookmark' JSON Here, we have defined a new array called bookmark and pushed the post id value into it. Then, we have made use of the function of the to save the bookmark. We have saved the bookmark array as a JSON value. setItem AsyncStorage Next, we need to prevent the duplicate bookmarks of the same article. For that, we need to use the code from the following code snippet: saveBookMark = post_id => { .setState({ : }); AsyncStorage.getItem( ).then( { res = .parse(token); (res !== ) { data = res.find( value === post_id); (data == ) {
              res.push(post_id);
              AsyncStorage.setItem( , .stringify(res));
            }
          } { bookmark = [];
            bookmark.push(post_id);
             AsyncStorage.setItem( , .stringify(bookmark));
          }
        });
      }; async this already_bookmark true await 'bookmark' => token const JSON if null let => value if null 'bookmark' JSON else let 'bookmark' JSON Here, we get the bookmark data and then parse it to an array called res. Then, if we have the bookmark data, we search the post_id for the current post. If the post does not exist in the bookmark, then we can add the bookmark to it and prevent duplicate bookmarks. The third case is for the users who have not made any bookmarks yet. Hence, we can normally apply and save the bookmarks using the function. saveBookMark Summary In this chapter, we learned how to implement the UI and functionality of the bookmark button using the module. Using it, we implemented the function to save method 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

How To Build WordPress App with React Native Part #10: Save 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