[BUG] iOS: Video is not working well with ScrollView when controls prop is true

[tacianoscur]

Version

6.4.3 and 6.4.4

What platforms are you having the problem on?

iOS

System Version

17.2

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

Whenever the video component renders and starts playing the video, it suddenly gets cut and the ScrollView start point changes not showing the video completely even when trying to scroll. I believe it has something to do with the navigation header?

Video stopped:

Video playing:

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

1. Create project with navigation header
2. Add a video in a ScrollView in a page
3. Add the controls prop
4. Start playing the video

[tacianoscur]

It's interesting that it only happens when the video is playing, if I pause it "goes back" to its original position.

[seyedmostafahasani]

@tacianoscur
Could you please share a sample of code with us or create a repo and then share it?

[tacianoscur]

yes, of course

import Video from 'react-native-video';
import { ScrollView, StyleSheet, View } from 'react-native';

export const StyledVideo = styled(Video)`
  flex: 1;
  background-color: ${props => props.theme.colors.black};
`;

export const EmbeddedVideoContainer = styled.View<VideoThumbnailContainerProps>`
  width: ${props => props.width};
  ${props => (props.height ? `height: ${props.height};` : '')}
  margin-top: 10px;
`;

const styles = StyleSheet.create({
  listContainer: {
    flexDirection: 'column',
    gap: 10,
    paddingHorizontal: 10,
  },
});

return (
    <ScrollView contentContainerStyle={styles.listContainer}>
        <EmbeddedVideoContainer
          width="100%"
          height="190px"
        >
           <StyledVideo
            paused={!active}
            source={{ uri: video.assetUri || video.url }}
            focusable={false}
            controls
            repeat
            resizeMode="contain"
          />
        </EmbeddedVideoContainer>
    </ScrollView>
)

[Cowjiang]

I have the same issue as well, only reproduce on v6.x
after some investigation, the video will change its position after 'onLoad' triggered

[hasanalicansu]

I have a same issue at flatlist. Version 6.x, only iOS platform

ios.mov

[tacianoscur]

@seyedmostafahasani any ideas here? I am currently having to manage using v5.2.1 for iOS and v6.4.3 for Android and build them in separate branches!

[llr101]

@seyedmostafahasani same error in [email protected] & [email protected]

[seyedmostafahasani]

I will check it out.

[Cowjiang]

I will check it out.

doesn't work even I set 'disableFocus' to true

[freeboub]

looks like related to: #3799
Can you please recreate a small sample which reproduce the issue ?

[seyedmostafahasani]

@tacianoscur
I couldn't reproduce it. As @freeboub said earlier, please create a small repo.

[tacianoscur]

@hasanalicansu looks like you had a smaller project, can you create the repo to help debug?

[llr101]

@freeboub I am using new architecture in [email protected] ios, the problem may occur in the new architecture.
The demo is below:

<ScrollView>
  <Video controls />
</ScrollView>

[Cowjiang]

@freeboub I am using new architecture in [email protected] ios, the problem may occur in the new architecture. The demo is below:

<ScrollView>
  <Video controls />
</ScrollView>

Hi @seyedmostafahasani @freeboub, could you have a try as @llr101 said?
It does work if I make the controls disabled

[freeboub]

I reproduce the issue in the sample, I just wrap the video view inside the scrollView on both android & ios

[hasanalicansu]

@hasanalicansu looks like you had a smaller project, can you create the repo to help debug?

unfortunately i'm not sharing because this project from my workplace, but i can share the basic code that i can repeat.

<ScrollView
      style={{
        flexGrow: 1,
      }}>
      <Video
        key={'video1'}
        resizeMode="contain"
        ignoreSilentSwitch={'obey'}
        controls
        volume={0}
        style={{
          height: 400,
          width: 400,
        }}
        source={{
          uri: 'https://xxxx.mp4',
        }}
      />
      <Video
        key={'video2'}
        resizeMode="contain"
        ignoreSilentSwitch={'obey'}
        controls
        volume={0}
        style={{
          height: 400,
          width: 400,
        }}
        source={{
          uri: 'https://xxxx.mp4',
        }}
      />
    </ScrollView>

[freeboub]

correction, on my side it works fine after fixing the styles ...
Please provide a very small sample in a git repo to analyse the issue...

[tacianoscur]

@freeboub what styles did you fix? maybe this could help us. unfortunately I don't have time right now to be creating repos with sample project, the code I shared has enough info to reproduce it

[ThomasGuenard]

I am also experiencing almost the same behavior on iOS:

Config:

"react-native": "^73.0"
"@react-navigation/bottom-tabs": "^6.6.1"
"@react-navigation/native": "^6.1.18"
"@react-navigation/native-stack": "^6.11.0"
I have encountered two scenarios:

• A modal screen in the root navigator that contains a video player. In this case, once the video is loaded, the modal content slides behind the header, as if it is transparent.

• A simple screen within a stack navigator nested inside a bottom-tab navigator. In this scenario, the same issue occurs: the screen content starts behind the header.

If I disable the "controls" option, the issue does not occur.

To temporarily fix the issue for the simple screen, I implemented the following workaround:
(topInset is set to the main screen's container)

function onLayout(event: LayoutChangeEvent): void {
  if (Platform.OS === 'ios') {
    if (event.nativeEvent.layout.height === screenHeight) {
      setTopInset(headerHeight);
    }
    if (event.nativeEvent.layout.height < screenHeight) {
      setTopInset(0);
    }
  }
}

But it glitches a little bit...

Hope we will find a real fix!

[seyedmostafahasani]

Would you please provide a small sample in a git repo?

[andpall]

Same issue
"react-native": "0.75.3",
"react-native-video": "^6.6.4",
Simple reproduce:

const styles = StyleSheet.create({
  videoWrapper: {
    width: '100%',
    aspectRatio: 16 / 9,
  },
  videoPlayer: {
    width: '100%',
    height: '100%,
  },
});

const VideoPlayer = ({source}: Props) => {
  const videoRef = useRef<VideoRef>(null);
  const [isPaused, setIsPaused] = useState(true);

  return (
    <View style={styles.videoWrapper}>
      <Video
        ref={videoRef}
        source={{uri: source}}
        controls
        paused={isPaused}
        style={styles.videoPlayer}
      />
    </View>
  );
};

const videoExamples = [
  {
    id: '12341',
    source: 'https://www.w3schools.com/html/mov_bbb.mp4',
  },
    {
    id: '12342',
    source: 'https://www.w3schools.com/html/mov_bbb.mp4',
  },
    {
    id: '12343',
    source: 'https://www.w3schools.com/html/mov_bbb.mp4',
  },
  {
    id: '12344',
    source: 'https://www.w3schools.com/html/mov_bbb.mp4',
  },
  {
    id: '12345',
    source: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  },
];

<View style={{flex: 1}}>
  <ScrollView
    contentContainerStyle={{flexGrow: 1, paddingVertical: 16, gap: 16}}>
    {videoExamples.map(({id, source}) => (
      <VideoPlayer source={source} key={id} />
    ))}
  </ScrollView>
</View>

[ChrisEdson]

correction, on my side it works fine after fixing the styles ... Please provide a very small sample in a git repo to analyse the issue...

@freeboub

We're also getting this issue. Could you share the styles you used to fix this?