Estoy tratando de abrir un modelo cuando hago clic en el componente de imagen en la galería. Aquí no obtengo la variable "flagImage" actualizada en el método onPress de TouchableOpacity o el componente modal no obtiene el valor actualizado de "flagImage" cuando onPress of TouchableOpacity cambia su valor. Necesito ayuda aquí. El modal no se abre en absoluto cada vez que toco el componente de la imagen. Simplemente no hace nada :( A continuación se muestra el código de 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> );Puede utilizar el gancho useState para convertir los accesorios en un estado en el que pueda actualizarlos.
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> ) }