I am writing a simple chat app where a user can send a photo. Once a user click on a message with a photo, it is been rendered inside ImageViewer. Then I have the option to saved the photo. Once the photo is saved, I want to display modal with "you saved your photo" or something like this. So far so good. BUT, the modal with the informative message appears to take full screen instead of just one row message. Here is my code:
return (
<>
<Modal
animationType="slide"
visible={showImageViewer && savedPhoto}
onRequestClose={() => {
setSavedPhoto(false);
}}
>
<View style={styles.modalViewStyle}>
<Text style={styles.modalTextStyle}>
Please, dont take the whole screen
</Text>
</View>
</Modal>
</>
);
My imports:
import ImageViewer from "react-native-image-zoom-viewer";
import { GiftedChat } from "react-native-gifted-chat";
import {
View,
Text,
Image,
Modal,
TouchableOpacity,
StyleSheet,
} from "react-native";
My styling:
const styles = StyleSheet.create({
image: {
width: 150,
height: 100,
borderRadius: 13,
margin: 3,
resizeMode: "cover",
},
modalViewStyle: {
justifyContent: "center",
alignItems: "center",
flexDirection: "row",
borderWidth: 3,
borderColor: "red",
height: 40,
flex: 1 / 10,
},
modalTextStyle: {
fontWeight: "bold",
color: "green",
fontSize: 15,
},
});
Make the modal background to transparent and style the child view like this
<Modal transparent={true}
visible={this.state.isVisible}
onRequestClose={this.closeModal}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<View style={{
width: 300,
height: 300}}>
// you modal content here
</View>