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.
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.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.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;
Here is an working example:
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
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}>
isVisible
to false when I Back Pressed when modal was visible?*Answer: Call callback in DialogAds.tsx onRequestClose={onClose}>