How to make FlatList items clickable when we show it using state change in react native

Question

I have data in FlatList which is working fine.

The data is hidden by default but when I click on the arrow, I want it to appear below the field.

Problem is that, when I click on the icon, it appears without problem but items are not clickable on it.

But if I set that state data true by default, the clickable to list items works fine because it gets rendered on screen.

My requirements are as when this list appears with state change, the list should appear and be clickable without a problem. Currently, it does appear but when I try to click items, it disappears.

How we can do it? Because I also need to add a search on it later on. Please provide a long-term solution.

Code:

{getD ? (
              <View style={{ flex: 1 }}>
                <FlatList
                  style={{
                    flexGrow: 1,
                    flexShrink: 1,
                    flexDirection: 'column',
                    overflow: 'scroll',
                    maxHeight: 150,
                    position: 'absolute',
                    width: '100%',
                    zIndex: 10,
                    elevation: 10,
                    backgroundColor: '#ffffff',
                    borderRadius: 5,
                    borderWidth: 1,
                    borderStyle: 'solid',
                    borderColor: '#D7D7D7',
                    shadowOffset: { height: 3, width: 0 },
                    shadowRadius: 10,
                    shadowColor: '#00000010',
                    shadowOpacity: 1,
                    flex: 1,
                  }}
                  data={recSet}
                  renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => alert('xxxxx')}>
                      <View style={{}} />
                      <Text style={{}}>{item.title}</Text>
                    </TouchableOpacity>
                  )}
                  keyExtractor={(item) => item.id}
                  contentContainerStyle={{ flexGrow: 1 }}
                  extraData={getD}
                />
              </View>
            ) : null}

Answer 1

I had no problem getting touches to register properly so I asssuming that you ended auto importing react-native-gesture-handler TouchableOpacity somewhere. Heres a demo:

/*create ToggleFlatlist component*/
import React, { useState } from 'react';
import { View, TouchableOpacity, FlatList, Text } from 'react-native';

export default function ToggableFlatList({
  pressableStyle,
  initialVisibility,
  flatlistWrapperStyle,
  onToggleChange,
  ...flatlistProps
}) {
  const [isRendered, setIsRendered] = useState(initialVisibility);
  const onToggle = () => {
    const newValue = !isRendered;
    setIsRendered(newValue);
    onToggleChange?.(newValue);
  };
  return (
    <TouchableOpacity
      style={[{ flex: 1 }, pressableStyle]}
      onPress={onToggle}>
      {isRendered ? (
        <View style={[{ flex: 1 }, flatlistWrapperStyle]}>
          <FlatList {...flatlistProps} />
        </View>
      ) : null}
    </TouchableOpacity>
  );
}

export default function App() {
  const [isVisible, setIsVisible] = useState(false)
  return (
    <View style={styles.container}>
      <Text style={styles.textInstructions}>Press anywhere to {isVisible ? 'hide':'reveal'} list</Text>
      <ToggableFlatList
        flatlistWrapperStyle={styles.flatlistWrapper}
        initialVisibility={isVisible}
        onToggleChange={setIsVisible}
        style={styles.flatlist}
        data={recSet}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => alert('xxxxx')}>
            <View style={{}} />
            <Text style={{}}>{item.title}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ flexGrow: 1 }}
      />
    </View>
  );
}