react-native-youtube-iframe icon indicating copy to clipboard operation
react-native-youtube-iframe copied to clipboard

Not receiving touch input when inside react-native-modal

Open talon2295 opened this issue 9 months ago • 0 comments

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.0
  • react-native-webview version 13.13.2
  • Expo verison 52.0.23
  • react-native version: 0.76.5
  • react-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.

talon2295 avatar May 07 '25 08:05 talon2295