How to use the modal in the list in react native (a specific Modal for each list item)?

Question

I made a customized list component (in React Native) which shows touchable images with some description texts. I need each images open a specific Modal; but I don't know how!! where & how I should code the Modal?? ... here is my photo list component:

export class CustomGallery extends Component {

  render() {
    let {list} = this.props;
    return (
      <View style={styles.container}>
        <FlatList
          numColumns={4}
          data={list}
          renderItem={({ item}) => (
            <View style={styles.views}>
              <TouchableOpacity style={styles.touch} >
                <ImageBackground
                  style={styles.img}
                  source={{ uri: item.photo }}
                >
                  <Text style={styles.txt}>{item.name}</Text>
                  <Text style={styles.txt}>{item.key}</Text>
                  <Text style={styles.txt}>{item.describtion}</Text>
                </ImageBackground>
              </TouchableOpacity>
            </View>
          )}
        />
      </View>
    );
  }
}

Answer 1

For Modal you can use modal from material-ui - https://material-ui.com/components/modal/

The Modal component renders its children node infront of a backdrop component. Simple and basic example would be like a confirmation message that pops up asking whether you surely want to delete particular information or not.

From your code I am guessing you want to display information regarding the image using modal when you click on the image.

Here I have added Modal component:

import React from 'react';
import Modal from '@material-ui/core/Modal';

export class CustomGallery extends Component {
    constructor() {
        super();
        this.state = {
          modalOpen: false,
          snackOpen: false,
          modalDeleteOpen: false,
        };
      }

      
  handleModalOpen = () => {
    this.setState({ modalOpen: true });
  }

  handleModalClose = () => {
    this.setState({ modalOpen: false });
  }

    render() {
      let {list} = this.props;
      return (
        <View style={styles.container}>
          <FlatList
            numColumns={4}
            data={list}
            renderItem={({ item}) => (
              <View style={styles.views}>
                <TouchableOpacity style={styles.touch} >
                   
                    <ImageBackground
                    style={styles.img}
                    onClick={() => this.handleModalOpen()}
                    >
                    { item.photo }
                    </ImageBackground>
                    <Modal
                     open={this.state.modalOpen}
                     onClose={this.handleModalClose}
                     closeAfterTransition
                    >
                        <Text style={styles.txt}>{item.name}</Text>
                        <Text style={styles.txt}>{item.key}</Text>
                        <Text style={styles.txt}>{item.describtion}</Text>
                    </Modal>
                </TouchableOpacity>
              </View>
            )}
          />
        </View>
      );
    }
  }