Making video fullscreen

[shahankit]

I have an app similar to facebook feed with videos in them. I'm using react-native-video to render videos. Now to make the video fullscreen I have wrapped the <Video /> component into another component. This another component has a TouchableHightlight. Within the onPress event of TouchableHighlight, a new route is created and this.props.children is passed as props to component in the route. The new component just a <View /> which renders {this.props.children}. But this causes the wrapped Video component to unmount and it gets reconstructed in the new view (i.e. it calls the constructor of the component again). This causes the video to load and start from initial position instead of using the same component and storing the buffered data and resuming from where it left.

Link to the demo project: https://github.com/shahankit/video-player-fullscreen

I already checked #90 and other fullscreen issues here but didn't find anything. I want something similar to default player controls which comes embedded when controls prop is passed.

This methods of making component go fullscreen is taken from react-native-lightbox

[bsiddiqui]

@shahankit I've been able to get full screen by adding the following styles to the video component

{
  width: Dimension.get('window').width,
  height: Dimensions.get('window').height
}

For adding components layered on top of the Video you can just layer another View that is absolutely positioned and add the controls or anything else you want there. As long as the View is below the Video, it'll render on top.

[shahankit]

@bsiddiqui Can you do that in demo project. I know this approach but consider that my <Video /> component is within deep inside Views. Suppose this is my configuration of View:

----------View------------------------
| ---------View--------------------- |
| | ---------View----------------- | |
| | |                            | | |
| | |                            | | |
| | |                            | | |
| | ------------------------------ | |
| | ---------View----------------- | |
| | | ------Video--------------- | | |
| | | | width: windowWidth,    | | | |
| | | | height: 200            | | | |
| | | |                        | | | |
| | | |                        | | | |
| | | |                        | | | |
| | | -------------------------- | | |
| | ------------------------------ | |
| ---------------------------------- |
--------------------------------------

In this case making the styles of video to:

{
  width: Dimension.get('window').width,
  height: Dimensions.get('window').height
}

Does nothing but makes the video of that size within it's parent view of that dimensions.

[bsiddiqui]

Hmm I would try and apply position absolute and the updated height, width onPress dimension You could probably set it up to animate with Animated and then remove the absolute position and change height, width back when the video finishes.

If you definitely want to route to another component you could keep track of progress and pass that as a duration prop and then seek to that duration, but you'll lose the buffered video.

[shahankit]

I actually don't want to route to new component. But I found that as the only way to move video to center of window in a new view with black background from the complex view hierarchy so that it looks as fullscreen.

[bsiddiqui]

@shahankit have you tried updating the components styles when the video is pressed? Adding a position: absolute should allow you to make it larger than its parent

[shahankit]

@bsiddiqui I tried this approach. Still not working. Even after providing negative position absolute the view does not overwrap super parent view. You can also check this in demo project at branch absoluteStyle.

[ronak301]

+1 @shahankit . I agree with you.

[ospfranco]

