React-native-video: this.player.presentFullscreenPlayer() doesn't work on android

[wack17s]

hi, button with this.player.presentFullscreenPlayer() handler do nothing on android, ios works good. Any suggestions?

[gergob]

Please share more details, like version of the react-native-video component and a code snippet would be good too @wack17s

[xavieramoros]

I have the same problem.

My react-native-video component is wrapped within a InViewPort component to know if it's visible or not.

Something like:

<InViewPort key={'videoInViewPort'} onChange={this._onPlayerVisibilityChanged}>
    <View 
    key={'videoPlayer'}
    <Video 
        key={'video'}
        ref={(ref) => {
            this.player = ref
        }}
        playInBackground={false}
        paused={this.state.paused} 
        style={{flex: 1}}
        resizeMode={"cover"}
        muted={this.state.muted}
        source={{uri: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}} 
    /> 
</View>
</InViewPort>

I use the reference to this.player to trigger fullscreen mode (this.player.presentFullscreenPlayer())

I'm using react-native 0.40 and react-native-video 1.0.0. I tested in Android 5.1.1 (Samsung Galaxy J5) and Android 6.0.1 (OnePlus 2 with Oxygen OS)

[wack17s]

RN 0.40, RN Video 1.0.0

[kevinvandijk]

Can confirm. Tested with RN 0.43.1 with RN Video master on multiple Android devices. The presentFullscreenPlayer does not work on Android.

[alixeb]

This does not seem to be working on Windows either.
Also considering that presentFullscreenPlayer update the property fullscreen to be true.
Why cant we directly put fullscreen={true} or (false for that matter) directly on Video ?

[SebT]

It does work on iOS but not android for me too.
RN 0.42, RN Video 1.0.0, android 6.

[mcatmos]

Not working on Android

[452MJ]

Not working on Android. +1

"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-video": "^1.0.0",
"react-navigation": "^1.0.0-beta.9"
},

[roancoetzee]

Any update on this?

[alvelig]

Same for me... not working on Android.

[Choujiji]

+1 hope to fix it

[heartAndRain]

This function seems not to be implemented in java

[alixeb]

I don't know if this help, but the way I got around this is by using a dedicated route to play the video fullscreen.

So you can play the video fullscreen by:
1) Use CSS to make video as big as the screen
2) Use paused={false} to play the video by default
3) Use paused={true} when the component unmount from the route change, as sometimes the sound keeps playing

You would need to have a custom Close/X button on the page to navigate away from to close the video

[SebT]

@alixeb I use a similar technique that may help.

I have a reducer dedicated to the fullscreen video player and a component with a Video tag.

I put this component at the top level of my application (same level as my router) and connect it to the redux store.

Then I use redux actions to set the fullscreen video source and show/hide it based on a isActive prop.

Some code to help people implement it :

// FullscreenVideoPlayer/actions.js
import {createAction} from 'redux-actions';
import * as Constants from './constants';

export const initVideo = createAction(Constants.INIT_VIDEO);
export const resetVideo = createAction(Constants.RESET_VIDEO);
export const showVideo = createAction(Constants.SHOW_VIDEO);
export const hideVideo = createAction(Constants.HIDE_VIDEO);

// FullscreenVideoPlayer/reducer.js
import * as Constants from './constants';
import {handleActions} from 'redux-actions';

const INITIAL_STATE = {
  isActive: false,
  source: null
};

export default handleActions({

  [Constants.INIT_VIDEO]: (state, {payload}) => ({
    ...INITIAL_STATE,
    source: payload
  }),

  [Constants.SHOW_VIDEO]: (state, {payload}) => ({
    ...state,
    isActive: true
  }),

  [Constants.HIDE_VIDEO]: (state, {payload}) => ({
    ...state,
    isActive: false
  }),

  [Constants.RESET_VIDEO]: (state, {payload}) => ({
    ...INITIAL_STATE
  })
}, INITIAL_STATE);

