Skip to content

Not receiving touch input when inside react-native-modal #369

@talon2295

Description

@talon2295

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions