Video in scrollview

Describe the bug If the video is in the scrollview when scrolling, if you hit the video and it occupies almost the entire width, this window appears.

To Reproduce render multiple videos in scrollview

Expected behavior When scrolling, the player should not respond in any way.

Screenshots

Smartphone:

• Device: Redmi note 8pro
• OS: Android 10
• react-native-youtube-iframe: 2.1.0
• react-native-webview : 10.10.2

Other information: The library component is wrapped in a view. Tried changing pointerEvent when scrolling. Nothing comes out. This is very inconvenient to use. In normal mode, it works well without the scrollview.

[lander854]

this will fix this issue:

`export const YoutubePlayerScreen = ({ videoId }) => { const [playing, setPlaying] = useState(false);

const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
}, []);

return (
    <Pressable
        onPress={() => {
            togglePlaying();
        }}
    >
        <View
            pointerEvents={playing ? undefined : 'none'}
            style={{ width: '100%', height: 300 }}
        >
            <YoutubePlayer
                height={400}
                play={playing}
                videoId={videoId}
                webViewProps={{
                    androidLayerType: 'hardware',
                }}
            />
        </View>
    </Pressable>
);

};`

[josegiufrida]

@lander854 solution’s works fine!

But it does not allow to use other buttons correctly (volume, full screen mode) because when pressing them the pressable activates and pauses the video. Or also, sometimes, when trying to pause the video, it plays again.

I solved it doing (it works perfectly on Scrollview or Flatlist):

const [playing, setPlaying] = useState(false);

return(
  <Pressable
	  onPress={() => {
              if (!playing) {
                  setPlaying(true);
              }
	  }}>
	  <View pointerEvents={playing ? undefined : 'none'}>
              <YoutubePlayer
	          height={400}
	          play={playing}
	          videoId={videoId}
	          webViewProps={{
		      androidLayerType: 'hardware',
	          }}
	          onChangeState={event => {
                      if (event === 'paused') {
                          setPlaying(false);
                      }
	          }}
              />
	  </View>
  </Pressable>
);

Thanks @lander854! I was looking for a long time for a solution to this problem.