react-native-video / react-native-video

A <Video /> component for react-native
MIT License
6.98k stars 2.83k forks source link

[BUG]: [iOS] presentFullscreenPlayer crash #3671

Open kesha-antonov opened 3 weeks ago

kesha-antonov commented 3 weeks ago

Version

v6 (Beta)

What platforms are you having the problem on?

iOS

Architecture

Old architecture

What happened?

Hi,

presentFullscreenPlayer method is not working. It's either crashes or not doing anything. I need to show video in fullscreen mode in modal https://react-native-video.github.io/react-native-video/component/methods#presentfullscreenplayer

Screenshot 2024-04-11 at 00 26 15 Screenshot 2024-04-11 at 00 26 06

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

const videoRef = useRef<VideoRef>()

const videoOnLoad = useCallback(() => {
    console.log('videoOnLoad', videoRef.current)
    videoRef.current?.presentFullscreenPlayer()
  }, [])

  ....

    <Modal isVisible={isModalVisible} onClose={toggleModal}>
        <View style={[styles.videoInModal, { width: deviceWidth, height: 500 }]}>
          {
            isModalVisible && (
              <Video
                source={{ uri: currentMessage.video }}
                ref={videoRef}
                style={{
                  flex: 1,
                  flexGrow: 1,
                  flexShrink: 1,
                }}
                muted={false}
                paused={false}
                controls
                fullScreen
                onLoad={videoOnLoad}
                onFullscreenPlayerWillDismiss={toggleModal}
              />
            )
          }
        </View>
      </Modal>
KrzysztofMoch commented 2 weeks ago

Yep, seem like we cant use fullscreen in modal - I have tried to create workaround for this but nit successfully

bfricka commented 23 hours ago

We've had this issue since 5.x. Our "FullscreenModal" has a prop hasVideo, which, if true on iOS, we set transparent={false}. The combination of presentationStyle="fullScreen" and transparent={true} causes this crash. Setting transparent to false fixes the issue. If you absolutely need transparent={true}, then unfortunately, I'm unsure.