-
Notifications
You must be signed in to change notification settings - Fork 169
Description
Describe the bug
When embedding a YouTube player inside a react-native-modal, the video displays correctly, but user interactions (e.g., tapping on the YouTube player controls) do not work. It appears that touch events are not being passed through to the player.
To Reproduce
import { Dimensions, View } from "react-native";
import { useState } from "react";
import Modal from "react-native-modal";
import YoutubePlayer from "react-native-youtube-iframe";
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height + 80;
export default function YoutubePlayerComponent() {
const [visible, setVisible] = useState(false);
const handleCloseModal = () => {
setVisible(false);
};
return (
<Modal
isVisible={visible}
style={{ margin: 20, padding: 0 }}
onBackdropPress={() => handleCloseModal()}
onSwipeComplete={() => handleCloseModal()}
deviceHeight={deviceHeight}
deviceWidth={deviceWidth}
statusBarTranslucent
swipeDirection={["down", "up"]}
>
<View className=''>
<YoutubePlayer height={300} play={visible} playList='PLuMi25mgOkIQTZqs3gy5MjX9hEw4l-cs2' />
</View>
</Modal>
);
}
Expected behavior
The user should be able to tap on the player controls (play, pause, skip, etc.) inside the modal, just like when the component is rendered outside a modal.
Screenshots
N\A
Smartphone (please complete the following information):
- Device: Pixel8
- OS + version: Android 15
react-native-youtube-iframe
version 2.3.0react-native-webview
version 13.13.2Expo
verison 52.0.23react-native
version: 0.76.5react-native-modal
version: 13.0.1
Additional context
The issue only occurs when the YouTube player is rendered inside a modal. Outside of the modal, interactions work as expected. Seems related to how react-native-webview
handles gestures in a modal context on Android.
Other press event inside the modal work correctly.