Video positioning on Android

[sadikyalcin]

Bug

Video not centred vertically & horizontally on Android. Regardless of using flex or absolute positioning. Same behaviour when rotating the orientation as well.

It works perfectly fine on iOS and version 4.4.5. You can replicate the problem on v5+.

Platform

• Android ExoPlayer

Environment info

react-native: 0.61.5
Android: 9 & 10
Library version: 5.0.0+

Steps To Reproduce

1. Create a flex container and centre children
2. Put the video component inside.

Expected behaviour

1. Video to be centred
2. Video to resize and be centred on orientation change.

Reproducible sample code

<SafeAreaView style={styles.container} forceInset={{top: 'always'}}>
    <StatusBar
        backgroundColor={themeVars.black}
        barStyle="light-content"
    />
    <View style={styles.videoWrapper}>
        <Video
            source={{uri: source.uri}}
            style={styles.video}
            controls={true}
        />
    </View>
</SafeAreaView>

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        backgroundColor: 'black',
    },
    videoWrapper: {
        flex: 1,
        justifyContent: 'center',
        alignContent: 'center',
        alignItems: 'center',
    },
    video: {
        width: '100%',
        height: '100%',
    },
});

Video sample

Version 4.4.5:

Version: 5.0.2

Version: 5.0.2 on iOS

[jenshandersson]

it looks like you're not using Exoplayer... The seeker bar is white with Exo, green with MediaPlayer. The video size is fine for me on latest master and Exoplayer

[sadikyalcin]

it looks like you're not using Exoplayer... The seeker bar is white with Exo, green with MediaPlayer. The video size is fine for me on latest master and Exoplayer

Forgive my ignorance but how do we define which player to use? Can't see anything in the docs...

[jenshandersson]

Check under https://github.com/react-native-community/react-native-video#android-installation
Default is MediaPlayer, you need to update your settings.gradle. We are going to default to ExoPlayer in coming release.

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

[sadikyalcin]

Check under https://github.com/react-native-community/react-native-video#android-installation
Default is MediaPlayer, you need to update your settings.gradle. We are going to default to ExoPlayer in coming release.

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

Perfect. Thanks for your help. I'll try it in a bit.

[jenshandersson]

Ah it could have been due to the js fullscreen hack. I just merged this PR to master, can you try to replicate using the latest master version?

#2013

[sadikyalcin]

Good news; nope I can't. Cloned the repo and it's working perfectly fine now.

[jenshandersson]

Woop woop 🙌

[vipycm]

add resizeMode={"contain"} work for me