I have 10 objects in the array and i have created the grid view using flatlist. i want to implement that logic that , first of all only, three object will be shown ,when we click on show more all the object should be visible in the list in grid view and only three item can show in one row. how can i do it
<FlatList
data={item.tag}
renderItem={({ item }) => (
<View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
<View
//key={i}
style={{
backgroundColor: "#aaf0d1",
borderRadius: 20,
borderWidth: 1,
padding: "2%",
borderColor: "#40e0d0",
//height: '20%',
width: widthToDp("25%"),
//margin: '2%',
flex: 1,
flexDirection: "column",
margin: 1
}}
>
<Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}>
#{item.title}
</Text>
</View>
</View>
)}
//Setting the number of column
numColumns={3}
keyExtractor={(item, index) => index}
/>;
You can control how many items you render right in your renderItem function:
<FlatList
data={item.tag}
renderItem={renderItem}
//Setting the number of column
numColumns={3}
keyExtractor={(item, index) => index}
/>;
...
const [showMore, setShowMore] = useState(false) // we handle the show more state here
const onShowMore = () => setShowMore(true)
const onShowLess = () => setShowMore(false)
const renderItem = ({ item, index }) =>
{
if (showMore) { // we display all items if show more state is true
return (
<View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
<View
//key={i}
style={{
backgroundColor: "#aaf0d1",
borderRadius: 20,
borderWidth: 1,
padding: "2%",
borderColor: "#40e0d0",
//height: '20%',
width: widthToDp("25%"),
//margin: '2%',
flex: 1,
flexDirection: "column",
margin: 1
}}
>
<Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}>
#{item.title}
</Text>
</View>
</View>
)
} else {
if (index < 3) { // here we control how many items are displayed if show more is false
return
(
<View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
<View
//key={i}
style={{
backgroundColor: "#aaf0d1",
borderRadius: 20,
borderWidth: 1,
padding: "2%",
borderColor: "#40e0d0",
//height: '20%',
width: widthToDp("25%"),
//margin: '2%',
flex: 1,
flexDirection: "column",
margin: 1
}}
>
<Text numberOfLines={1} style={{ fontSize: 15, fontWeight: "300" }}>
#{item.title}
</Text>
</View>
</View>
)
}
}
}