// FullscreenVideoPlayer/index.js (no controls is this snippet but you can add it)
class FullscreenVideoPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      translateY: new Animated.Value(windowHeight)
    };
  }

  componentWillReceiveProps(nextProps) {
    // Reset state when video changes (onLoad will be called and video will start)
    if (this.props.source !== nextProps.source) {
      this.setState({isLoading: true});
    }

    // Show / hide the fullscreen mode
    if (this.props.isActive !== nextProps.isActive) {
      Animated.timing(this.state.translateY, {
        toValue: nextProps.isActive ? 0 : windowHeight
      }).start(e => {
        // Play video on show
        if (nextProps.isActive) this.player.onStartPress();
      });
    }
  }

  render() {
    const {source, isActive} = this.props;
    const containerStyle = [
      styles.container,
      {transform: [
        {translateY: this.state.translateY}
      ]}
    ];
    return (
      <Animated.View style={containerStyle}>
        {isActive && <StatusBar hidden={true} />}
        {source && <VideoPlayer
          ref={n => this.player = n}
          video={{uri: source}}
          customStyles={{wrapper: styles.videoContainer, video: styles.video}}
          onLoad={this.handleVideoLoad.bind(this)}
          onEnd={this.handleVideoEnd.bind(this)}
          onRequestClose={this.handleVideoEnd.bind(this)}
        />}
      </Animated.View>
    );
  }

  /**
   * On video end, close fullscreen mode
   * @param e
   */
  handleVideoEnd(e) {
    this.props.hideVideo();
  }

  /**
   * On load, play video
   * @param e
   */
  handleVideoLoad(e) {
    this.setState({isLoading: false});
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    flex: 1,
  },

  videoContainer: {
    flex: 1,
    transform: [
      {rotateZ: '90deg'},
      {translateY: ((PixelRatio.getPixelSizeForLayoutSize(windowHeight) - PixelRatio.getPixelSizeForLayoutSize(windowWidth)) / PixelRatio.get())},
    ],
    height: windowWidth,
    width: windowHeight,
    backgroundColor: 'black'
  },

  video: {
    height: windowWidth,
    alignSelf: "stretch"
  },
});

FullscreenVideoPlayer.propTypes = {
  source: PropTypes.string,
  isActive: PropTypes.bool,
  isPlaying: PropTypes.bool,
  isLoading: PropTypes.bool,
  playerProps: PropTypes.object
};

function select(state) {
  return state.fullscreenVideo;
}

export default connect(select, {hideVideo})(FullscreenVideoPlayer);

// App.js render
render() {
  return (
    <Provider store={store}>
      <View style={{flex: 1}}>
        <AppNavigator/>
        <FullscreenVideoPlayer/>
      </View>
    </Provider>
    );
}

Then just use the redux action to set the video src and active status.

[luisfuertes]

Any update with this?

[RyanMitchellWilson]

Any update?

[b-asaf]

same here, I am using
RN 0.45.1
video 1.2.0

presentFullscreenPlayer() is not working on Android.

[mandriv]

Any info about whether this issue's going to be resolved?

[leon3110l]

I used the react-native-immersive package and StatusBar from react-native to hide the software buttons and the statusbar to make it fullscreen, hope this helps somebody.

[tirrorex]

Would be good to have an official answer on this

[viperfx]

So I had a look at the Java code and I dont think fullscreen ever worked. There is no method in there that ties the JS bridge to a method to do anything for full screen mode.

@AndrewJack @isair seem to be common contributors to the Java code base. Maybe they can provider a more official answer.

[AndrewJack]

I don't think it's implemented for Android.

You can achieve the same effect by making the video view fill up the whole screen, and hiding the status bar and software buttons

[viperfx]

Do you have reference code for the default player or exoplayer?

Also does exoplayer currently support full screen?

On Sep 13, 2017 18:37, "Andrew Jack" [e-mail] wrote:

I don't think it's implemented for Android.

You can achieve the same effect by making the video view fill up the whole
screen, and hiding the status bar and software buttons

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-native-community/react-native-video/issues/534#issuecomment-329316753,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAUCQeTFDenDojENDcaJhV96ol-D3Wsqks5siFkjgaJpZM4Mg7xP
.

[alvelig]

@viperfx Maybe this can help https://medium.com/tall-programmer/fullscreen-functionality-with-android-exoplayer-5fddad45509f

[viperfx]

@alvelig I took a look but I am not that familiar with java to be able to implement it.

Ive found other resources too:
https://geoffledak.com/blog/2017/09/11/how-to-add-a-fullscreen-toggle-button-to-exoplayer-in-android/

Maybe it will help someone implement it.

@SebT would you be able to provide the implementation for the VideoPlayer component? I am finding that my source video does not rotate even with the transform applied.

[viperfx]

Ah nvm guys, I figured out a decent solution, similar to what you said @AndrewJack. The only downside I see, is a state change causes a re-render, and the video does not keep the same instance. So the video restarts. But its a small hitch.

[shouwangshe]

@SebT Hello! I'am trying play the video fullscreen on android, I looks your comment, I linsten the device's orientation'change and store up it in the state. Then I change the video'width and height from the device's orientation'state and I did't call anther component for the full-screen-video. My vedio still in the same component ; The problem is : When I press a button to full video screen It works;But then I change it back, the video don't play ,there's no picture; I guess if the video did't load or lose something,I'm still studying the RN; Maybe I just miss something basicly; or I did't get the method correctly; I hope to get some suggests; My English is Chinses English, Please understand,thanks;

