this.player.presentFullscreenPlayer() doesn't work on android #534

wack17s · 2017-03-17T18:17:27Z

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

gergob · 2017-03-18T12:12:49Z

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

xavieramoros · 2017-03-27T10:32:13Z

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 · 2017-03-29T12:09:00Z

RN 0.40, RN Video 1.0.0

kevinvandijk · 2017-04-23T14:48:36Z

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

alixeb · 2017-04-26T15:16:20Z

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 · 2017-04-28T16:36:27Z

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

mcatmos · 2017-05-05T08:03:42Z

Not working on Android

452MJ · 2017-05-07T02:12:10Z

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 · 2017-05-15T11:26:40Z

Any update on this?

alvelig · 2017-05-27T04:57:13Z

Same for me... not working on Android.

Choujiji · 2017-05-28T03:41:16Z

+1 hope to fix it

heartAndRain · 2017-05-28T13:19:24Z

This function seems not to be implemented in java

alixeb · 2017-05-31T15:53:34Z

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:

Use CSS to make video as big as the screen
Use paused={false} to play the video by default
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 · 2017-05-31T16:30:54Z

@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 · 2017-07-20T13:38:30Z

Any update with this?

RyanMitchellWilson · 2017-08-09T22:27:17Z

Any update?

b-asaf · 2017-08-14T12:32:17Z

same here, I am using
RN 0.45.1
video 1.2.0

presentFullscreenPlayer() is not working on Android.

mandriv · 2017-08-27T01:42:58Z

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

leon3110l · 2017-08-29T11:26:46Z

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 · 2017-09-08T13:06:50Z

Would be good to have an official answer on this

viperfx · 2017-09-13T22:29:50Z

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 · 2017-09-13T22:37:21Z

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 · 2017-09-14T04:12:11Z

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" ***@***.***> 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 <#534 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAUCQeTFDenDojENDcaJhV96ol-D3Wsqks5siFkjgaJpZM4Mg7xP> .

alvelig · 2017-09-14T04:24:20Z

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

viperfx · 2017-09-14T17:31:24Z

@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 · 2017-09-14T22:54:08Z

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 · 2017-12-08T11:25:17Z

@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 · 2017-12-17T15:23:17Z

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

landmass · 2017-12-19T06:18:40Z

@wack17s How is the problem resolved ?

xstable · 2018-06-04T19:21:05Z

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 · 2018-06-14T06:59:45Z

@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 · 2018-07-17T03:54:29Z

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 · 2018-07-17T12:15:15Z

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

chengsam · 2018-08-13T08:44:10Z

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 · 2018-10-18T03:51:23Z

any update ?

hermance · 2018-10-26T15:43:21Z

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

ScreamZ · 2018-10-26T15:53:30Z

@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 · 2018-12-07T09:47:52Z

Any success with showing the video full screen on Android?

wahdatkashmiri33 · 2019-02-09T09:58:03Z

`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 · 2019-02-09T10:00:06Z

Above code works for me

xstable · 2019-02-28T07:34:32Z

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 · 2019-06-12T12:03:40Z

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

premillos · 2019-07-29T06:32:02Z

any update?

ahmetabdi · 2019-08-01T11:20:05Z

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

Eramirez06 · 2019-10-23T22:47:51Z

Any update with this guys?

earlyCloud · 2019-12-05T12:08:58Z

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 · 2019-12-05T14:54:28Z

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 · 2020-03-06T19:58:42Z

Any update?

kvharini · 2020-05-27T01:04:30Z

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

DaniloPootaren · 2020-06-12T12:20:42Z

Hello ,
Any updates on this issue?

thecao-nucleusstudio · 2020-06-26T09:47:56Z

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

irvin373 · 2020-06-27T23:36:37Z

@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.

omarbakr2020 · 2023-02-22T21:09:38Z

Any new updates regarding this issue ?

sen46Sko · 2024-05-28T14:58:07Z

Just adding controll props for android platform solved my problem....

premillos · 2024-05-28T14:58:48Z

这是来自QQ邮箱的假期自动回复邮件。您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

frankiewiczkamil mentioned this issue Aug 9, 2017

presentFullscreenPlayer doesn't work on Android #726

Closed

hueniverse added the stale Closed due to inactivity or lack or resources label Apr 22, 2022

hueniverse closed this as completed Apr 22, 2022

This comment was marked as spam.

Sign in to view

this.player.presentFullscreenPlayer() doesn't work on android #534

this.player.presentFullscreenPlayer() doesn't work on android #534

Comments

wack17s commented Mar 17, 2017

gergob commented Mar 18, 2017

xavieramoros commented Mar 27, 2017

wack17s commented Mar 29, 2017

kevinvandijk commented Apr 23, 2017

alixeb commented Apr 26, 2017 • edited Loading

SebT commented Apr 28, 2017

mcatmos commented May 5, 2017

452MJ commented May 7, 2017 • edited Loading

roancoetzee commented May 15, 2017

alvelig commented May 27, 2017

Choujiji commented May 28, 2017

heartAndRain commented May 28, 2017

alixeb commented May 31, 2017

SebT commented May 31, 2017

luisfuertes commented Jul 20, 2017

RyanMitchellWilson commented Aug 9, 2017

b-asaf commented Aug 14, 2017

mandriv commented Aug 27, 2017

leon3110l commented Aug 29, 2017

tirrorex commented Sep 8, 2017

viperfx commented Sep 13, 2017

AndrewJack commented Sep 13, 2017

viperfx commented Sep 14, 2017 via email

alvelig commented Sep 14, 2017

viperfx commented Sep 14, 2017 • edited Loading

viperfx commented Sep 14, 2017

shouwangshe commented Dec 8, 2017

heiBin commented Dec 17, 2017

landmass commented Dec 19, 2017

xstable commented Jun 4, 2018

johnlim5847 commented Jun 14, 2018

brunoti commented Jul 17, 2018

b-asaf commented Jul 17, 2018

chengsam commented Aug 13, 2018

MrHazimAli commented Oct 18, 2018

hermance commented Oct 26, 2018

ScreamZ commented Oct 26, 2018

DavitVosk commented Dec 7, 2018 • edited Loading

wahdatkashmiri33 commented Feb 9, 2019

wahdatkashmiri33 commented Feb 9, 2019

xstable commented Feb 28, 2019

hindkaer commented Jun 12, 2019

premillos commented Jul 29, 2019

ahmetabdi commented Aug 1, 2019

Eramirez06 commented Oct 23, 2019

earlyCloud commented Dec 5, 2019

irvin373 commented Dec 5, 2019

rivailruiz commented Mar 6, 2020

kvharini commented May 27, 2020

DaniloPootaren commented Jun 12, 2020

thecao-nucleusstudio commented Jun 26, 2020

irvin373 commented Jun 27, 2020

This comment was marked as spam.

omarbakr2020 commented Feb 22, 2023

This comment was marked as spam.

sen46Sko commented May 28, 2024

premillos commented May 28, 2024 via email

alixeb commented Apr 26, 2017 •

edited

Loading

452MJ commented May 7, 2017 •

edited

Loading

viperfx commented Sep 14, 2017 •

edited

Loading

DavitVosk commented Dec 7, 2018 •

edited

Loading