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,
  },
});