Video player to popup when the video message inside the bubble of the chat app is pressed (React Native)

Question

I am writing a chat app which can both send and receive video files by react native. I am currently struggling on activating the video player when the video message inside the bubble of the chat app is pressed. I have tried to write the code but failed. The following is the relevant part of the code extracted. Also, I have replaced the videoUrl by "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4" for testing purpose.

import { Video } from "expo-av";

.
.
.
const [modalVisible, setModalVisible] = React.useState(false);
.
.
.

//If there is videoTHumbnailUrl, then pressing the bubble will trigger to play the video file
{          {videoThumbnailUrl && (
        // <Image source={{ uri: videoThumbnailUrl }} style={styles.image} />
        // <View style={styles.container}>
        <TouchableOpacity
          // onPress={() => console.log(videoUrl)}
          // onPress={() => playMedia()}

          onPress={() => {
            setModalVisible(true);
            return (
              <View
                style={{
                  flex: 1,
                  backgroundColor: "red",
                  justifyContent: "center",
                }}
              >
                <Modal
                  visible={modalVisible}
                  onRequestClose={() => {
                    setModalVisible(!modalVisible);
                  }}
                >
                  <View style={{ backgroundColor: "white", flex: 1 }}>
                    <Video
                      source={{
                        uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
                      }}
                      style={{ height: 300, width: 300, opacity: 0.5 }}
                    />
                  </View>
                </Modal>
              </View>
            );
          }}
        >
          <ImageBackground
            source={{ uri: videoThumbnailUrl }}
            resizeMode="cover"
            style={styles.image}
          >
            <AntDesign name="playcircleo" color="white" size={80} />
          </ImageBackground>
        </TouchableOpacity>
        // </View>
      )}

I expected the video player would pop up and play the video file when I pressed the video message in the bubble of my chat app but nothing happened.

Answer 1

Can you try this .

{          {videoThumbnailUrl && (
   
<TouchableOpacity

   onPress={() => {
        setModalVisible(true);
       
      }}
    >
      <ImageBackground
        source={{ uri: videoThumbnailUrl }}
        resizeMode="cover"
        style={styles.image}
      >
        <AntDesign name="playcircleo" color="white" size={80} />
      </ImageBackground>
    </TouchableOpacity>
    // </View>
  )}
}


{
    modalVisible &&
    <View
    style={{
      flex: 1,
      backgroundColor: "red",
      justifyContent: "center",
    }}
  >
    <Modal
      visible={modalVisible}
      onRequestClose={() => {
        setModalVisible(!modalVisible);
      }}
    >
      <View style={{ backgroundColor: "white", flex: 1 }}>
        <Video
          source={{
            uri: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
          }}
          style={{ height: 300, width: 300, opacity: 0.5 }}
        />
      </View>
    </Modal>
  </View>
}