Button is Not visible under Image - React Native App

Question

I am native Android developer, pretty new to React Native. I have 3 issue with my code. I was looking over Internet but can't find accurate answers. Any help would be Thankful.

1. Close Button Not visible in the view:
   • In DialogAds.js file, I have a modal, in that I have a Image which fill whole modal, and 1 image inside touchable opacity which is close button image. Here the issue is, it doesn't show close button, close button seems to be below the whole filled image, but i want it to be in top right above the filled image.
2. Tigger Button only works one time:
   • In HomeScreen.js file, I have a Button, when I click that button it should change the state of is visible to true, it works fine for the first time. But when I back pressed, when Modal was visible and when I tried to triggered modal 2nd time it doesn't do any action.
3. How can I change the value of isVisible to false when I Back Pressed when modal was visible?*

HomeScreen:

// screens/HomeScreen.js
import React, { useRef, useState } from "react";
import { View, Text, Button,StyleSheet } from 'react-native';
import PopupDialogAd from '../utils/DialogAds'

const HomeScreen = ({ navigation }) => {
    const [isDialogVisible, setIsDialogVisible] = useState(false);

    return (
        <View style={styles.container}>
            <Button
                title="Trigger"
                onPress={() => setIsDialogVisible(true)}
            />
            <PopupDialogAd 
            visible={isDialogVisible}
            url={'https://picsum.photos/2000/3000'} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
})

export default HomeScreen;

DialogAds:

import React, { useState, useEffect } from "react";
import { Modal, View, Image, Text, Button, StyleSheet, ActivityIndicator } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import axios from "axios";

const PopupDialogAd = ({ visible, onClose, url }) => {
    const [isVisible, setIsVisible] = useState(visible);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setIsVisible(visible);
    }, [visible]);

    const fetchImage = () => {
        setLoading(true);
        axios.get(url)
            .then(response => {
                setImageUrl("");
            })
            .catch(error => {
                console.error("Error fetching image: ", error);
            })
            .finally(() => { 
                setLoading(false);
            });
    };

    const showDialogAd = () => {
        fetchImage();
    };

    return(
        <View>
            <Modal
                visible={isVisible}
                transparent={true}
                onRequestClose={() => setIsVisible(false)}>
                <View style={styles.modalContainer}>
                    <TouchableOpacity style={styles.closeButton} onPress={() => setIsVisible(false)}>
                        <Image source={require('../assets/ic_close.png')} style={styles.closeIcon}/>
                    </TouchableOpacity>
                    <Image style={styles.adImage} source={{uri: url}} />
                </View>
            </Modal>
        </View>
    )
}

const styles = StyleSheet.create({
    modalContainer: {
      flex: 1,
      alignSelf: 'center',
      backgroundColor: 'rgba(0, 0, 0, 1)',
      justifyContent: 'center',
      width: '80%',
      marginTop: '40%',
      marginBottom: '40%',
      elevation: 20,
    },
    closeButton: {
        position: 'absolute',
        top: 10,
        right: 10,
        backgroundColor: 'rgba(256, 256, 256, 100)',
        borderRadius: 50,
        zIndex: 1,
        elevation: 10,
      },
    closeIcon: {
        width: 25,
        height: 25,
        resizeMode: 'contain',
        zIndex: 2,
      },
    adImage: {
        zIndex: 0,
        elevation: 0,
        width: '100%', 
        height: '100%'
    }  
});

export default PopupDialogAd;

Answer 1

Here is an working example:

1. Close Button Not visible in the view:
   • In DialogAds.js file, I have a modal, in that I have an Image which fill whole modal, and 1 image inside touchable opacity which is close button image. Here the issue is, it doesn't show close button, close button seems to be below the whole filled image, but i want it to be in top right above the filled image.

Answer: Add position: 'absolute' to adImage, closeButton and switch

2. Tigger Button only works one time:
   • In HomeScreen.js file, I have a Button, when I click that button it should change the state of is visible to true, it works fine for the first time. But when I back pressed, when Modal was visible and when I tried to triggered modal 2nd time it doesn't do any action.

Answer: Call callback in DialogAds.tsx onRequestClose={onClose}>

3. How can I change the value of isVisible to false when I Back Pressed when modal was visible?*

Answer: Call callback in DialogAds.tsx onRequestClose={onClose}>