React Native: How can I put a pop-up Modal into flatlist

user_13226782 0
Viewed 297

I've made a flatlist with a few data inside. I want to make a pop-up information for each item in the flatlist. So I tried putting Modal into the renderItem function but when it sets the modal state visible, it will show all of the information in my flatlist. I think it should be setting the modal visible state by id or something like that but I don't know how to do it. Any suggestion?

my renderItem:

 function RenderItem({ item }) {
    return (
        <View>
            <Modal
                animationType='slide'
                transparent={true}
                visible={infoModal}>
                <View style={styles.informationContainer}>
                    <View style={styles.informationBox}>
                        <Text>{item.file.displayName}</Text>
                        <Button title='         OK         ' onPress={() => setInfoModal(false)} />

                    </View>
                </View>
            </Modal>
            <TouchableOpacity style={styles.listBox} onPress={() => setInfoModal(true)}>
                <View>
                    <Text numberOfLines={1} style={styles.listText}>{item.file.displayName}</Text>
                    <Text style={{ width: 200, color: 'rgba(0, 0, 0, 0.5)' }}>{item.certificateName}</Text>
                </View>
                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity>
                        <Icon name='search' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>       </Text>
                    <TouchableOpacity onPress={() => handleDownload(item)}>
                        <Icon name='download' color='black' size={25} />
                    </TouchableOpacity>
                    <Text>   </Text>
                </View>
            </TouchableOpacity>
        </View>
    )
}
react-native
1 Answers

Instead of setting a simple boolean value about whether the Modal should appear, you can set some sort of identifiable value that tells it what item to load (and otherwise leave it undefined).

Bare-bones example:


const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default function App() {
  const [modalInfo, setModalInfo] = React.useState(undefined);
  
const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => setModalInfo(item.title)}><Text>{item.title}</Text></TouchableOpacity>
  );

  return (
    <View style={styles.container}>
          <Modal visible={modalInfo !== undefined}>
            <View style={[{borderWidth: 1},styles.centeredView]}>
              <Text>{modalInfo}</Text>
              <TouchableOpacity onPress={() => setModalInfo(undefined)}><Text>Close</Text></TouchableOpacity>
            </View>
          </Modal>
       <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});
user_5609420
Related