Bookmark action in React Native Using FlatList
tl;dr
Demonstrate fetching data(500 items) and put into a FlatList and bookmark selected items.
Outline
- Displaying a list of items and fetch the source from HackerNews API
- Component that implement shouldComponentUpdate
- Function to handling bookmark action (Saving the selected items)
- Enhance bookmark action using Set from ES6
What we use in this tutorial
- React Native Element
- PureComponent (For FlatList optimization)
- React Lifecycle (componentDidMount, componentDidUpdate and shouldComponentUpdate)
- Set in ES6
Fetching data source and display in FlatList
First, let’s create file called StoryList.js and a simple class component that extends PureComponent to optimize <FlatList />.
import React, { PureComponent } from "react";
// Flow-type
type Props = {};
type State = {
stories: Array<number>,
bookmarks: Array<number>,
selectedIndex: number,
};
// For ButtonGroups
const storyTypes = [
{ name: "New", path: "newstories.json" },
{ name: "Top", path: "topstories.json" },
{ name: "Best", path: "beststories.json" },
];
// Default story type
const NEW_STORIES = 0;
class StoryList extends PureComponent<Props, State> {
constructor(props: Props) {
super(props);
// Initialize default value for state
// Separate data source and bookmarks, instead modify the data source
this.state = {
stories: [],
bookmarks: [],
selectedIndex: NEW_STORIES,
};
}
render() {
const { bookmarks, stories, selectedIndex } = this.state;
// render our view, now it return null
return null;
}
}
export default StoryList;Now, we will implement the React lifecycle – componentDidMount. Before going deeper, let has a function to handle the data fetching first.
fetchStories()
fetchStories = async (storyType: string) => {
try {
const response = await fetch(
`https://hacker-news.firebaseio.com/v0/${storyType}?print=pretty`,
).then(res => res.json());
if (response) {
this.setState({
stories: [...response],
});
}
} catch (error) {
// handling error
}
};componentDidMount()
// When a component mounted, it will execute this lifecycle for once
componentDidMount() {
const { selectedIndex } = this.state;
this.fetchStories(storyTypes[selectedIndex].path);
}Import the following from respectively library.
import { FlatList } from "react-native";
import { ButtonGroup, ListItem, Icon } from "react-native-elements";render() – render the UI. Modify the render() method inside the class to the following. this.renderNews has error ? No worry will implement it next.
render() {
const { bookmarks, stories, selectedIndex } = this.state;
return (
<>
<ButtonGroup
buttons={storyTypes.map(storyType => storyType.name)}
selectedIndex={selectedIndex}
onPress={(index: number) => {
this.setState({
selectedIndex: index,
});
}}
/>
{bookmarks.length > 0 ? (
<ListItem
title="Bookmarks"
rightIcon={<Icon name="keyboard-arrow-right" />}
containerStyle={{
padding: 10,
marginRight: 15,
marginLeft: 15,
backgroundColor: "rgba(200, 200, 200, 0.1)",
}}
badge={{ value: bookmarks.length }}
/>
) : null}
<FlatList
data={stories}
renderItem={this.renderNews}
keyExtractor={(item, index) => `list-${index}-${item}`}
initialNumToRender={10}
extraData={bookmarks} // this is needed to trigger re-rendering
/>
</>
);
}renderNews()
renderNews = ({ item }: { item: number }) => {
const { bookmarks } = this.state;
return (
<NewsItem
id={item}
// We will find the id that being bookmark, through below method
isSelected={!!bookmarks?.find((bookmark: number) => bookmark === item)}
onPressBookmark={this.handleOnPressBookmark(item)}
onPressStory={details => {
console.log(details);
}}
/>
);
};NewsItem – Implement shouldComponentUpdate
Create a new file called NewsItem and a class component.
import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Card, ListItem, Icon } from "react-native-elements";
import moment from "moment";
const style = StyleSheet.create({
cardHeader: {
alignItems: "center",
justifyContent: "space-between",
flexDirection: "row",
paddingBottom: 10,
},
});
type Props = {
id: number,
isSelected: boolean,
onPressBookmark: () => void,
onPressStory: (details: Object) => void,
};
type State = {
details: Object,
};
class NewsItem extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
details: {},
};
}
componentDidMount() {
const { id } = this.props;
this.fetchStoryDetails(id);
}
shouldComponentUpdate(prevProps: Props, prevState: State) {
const { isSelected } = this.props;
const { details } = this.state;
return details !== prevState.details || isSelected !== prevProps.isSelected;
}
fetchStoryDetails = async (id: number) => {
try {
const response = await fetch(
`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`,
).then(res => res.json());
if (response) {
this.setState({ details: { ...response } });
}
} catch (error) {
// handling error
}
};
handleOnPressBookmark = () => {
const { onPressBookmark } = this.props;
if (onPressBookmark) {
onPressBookmark();
}
};
handleOnPressStory = () => {
const { onPressStory } = this.props;
const { details } = this.state;
if (onPressStory) {
onPressStory(details);
}
};
render() {
const { details } = this.state;
const { isSelected } = this.props;
return (
<Card>
<View style={style.cardHeader}>
<Text>{`${moment.unix(details.time).format("DD MMM YYYY")}`}</Text>
{isSelected ? (
<Icon name="bookmark" onPress={this.handleOnPressBookmark} />
) : (
<Icon name="bookmark-border" onPress={this.handleOnPressBookmark} />
)}
</View>
<TouchableOpacity onPress={this.handleOnPressStory}>
<ListItem
topDivider
title={details.title}
subtitle={`By ${details.by}`}
/>
</TouchableOpacity>
</Card>
);
}
}
export default NewsItem;
Take a closer look at the shouldComponentUpdate. shouldComponentUpdate determines whether a component should re-render or not.
// By default this lifecycle will return true
shouldComponentUpdate(prevProps: Props, prevState: State) {
const { isSelected } = this.props;
const { details } = this.state;
// Now, we restrict the condition to only re-render
// when the following value had changed
return details !== prevState.details || isSelected !== prevProps.isSelected;
}Implement function for bookmark action
Next, go back to StoryList.js file. Then, implement the function for the bookmark action.
// import the NewsItem component
import NewsItem from "NewsItem";
class StoryList extends PureComponent {
...
handleOnPressBookmark = (id: number) => {
return () => {
const { bookmarks } = this.state;
const tmpBookmarks = [...bookmarks]; // clone the array
// Checking whether the selected "id" exist in the bookmarks list
if (tmpBookmarks.find((tmpBookmark: number) => tmpBookmark === id)) {
// Remove the selected "id" if it existed
const removeBookmark = tmpBookmarks.filter(
(tmpBookmark: number) => tmpBookmark !== id,
);
// update state
this.setState({
bookmarks: [...removeBookmark],
});
} else {
// otherwise, push it to the bookmarks list
tmpBookmarks.push(id);
this.setState({
bookmarks: [...tmpBookmarks],
});
}
};
};
...
}Below is the sample. For this demo. (Forget about the SearchBar, is not included in this tutorial)
Enhance the bookmark action by using Set in ES 6
Now, let us refactor the handleOnPressBookmark() as below.
constructor() {
this.state = {
...,
bookmarks: new Set([]) // initialize to Set instead of Array
}
}
handleOnPressBookmark = (id: number) => {
return () => {
const { bookmarks } = this.state;
const tmpBookmarks = new Set(bookmarks);
// Now, the code is easier to read and understand
// And we save the system resource from looping array
// Checking whether has the "id"
if (tmpBookmarks.has(id)) {
tmpBookmarks.delete(id); // remove it, if existed in the bookmarks
} else {
tmpBookmarks.add(id); // otherwise, add into the bookmarks
}
this.setState({
bookmarks: tmpBookmarks,
});
// Below is previous version, for easier comparison
// if (tmpBookmarks.find((tmpBookmark: number) => tmpBookmark === id)) {
// const removeBookmark = tmpBookmarks.filter(
// (tmpBookmark: number) => tmpBookmark !== id,
// );
// this.setState({
// bookmarks: [...removeBookmark],
// });
// } else {
// tmpBookmarks.push(id);
// this.setState({
// bookmarks: [...tmpBookmarks],
// });
// }
};
};Access bookmarks.size is similar to Array().length
<ListItem
title="Bookmarks"
rightIcon={<Icon name="keyboard-arrow-right" />}
containerStyle={{
padding: 10,
marginRight: 15,
marginLeft: 15,
backgroundColor: "rgba(200, 200, 200, 0.1)",
}}
badge={{ value: bookmarks.size }}
/>Refactor renderNews() too
renderNews = ({ item }: { item: number }) => {
const { bookmarks } = this.state;
return (
<NewsItem
id={item}
// isSelected={!!bookmarks?.find((bookmark: number) => bookmark === item)}
// refactor to below format
isSelected={bookmarks.has(item)}
onPressBookmark={this.handleOnPressBookmark(item)}
onPressStory={details => {
console.log(details);
}}
/>
);
};Bonus
Implement data fetching in componentDidUpdate. This is related to the onPress function in ButtonGroup. The onPress function only update selectedIndex without further action.
componentDidUpdate(prevProps: Props, prevState: State) {
const { selectedIndex } = this.state;
// Then, we can handle the action in componentDidUpdate
// Whenever a component re-render, the lifecycle will triggered
// Thus, we can handle some action here after re-render
// **Always do comparison, to prevent infinite loop
if (prevState.selectedIndex !== selectedIndex) {
this.fetchStories(storyTypes[selectedIndex].path);
}
}Takeaway
- Utilize React lifecycle – componentDidMount, shouldComponentUpdate, componentDidUpdate
- The idea to implement a bookmark or similar item selection using FlatList in React Native
- Using Set to replace array
Thanks for reading. Have a nice day.
