React Native – How to create bookmark feature?

Add/ Remove bookmark process

1. When user taps on bookmark icon, add/ remove Bookmark data into/ from Redux state to enable/disable bookmark icon inside the app
2. Call API to register/ unregister Bookmark on server
3. Use Redux Saga/ Redux Thunk to get API response
4. Every time app is reopened, call API to get all registered Bookmarks from server
5. Add all bookmarks data returned by the API into Redux state
6. Continue with Step 1

Code structure

Create one component rendering selected/ unselected Bookmark icon basing on “props” only
This component handles “onPress” action when user taps on the Bookmark icon
– Redirect to Login screen if user is not logged in
– Add/ remove bookmark if user is logged in

Sometimes, screen needs to be updated in real time like this

componentWillMount () {
    const { navigation } = this.props
    this.subs = [
        navigation.addListener('didFocus', () => {
            this.refresh()
        })
    ]
}

componentWillUnmount () {
    if (this.subs === null) return
    this.subs.forEach((sub) => {
        sub.remove()
    })
}