React native - react-native-image-modal open image modal programmatically when clicking the button then toggle the modal

EmmanuelDufitumukiza
February 22, 2024
209 views
0 votes
2 Answers

I’m using react-native-image-modal package to display the image in modal but its not opening onclick button I need to open modal when button is clicked.

current code:

import ImageModal from 'react-native-image-modal';

<TouchableOpacity
                            activeOpacity={0.6}
                            onPress={() => {
                             
                            }}
                            style={{
                              borderWidth: 1,
                              borderColor: '#FF9898',
                              borderRadius: 50,
                              position: 'absolute',
                            }}>
                            <Text className="text-warning font-[500] text-[11px] py-[3px] px-2">
                              See Image
                            </Text>
                          </TouchableOpacity>
          <View>
            <ImageModal
              ref={modalBtn}
              resizeMode="contain"
              modalRef={imageModal}
              imageBackgroundColor="#000000"
              style={{
                width: 400,
                height: 400,
              }}
              source={{
                uri: 'https://res.cloudinary.com/duldhdjsj/image/upload/v17042/litnldacr4.jpg',
              }}
            />
          </View>

I want onclick see image button , I need the modal to be shown

Answers

- BilelRahmouni
- February 22, 2024 at 4:38 am
- 0 votes
0
The modal in this library cannot be open with an onPress, the open button is on the image itself

Login or Signup to reply.

- KTas
- February 22, 2024 at 11:24 am
- 0 votes
0
Can you just wrap the <ImageModal> component in a conditional boolean state? Such as:
```
const [showingModal, setShowingModal] = useState(false);
```
Your button handler can call setShowingModal(true);

In your render function, you can then wrap the rendering of ImageModal in a conditional:
```
{showingModal && <ImageModal...
```
Login or Signup to reply.