[heiBin]

@shouwangshe 最后有没有解决全屏的问题？

[landmass]

@wack17s How is the problem resolved ?

[Noitidart]

Still open @landmass - eagerly awaiting a solution.

It would be awesome to get native players for non-fullscreen too in this module.

[NiuYangYang]

not working

[ben-snaize]

Not working, so instead I implemented a modal version for Android that sets to 100% width - I don't need the video controls. Not the best but better than nothing!

[kashsbd]

How about this package.

https://www.npmjs.com/package/react-native-af-video-player

[drpiou]

same here

[khanhtdbse]

Still waiting for this implementation 😢

[drpiou]

So I came up doing my own fullscreen player and it is working great. Go on your own guys, it will be implemented sooner this way ;)

[mrarronz]

Hey guys, check out this example: https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter7-VideoPlayer/VideoExample, maybe this is what you want.

See the related blog here: https://juejin.im/post/5a9f9fde518825557207e7b0.

[b-asaf]

Did any one knows how to modify the code in JAVA? or can reference me to a good tutorial?
All the workarounds are nice, but its just too much code that can go wrong at some point

[jayasme]

This repository hasn't been updated for more than 1 year!!!!!!! It's necessary to care about remove the repo from the react-native community

[haziqhafizuddin]

any update?

[kyle-ssg]

I've found that while this isn't implemented using react-native-video-player as a fallback for android and doing something like:

fullScreen = ()=> {
        if (Platform.OS == "android") {
            this.setState({paused: true})
            rnVideoPlayer.showVideoPlayer(this.props.source.uri);
        } else {
            this.player && this.player.presentFullscreenPlayer();
        }
    }

https://github.com/matiasfh/react-native-native-video-player#master

The code for launching the intent seems to be quite straight forward, not sure about keeping the current time though.

[ScreamZ]

For those who keep struggling : https://github.com/ScreamZ/react-native-true-sight

[cobarx]

I've implemented basic fullscreen support for ExoPlayer where it will hide the nav bar and status bar appropriately. It will take some additional work to have some kind of fullscreen style so you don't have to measure the height & width.

I can probably copy that code over to the Android player as well.

I'll take a deeper look at this sometime this week.

[Noitidart]

Thank you @cobarx that would be so cool!

[xstable]

@kyle-ssg Where do you get rnVideoPlayer from? And how do you toggle this fullScreen-Property of ?

[xstable]

Found a solution:

add this to your package.json in section dependencies:

  "dependencies": {
.....
 "react-native-video": "tranvinhtruong/react-native-video",
  "react-native-video-player": "https://github.com/tranvinhtruong/react-native-video-player",
...
}

Then go an follow the Instruction on this Page: https://github.com/tranvinhtruong/react-native-video-player#setting-up-fullscreen-on-android

This makes FullScreen work for me on Android.

[johnlim5847]

@xstable Hi! can you elaborate or share your code? I've follow the guide but still not able to achieve the full screen on android

[brunoti]

