Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Skip over item or row in React Native FlatList
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
FlatList,
} from 'react-native';
// SEE BLOG POST FOR EXPLANATION REGARDING HOW TO SKIP
// OVER CERTAIN ITEMS AND ROWS IN A REACT NATIVE FLAT LIST
// https://topherpedersen.blog/2020/05/16/how-to-skip-filter-and-remove-items-and-rows-when-rendering-a-flatlist-in-react-native/
class FlatListItem extends React.Component {
constructor(props) {
super(props);
}
render() {
if (this.props.text !== "bar") {
return(
<View>
<Text>{this.props.text}</Text>
</View>
);
} else {
return(
<></>
);
}
}
}
const Empty = <></>;
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{text: "foo"},
{text: "bar"},
{text: "baz"},
],
}
}
render() {
return(
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 15}}>
<Text style={{textAlign: 'center'}}>FlatListApp</Text>
</View>
<View style={{flex: 85, justifyContent: 'center', backgroundColor: 'white'}}>
<FlatList
key="flat-list-key"
data={this.state.items}
renderItem={({ item }) => (
<FlatListItem text={item.text} />
)}
keyExtractor={ (item, index) => index.toString() }/>
</View>
</SafeAreaView>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.