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

So, basically you want a modal for the image. Once you click on the image, you want the modal to open and show some information regarding the image. Is this what you want? — Aadi, Sep 04 '21 at 08:41
I use a free component "ImageModal" ; it works! here is import line code: import ImageModal from "react-native-image-modal"; — Unico, Sep 26 '21 at 07:08

score 2 · Accepted Answer · answered Sep 04 '21 at 08:59

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

score 0 · Answer 2 · answered Sep 04 '21 at 08:59

I am not sure about how you set the image. But anyways below method is an example of opening modal with dynamic data.

import React, {useState} from "react";
import { Button, TouchableOpacity, FlatList, Modal, Text } from "react-native";

function App() {
    const [value, setValue] = useState("");

    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',
      },
    ];

    return (
      <>
        <FlatList 
        data={DATA}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => setValue(item.title)}>
            <Text>{item.title}</Text>
          </TouchableOpacity>
        )}
        />

        <Modal visible={value}>
          <Text>{value}</Text>
          <Button title="close" onPress={() => setValue("")} />
        </Modal>
      </>
    )
}

export default App;

I am not sure about it. How can his work for an image? – Sep 04 '21 at 09:59 — , Sep 04 '21 at 09:59

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

2 Answers2