Currently, I am developing a chat app in React Native that can handle the sending and receiving of video files. However, I am facing challenges with activating the video player when a user presses on the video message inside the chat bubble. Despite my attempts to write the necessary code, I have not been successful so far. Below is an excerpt of the relevant code snippet where I have replaced the videoUrl with "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4" for testing purposes.
import { Video } from "expo-av";
.
.
.
const [modalVisible, setModalVisible] = React.useState(false);
.
.
.
//Upon pressing the videoThumbnailUrl bubble, the video file should play
{videoThumbnailUrl && (
<TouchableOpacity
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://example.com/video.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>
)}
Despite setting up the functionality for the video player to appear and play the video upon clicking the video message bubble in my chat app, no action is triggered. This issue is something I need to resolve for better user experience.