Any news on this issue? How can we help? I really need this... @xstable solution only works partially (doesn't have a close button on FullScreen).

[b-asaf]

Hi,
Is this issue solve in the new version of the package?

[chengsam]

Hi all, if you don't need to implement your own video player and want to display an intent chooser for the user to choose the video player, you can use https://github.com/BondGoat/react-native-native-video-player. I have tried and it worked on iOS and Android.

[MrHazimAli]

any update ?

[hermance]

Will this be in a future release? the lib is really great, this could be a very useful feature !
Thanks.

[ScreamZ]

@hermance @MrHazimAli No ad, but : https://github.com/ScreamZ/react-native-true-sight I made this when I struggled on that issue. This is using react-native-video but add a control layer on it.

[DavitVosk]

Any success with showing the video full screen on Android?

[wahdatkashmiri33]

`import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Dimensions, StatusBar, Button } from 'react-native';
import Video from 'react-native-video';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import { from } from 'rxjs';
export default class Main extends Component{

    state = {
    isPaused: false,
    //playName : 'pause-circle-filled',
    isMuted : false,

    isRotate : false,


};



render() {
    const { width } = Dimensions.get('window');
    const height = width * 0.5625;
    const nameplayIcon = 'pause-circle-filled'
    const namePauseIcon = 'play-arrow'
    let namePlay
    let pausedState = false


    if(pausedState === this.state.isPaused){
    namePlay = nameplayIcon;
    }
    else{
   namePlay = namePauseIcon
    }
    const unmuteIcon = 'volume-up'
    const muteIcon = 'volume-off'
    let nameMute 
    let mutedState = false
    if(mutedState === this.state.isMuted){
       nameMute = unmuteIcon

    }
    else{
        nameMute = muteIcon
    }

    const fullscreenIcon = 'fullscreen'
    const exitfullscreen = 'fullscreen-exit'
    let stateRotate = false
    let nameRotate
    if(stateRotate === this.state.isRotate){
        nameRotate = fullscreenIcon
    }
    else{
        nameRotate = exitfullscreen
        this.player.dismissFullscreenPlayer()
    }


    return (
        <View style={styles.container}>
            <Video
                source={require('../../demo_video.mp4')} // Can be a URL or a local file.
                ref={ref => {
                    this.player = ref;



                }} // Store reference

                resizeMode="contain"
                onBuffer={this.onBuffer} // Callback when remote video is buffering
                onError={this.videoError} // Callback when video cannot be loaded
                style={{ width, height }}
                controls={true}
                paused={this.state.isPaused}
                muted = {this.state.isMuted}
                repeat = {true}



            />
            <View style = {{flex :1, flexDirection : 'row' , justifyContent : 'space-between'}} >
            <MaterialIcons name = {namePlay} onPress = {

                   ()=> {this.setState((prevState) => {

                        return {
                            isPaused : !prevState.isPaused,


                        }

                    })}

            } 
            //  

            size = {30} color="#900" />



             <View style = {{flex :1}} >
                <MaterialIcons name = {nameMute} 
                size = {30} 
                onPress = {
                    () => {this.setState(
                        (previous) => {
                            return {
                                isMuted :!previous.isMuted
                            }
                        }
                    )}
                }
                />
            </View>


            <View style = {{flex :1}} >
                <MaterialIcons name =  {nameRotate}
                size = {30} 
                onPress = { ()=>  
                    {this.setState(
                        (previousrotate) => {
                            return {
                          isRotate : !previousrotate.isRotate,

                            }
                        }
                    ),this.player.presentFullscreenPlayer()}
                }

                />
            </View>
            </View>

        </View>

    );
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}
});
`

[wahdatkashmiri33]

Above code works for me

[xstable]

You might have a look at my repo.
I fork and upgraded react-native-video-player so that it now support react-native-video 4.4.0. Feel free to give it a try.

Because here, @IbrahimSulai is working on a build-in Fullscreen functionality, you can take my solution as temporary workaround

[hindkaer]

I've found that while this isn't implemented using react-native-video-player as a fallback for android and doing something like:

fullScreen = ()=> {
        if (Platform.OS == "android") {
            this.setState({paused: true})
            rnVideoPlayer.showVideoPlayer(this.props.source.uri);
        } else {
            this.player && this.player.presentFullscreenPlayer();
        }
    }

https://github.com/matiasfh/react-native-native-video-player#master

The code for launching the intent seems to be quite straight forward, not sure about keeping the current time though.

This solution worked for me, but the reference link is to a forked version which has an outdated README.

The original branch to react-native-native-video-player can be found here: https://github.com/BondGoat/react-native-native-video-player

[pssgo]

any update?

[ahmetabdi]

How's this issue been going for more than two years? Android really is a second class citizen in react-native world

[Eramirez06]

Any update with this guys?

[earlyCloud]

Any update guys ? I use react-native-video version 4.4.4, and seems that I'm still face this issue. It's bit of frustration.

[irvin373]

I handle in a native way using React Method and import in react
Android code:

@ReactMethod
    public void showVideoPlayer(String url) {
        Activity currentActivity = getCurrentActivity();
        if (currentActivity != null) {
            Intent videoIntent = new Intent(Intent.ACTION_VIEW);
            videoIntent.setDataAndType(Uri.parse(url), "video/*");
            currentActivity.startActivityForResult(videoIntent, VIDEO_CODE);
        }
    }

    @Override
    public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
        if (requestCode == VIDEO_CODE) {
            getCurrentActivity().finish();
        }
    }

React:

import {  Platform, NativeModules } from 'react-native';
const { VideoPlayerManager } = NativeModules;

displayVideo (url: string) {
    if (Platform.OS === 'android') {
      VideoPlayerManager.showVideoPlayer(url);
    } else if (this.player && this.shouldPlay) {
      this.shouldPlay = false;
      this.player.presentFullscreenPlayer();
    }
  }

Is just a patch while this issue is still open

[rivailruiz]

Any update?

[kvharini]

@irvin373
How to implement workaround for android? Can you give example in a project?

[DaniloPootaren]

Hello ,
Any updates on this issue?

[thecao-nucleusstudio]

@irvin373 Can you give me some more detail on your solution?

[irvin373]

@thecao-nucleusstudio I add a post https://medium.com/@irvin373/react-native-fullscreen-player-ac68925c53cc with all the code that you need :) and a very small example in github.