show more and show less toggle button is flatlist objects in react native

Question

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}
/>;

Answer 1

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> ) } } }