Modal not getting opened on clicking the image of gallery component-CodePudding

I'm trying to open a model when I click on the image component in gallery. Here I'm not getting the "flagImage" variable updated in onPress method of TouchableOpacity or the modal component is not getting the updated value of "flagImage" when onPress of TouchableOpacity changes its value. I need help here. The modal doesn't open at all whenever I touch the image component. It just does nothing :( Below is the code for gallery.component.js:

import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';

export default ({captures=[], flagImage=true}) => (
    <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
    >
        {captures.map(({ uri }) => (
            <View style={styles.galleryImageContainer} key={uri}>
                <TouchableOpacity 
                    onPress={()=> {
                        flagImage = !flagImage;
                        console.log('Touch: "' flagImage '"');          
                    }}
                >
                    <Image source={{ uri }} style={styles.galleryImage}/>
                </TouchableOpacity>
                <Modal visible={flagImage} onPress={() => {console.log('Modal: "' flagImage '"');flagImage = !flagImage;}} onRequestClose={() => flagImage = ! flagImage}>
                      <View>
                            <Image source={{ uri }} style={styles.galleryImageLarge}/> 
                      </View>
                </Modal>
            </View>
        ))}
    </ScrollView>
);

CodePudding user response：

As the previous answer said, you need to use the useState hook. This is because useState will cause a rerender to occur, causing the modal to appear.

CodePudding user response：

You can make use of useState hook to convert the props into a state where you can update them.

import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';

export default ({captures=[], lflagImage=false}) => {
    const [flagImage, setflagImage] = React.useState(lflagImage);
    return (
    
        <ScrollView 
            horizontal={true}
            style={[styles.bottomToolbar, styles.galleryContainer]} 
        >
            {captures.map(({ uri }) => (
                <View style={flagImage?styles.galleryImageContainer:styles.galleryImageContainerView} key={uri}>
                    <TouchableOpacity 
                        onPress={()=> {
                            setflagImage(prevData => !prevData)
                            console.log('Touch: "' flagImage '"');          
                        }}
                    >
                        <Image source={{ uri }} style={flagImage?styles.galleryImage:styles.galleryImageLarge}/>
                    </TouchableOpacity>
                    <Modal visible={flagImage} onRequestClose={() => setflagImage(prevData => !prevData)}>
                        <View>
                                <Image source={{ uri }} style={styles.galleryImageLarge}/>
                        </View>
                    </Modal>
                </View>
            ))}
        </ScrollView>
        )
    }