This is the snack of the snippet https://snack.expo.dev/@koromann17/modal-with-image-picker
import {
Text,
View,
TouchableOpacity,
Modal,
Image,
StyleSheet,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';
export default function App() {
const [image, setImage] = useState(null);
const [showModal, setShowModal] = useState(false);
const [counter, setCounter] = useState(0);
const handleAddImage = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ['images'],
allowsEditing: false,
aspect: [1, 1],
quality: 1,
});
if (!result.canceled) {
setImage(result.assets[0]);
setShowModal(true);
setCounter((prev) => prev + 1);
}
} catch (error) {
console.log(error);
}
};
console.log(showModal, counter);
return (
<SafeAreaView style={styles.container}>
<View style={styles.container2}>
<Modal
visible={showModal}
transparent
onDismiss={() => setShowModal(false)}>
<View style={styles.container2}>
{image?.uri && (
<Image
src={image.uri}
resizeMode="contain"
className="h-[200px] w-[200px]"
/>
)}
<Text>This is a modal</Text>
<TouchableOpacity onPress={() => setShowModal(false)}>
<Text>Close</Text>
</TouchableOpacity>
</View>
</Modal>
<Image
src={image?.uri}
resizeMode="contain"
className="h-[200px] w-[200px]"
/>
<TouchableOpacity onPress={handleAddImage}>
<Text>Add image</Text>
<Text>{counter}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
I want to show a modal after picking an image but the modal doesn’t show in this case, even the state ‘showModal’ is logged to be true. On the other hand, the state counter get rendered normally.