Have you taken a look at the source code (https://github.com/react-native-community/react-native-video/blob/master/Video.js)? You do know you can use a full screen player (with controls) by doing something like:

<Video ref={ref => this.videoRef = ref} .../>

this.videoRef.presentFullscreenPlayer()

right? is this what you are looking for?

[shahankit]

@ospfranco Thanks for suggesting that. I didn't notice that as it was not documented, I should've checked the code. I tried that method but somehow the video does not update. Only the audio plays.

[shahankit]

Also how do I customize the control when video is fullscreen? I currently have custom control view rendered on top of <Video /> component

[iou90]

@shahankit I think it's not possible cause of it's rendered by iOS.

[shahankit]

@iou90 but do you have any idea why the video playback stops when presentFullPlayer is called while the audio playback does not.

[ospfranco]

@shahankit I don't think you can customize the controls of the full screen player, if you really want this you could try to write your own player or fork the project to use a different player.

You should not start reproduction before presenting full screen player, I'm betting this causes a lot of weird issues internally.

Anyways your inquire was about full screen player, I submitted a pr to add it to readme #364 I think you can close this issue for now, if you want to use a different player you can open a new one.

[juslintek]

@ospfranco this.videoRef.presentFullscreenPlayer() doesn't work on android, just stretches video within its parent container and thats it, not like on iOS it uses native player to get into fullscreen as well doesn't return to its original size on dismissFullscreenPlayer();

[mostafa]

Check this out!
It may help!

[tibbus]

Also another way for full screen is to open it in a Modal : full screen Modal

[zakster12]

@ospfranco is there any way we can use this.videoRef.presentFullscreenPlayer() on Android because it doesn't work for me right now. It works only on iOS.

[ospfranco]

@zakster12 I haven't worked with this library in a long time, I think on android there is no native full screen player, I think the easiest way might be just stretching the container to fill the screen. Sorry I cannot provide more help right now.

[zakster12]

@ospfranco thank you for your fast response.

[ShariqMush]

I have made fullscreen on android, have made a fork on the library. It works better than react fullscreen because I'm making a bridge that is triggering native video player so instead of resizing the video component, its running 100% native so its automatically resized according to the player and the phone screen size. Check my pr here: TheWidlarzGroup/react-native-video-player#38

[kashifaliquazi]

@ShariqMush The pull request you have created is against react-native-video-player, can we utilises your changes in react-native-video, if yes can you please tell me how?

[bovenson]

<Video
    ...
    resizeMode={"stretch"}
    style={{
        width: Dimensions.get('window').height,
        height: Dimensions.get('window').width,
        minWidth: Dimensions.get('window').height,
        minHeight: Dimensions.get('window').width,
        transform: [{ rotate: '90deg'}],
    }}
    ...
/>

Hidden status bar:

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

[afilp]

@bovenson This creates the following:

Any ideas how this can be fixed and show correctly in entire screen? Thanks!

[kashifaliquazi]

@afilp this works for me (you still need to remove the status bar)

<VideoPlayer
ref={r => this.player = r}
onEnd={this.onEnd.bind(this)}
onFullscreenPlayerWillDismiss={this.onFullscreenPlayerWillDismiss.bind(this)}
onFullscreenPlayerDidPresent = {this.onFullscreenPlayerDidPresent.bind(this)}
autoplay={this.state.autoPlay}
repeat={false}
onProgress={this.onProgress.bind(this)}
video={{ uri: this.props.navigation.state.params.videoUrl }}

/>

[mostafa]

@afilp it can be fixed with CSS transforms: https://github.com/mostafa/react-native-fullscreen-video/blob/0066d5fd970705b708e3367a05f39dfa28fba9d2/index.js#L21

[supritshah1289]

@kashifaliquazi In my case I was using react-native-navigation for multi screens. On the video player screen when the video start it shows Header and left and right edges. Howerver, I disabled using react-native-navigation and now I have almost perfectly full screen. There is still some edges shown when the video is full screen.

Apart from this issue, I was not able to show controls( Play, pause..) on android. I am using 3.2.1. version of react-native-video. I appreciate your time and help.

[IbrahimSulai]

Opened a PR (#1730) for full-screen support in Android Exoplayer.

[abdul-elah-js]

Check this out!
It may help!

this one doesn't work if the react-native-video is already installed .. any workaround regarding this issue ?

[ITsolution-git]

HI @IbrahimSulai. Is there any way to get it working?

I tried modal solution and it does not work.

[EagleVee]

Have you found a workaround yet? I'm facing the same problem.

[trithien98]

Still facing this problem with android ? anyone can help

[KrishanMadushanka]

https://github.com/yanjiaxuan/react-native-video-new?tab=readme-ov-file

Found this and it worked for me.

[freeboub]

https://github.com/yanjiaxuan/react-native-video-new?tab=readme-ov-file

Found this and it worked for me.

Unfortunately there has been no change since 3 years in this repo ...