[BUG]: FlatList Header Component (Video) Disappears on Android Overscroll

[yakupdurmus]

Version

5.2.1

What platforms are you having the problem on?

Android

System Version

Android 13

On what device are you experiencing the issue?

Simulator

Architecture

Old architecture

What happened?

When using a Video component from react-native-video as the ListHeaderComponent of a FlatList on Android, the video disappears momentarily when overscrolling with overScrollMode set to "auto". The video reappears when the overscroll action is released.

My react native version 0.71.4

Expected Behavior The video should remain visible during the overscroll action.

Actual Behavior The video disappears during overscroll and reappears when the overscroll action is released.

Reproduction Link

https://github.com/user-attachments/assets/b64a1cc1-2f63-4576-a5ef-b922e0b4e5f5

Reproduction

1. Create a React Native project
2. Install react-native-video
3. Implement a FlatList with a Video component as its ListHeaderComponent
4. Set overScrollMode="auto" on the FlatList
5. Run the app on an Android device or emulator
6. Scroll the list downwards (overscroll at the top)

import React from 'react';
import { View, FlatList } from 'react-native';
import Video from 'react-native-video';

const App = () => {
  const renderListHeaderComponent = () => (
    <Video
      source={{ uri: 'https://example.com/video.mp4' }}
      style={{ width: '100%', height: 200 }}
      muted
    />
  );

  return (
    <FlatList
      data={[/* your data array */]}
      renderItem={() => (
        <View style={{ width: 40, height: 50, marginBottom: 10, backgroundColor: 'red' }} />
      )}
      overScrollMode="auto"
      ListHeaderComponent={renderListHeaderComponent()}
    />
  );
};

export default App;

[github-actions[bot]]

Previous bot comment (click to expand)

Previous bot comment (click to expand)

Thank you for your bug report. We will review it and get back to you if we need more information. There is a newer version of the library available. You are using version 5.2.1, while the latest stable version is 6.6.4. Please update to the latest version and check if the issue still exists. > Note: If the issue still exists, please update the issue report with the latest information.

[github-actions[bot]]

Previous bot comment (click to expand)

Thank you for your bug report. We will review it and get back to you if we need more information. There is a newer version of the library available. You are using version 5.2.1, while the latest stable version is 6.6.4. Please update to the latest version and check if the issue still exists. > Note: If the issue still exists, please update the issue report with the latest information.

[github-actions[bot]]

Thank you for your bug report. We will review it and get back to you if we need more information.

There is a newer version of the library available. You are using version 5.2.1, while the latest stable version is 6.6.4. Please update to the latest version and check if the issue still exists.

Note: If the issue still exists, please update the issue report with the latest information.

[freeboub]

This issue has recently been fixed on last v6 version. Please update your rnv package.

Edit: it's not the same issue, but we don't support 5.2 so it should be checked on last V6

[moskalakamil]

Hi @yakupdurmus, as Olivier mentioned, we don't support v5. However, if it's important to you, feel free to contact us directly for commercial support for this version. Or, if you'd like to upgrade to a newer version, we can assist you with that as well

[freeboub]

I close the ticket, let us know if reproduced on 6.6 version, I can reopen if needed