Question 33335 in React native Question posted in
The official React Native documentation can be found here.

How to hide and show item by item title in react native?

I want this output:

if I click the "A" alphabet header then "A" alphabet data only hide

if I click the "A" alphabet header then the "A" alphabet data only show

if I click the "B" alphabet header then the "B" alphabet data only hide

if I click the "B" alphabet header then the "B" alphabet data only show

demo:https://imgur.com/a/leXgBpw

but I try to do it’s working like this:

if I click the "A" alphabet header then all data is hidden

if I click the "A" alphabet header then all data is shown

if I click the "B" alphabet header then all data is shown

if I click the "B" alphabet header then all data is hidden

demo :https://imgur.com/a/ZfALzVg

Code

Main.js

import React, { useState } from 'react';
import { Text, View, Image, StyleSheet, TouchableOpacity } from 'react-native';
import StickyHeaderFlatlist from 'react-native-sticky-header-flatlist';
import { nameData } from './dummydata';

const App = () => {
  const [shouldShow, setShouldShow] = useState(true);

  const renderheader = ({ item }) => {
    return (
      <>
        {item.title == 'A' ? (
          <TouchableOpacity onPress={() => setShouldShow(!shouldShow)}>
            <Text style={style.text}>{item.title}</Text>
          </TouchableOpacity>
        ) : null}
             

        {item.title == 'B' ? (
          <TouchableOpacity onPress={() => setShouldShow(!shouldShow)}>
            <Text style={style.text}>{item.title}</Text>
          </TouchableOpacity>
        ) : null}
      </>
    );
  };
  const renderitem = ({ item }) => {
    return (
      <>
        <>
          {shouldShow ? (
            <View
              style={{
                padding: 10,
                height: 80,
                //borderWidth: 0.5,
                //borderColor: '#000',
                //backgroundColor: '#000',
                marginTop: 10,
              }}>
              <View style={{ flexDirection: 'row' }}>
                <Image
                  source={{ uri: item.img }}
                  style={{ width: 50, height: 50, borderRadius: 30 }}
                />
                <Text
                  style={{
                    fontSize: 20,
                    marginTop: 0,
                    marginLeft: 10,
                  }}>
                  {item.name}
                </Text>
              </View>
              <Text
                style={{
                  marginLeft: 60,
                  marginTop: -20,
                  fontSize: 14,
                }}>
                {item.contact}
              </Text>
            </View>
          ) : null}
        </>
      </>
    );
  };
  return (
    <View>
      <>
        <Text
          style={{
            textAlign: 'center',
            fontSize: 30,
            padding: 10,
            fontWeight: 'bold',
          }}>
          contact List
        </Text>
        <StickyHeaderFlatlist
          data={nameData}
          keyExtractor={(_, i) => i + ''}
          childrenKey={'contactList'}
          renderHeader={renderheader}
          renderItem={renderitem}
        />
      </>
    </View>
  );
};
export default App;

const style = StyleSheet.create({
  text: {
    padding: 10,
    backgroundColor: '#000',
    fontWeight: 'bold',
    fontSize: 30,
    fontWeight: 'bold',
    color: '#fff',
  },
});

dummydata.js

export const nameData = [
  {
    title: 'A',
    contactList: [
      {
        name: 'Aacgman',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadesh',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadi',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadidev',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadijay',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadimoolan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadipat',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aadit',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Aaditeya',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
    ],
  },

  {
    title: 'B',
    contactList: [
      {
        name: 'Baalaark',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Baalan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Baalakrishan',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Baanbhatt',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Baanke Bihaari',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
      {
        name: 'Baasim',
        contact: 2902912712,
        img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
      },
    ],
  },
];

I’m also able to use this lib but I don’t know how to use this in my code

if you able to apply any option in my code please help me ?

Tags:

2

Answers


  1. 0 
              <TouchableOpacity onPress={() => setShouldShow(!shouldShow)}>
            <Text style={style.text}>{item.title}</Text>
          </TouchableOpacity>
        ) : null}

    you are having problem with useEffect setShouldShow, as in current scenario you are having problem due to this event onPress={() => setShouldShow(!shouldShow)}
    as shouldShow some time get set to true and sometime to false… if its true then set to false and false then set to true. due to this you are having issues.

    Login or Signup to reply.
  2. 0

    You should declare the shouldShow variable as an array and add/remove the title shown/hidden:

    const App = () => {
  const [shouldShow, setShouldShow] = useState([]);

  const handleShow = (title) => {
    if (shouldShow.includes(title)) {
      // Hide title
      const updatedShouldShow = [...shouldShow].filter((t) => t !== title);
      setShouldShow(updatedShouldShow);
    } else {
      // Show title
      setShouldShow([...shouldShow, title]);
    }
  };

  const renderheader = ({ item }) => {
    return (
      <>
        <TouchableOpacity onPress={() => handleShow(item.title)}>
          <Text>{item.title}</Text>
        </TouchableOpacity>
      </>
    );
  };

  const renderitem = ({ item }) => {
    return (
      <>
        {item.name[0] !== "" &&
          shouldShow.includes(item.name[0].toUpperCase()) && (
            <View
              style={{
                padding: 10,
                height: 80,
                marginTop: 10
              }}
            >
              <View style={{ flexDirection: "row" }}>
                <Image
                  source={{ uri: item.img }}
                  style={{ width: 50, height: 50, borderRadius: 30 }}
                />
                <Text
                  style={{
                    fontSize: 20,
                    marginTop: 0,
                    marginLeft: 10
                  }}
                >
                  {item.name}
                </Text>
              </View>
              <Text
                style={{
                  marginLeft: 60,
                  marginTop: -20,
                  fontSize: 14
                }}
              >
                {item.contact}
              </Text>
            </View>
          )}
      </>
    );
  };

  return (
    <View>
      <>
        <Text
          style={{
            textAlign: "center",
            fontSize: 30,
            padding: 10,
            fontWeight: "bold"
          }}
        >
          contact List
        </Text>
        <StickyHeaderFlatlist
          data={nameData}
          keyExtractor={(_, i) => i + ""}
          childrenKey={"contactList"}
          renderHeader={renderheader}
          renderItem={renderitem}
        />
      </>
    </View>
  );
}

    Link to playground.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search