LunatiqueCoder / react-native-media-console

A React Native video player. Built with TypeScript ❤️
MIT License
184 stars 28 forks source link

Feature: Gesture Handling Enhancement for use with FlatList #104

Open coofzilla opened 3 months ago

coofzilla commented 3 months ago

Problem

When embedding the VideoPlayer component within a horizontally scrolling FlatList, there is a gesture conflict that arises. Specifically, when attempting to seek in the video (or volume) by dragging the seeker control left or right, the FlatList interprets this gesture as a horizontal scroll, leading to an unintended navigation away from the current video item instead of seeking within the video.

Expected Behavior

The expected behavior is that when interacting with the video player's seeking controls, the FlatList scrolling should be temporarily disabled or the gesture should be captured exclusively by the video player, allowing for a smooth seeking experience without triggering a scroll in the FlatList.

Current Workaround

Still trying to figure this out 😅

Example Snippet

Here is a simplified code snippet demonstrating the setup:

<FlatList
  data={videos}
  horizontal
  renderItem={({ item }) => (
    <View>
      <VideoPlayer
        source={{ uri: item.url }}
        // Other necessary props
      />
    </View>
  )}
/>