[BUG]: [iOS] `controls` prop cause layout change when `<Video />` is placed in `BottomTabs`

[thongquach]

Version

6.0.0

What platforms are you having the problem on?

iOS

Architecture

Old architecture

What happened?

controls prop cause layout change when <Video /> is placed in BottomTabs. Please look at the demos below.

• The first row shows a minimal reproducible example.
• The second row shows a glitch happening in my app when using controls

Thanks in advance for any help/support 🙏 Minimal reproducible code below.

With controls	Without controls
Notice that the video is being cut off at the bottom even though being wrapped in SafeAreaView
Notice 0:02 => 0:04, there is a glitch at the bottom. https://github.com/TheWidlarzGroup/react-native-video/assets/49977541/15e11e30-050c-4937-8ae7-dc523219494b	No glitch when disabling controls https://github.com/TheWidlarzGroup/react-native-video/assets/49977541/40876ac9-7cf8-485f-b7e7-5c09118db894

Reproduction

repository link

Reproduction

Minimal reproducible code:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

const Tab = createBottomTabNavigator()

const DashboardTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="ChatScreen" component={ChatScreen} />
      <Tab.Screen name="Home" component={Home} />
    </Tab.Navigator>
  )
}

const ChatScreen = () => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Video
        source={{
          uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4',
        }}
        style={{ flex: 1 }}
        controls
      />
    </SafeAreaView>
  )
}

    "react-native": "0.73.6",
    "react-native-video": "^6.0.0",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/stack": "^6.2.2",
    "react-native-safe-area-context": "^3.3.2",

[freeboub]

It looks strange to me... By chance, adding focusable={false} can fix the issue ...

This existing PR can also deal with that... https://github.com/TheWidlarzGroup/react-native-video/pull/2897/files But I am really not sure, BTW it can help detecting where the issue is.

Additional question, is it iOS only ?

[thongquach]

Thanks @freeboub. Yes, it is only on iOS. I've tried adding focusable={false}, but the glitching persists.

[freeboub]

After a small code review, I am not able to highly the issue... Can you please setup a small sample to easily reproduce the issue please ?

[thongquach]

Thanks @freeboub. I've put the minimal reproducible code along with versions in the description.

[thongquach]

I'll try to setup a repo to reproduce this when I have time. In the mean time, I observed something and not sure if it can help debugging.

Notice the glitch at the bottom of the screen when the video enters full screen. Therefore, I suspect the bug has something to do with the fullscreen mode on iOS causing the safe area to be ignored.

https://github.com/TheWidlarzGroup/react-native-video/assets/49977541/105c2534-3164-455f-a6f3-b98ea0a29dbd

[DevCopy]

I'm experiencing the same problem

[thongquach]

I'm experiencing the same problem

Hi @DevCopy, I managed to fix it by manually calculating the height (using a fixed height).