Controls doesn't appear on Android

[FelipeSSantos1]

Current behavior

My component video doesn't work on Android, the controls simply doesn't appear, on iPhone works 100%.

Reproduction steps

Run on Android simulator.

Expected behavior

The controls (play, pause, stop...) should appear

Platform

Which player are you experiencing the problem on:

• Android ExoPlayer

Video sample

https://youtu.be/Aa8UKZVNckw

settings.gradle

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

build.gradle

dependencies {
[...]
    implementation project(':react-native-video')
[...]
}

MainApplication.java

[...]
import com.brentvatne.react.ReactVideoPackage;
[...]
protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(new MainReactPackage(), new RNFirebasePackage(), new RNFirebaseAuthPackage(),
          new OrientationPackage(), new ReactVideoPackage(), new RNFirebaseDatabasePackage(),
          new RNGoogleSigninPackage(), new VectorIconsPackage(), new FastImageViewPackage());
    }

Component

<Video
  onEnd={this.onEnd}
  onLoad={this.onLoad}
  onLoadStart={this.onLoadStart}
  onProgress={this.onProgress}
  paused={this.state.paused}
  controls={true}
  resizeMode="content"
  source={{ uri: phyxPlayList.currentVideo }}
  width={width}
  height={videoHeight}
  ref={videoPlayer => (this.videoPlayer = videoPlayer)}
/>

[arggrande]

Ive hit the same issue, what version of React Native are you using? Im currently on 0.56.

[FelipeSSantos1]

Ive hit the same issue, what version of React Native are you using? Im currently on 0.56.

I'm using 0.57.0

for now to 'fix' this issue I'm using react-native-media-controls

on the code I do that

                    <Video
                      onEnd={this.onEnd}
                      onLoad={this.onLoad}
                      onLoadStart={this.onLoadStart}
                      onProgress={this.onProgress}
                      paused={this.state.paused}
                      controls={true}
                      resizeMode="content"
                      source={{ uri: phyxPlayList.currentVideo }}
                      width={width}
                      height={videoHeight}
                      ref={videoPlayer => (this.videoPlayer = videoPlayer)}
                    />
                    {Platform.OS !== 'ios' && (
                      <MediaControls
                        duration={this.state.duration}
                        isLoading={this.state.isLoading}
                        mainColor={themeBase.colors.primary3}
                        onPaused={this.onPaused}
                        onReplay={this.onReplay}
                        onSeek={this.onSeek}
                        playerState={this.state.playerState}
                        progress={this.state.currentTime}
                      />
                    )}

But I'd like to use just react-native-video, it's a great library, and if you use react-native-media-controls, you need to use react-native-orientation to check if the dispositive is on LANDSCAPE mode and if yes, hide manualy other components, like this:

if (item.feedid === phyxPlayList.currentDayId) {
            return (
              <TouchableRipple
                onPress={() => {
                  setCurrentDayId(item.feedid);
                  setCurrentDay(this.getObjDay(item.feedid));
                }}
                rippleColor={themeBase.colors.clickButton}
                key={`days_${item.feedid}_${_.random(10000)}`}
              >
                <ViewDayActive>
                  <TextDayActive>Day {x}</TextDayActive>
                </ViewDayActive>
              </TouchableRipple>
            );
          }

It's crazy!

[arggrande]

One thing to keep in mind is that it looks like the controls attribute is iOS only? Im not sure what DOM is in this context.

https://github.com/react-native-community/react-native-video#controls

controls
Determines whether to show player controls.

** false (default)** - Don't show player controls
true - Show player controls
Note on iOS, controls are always shown when in fullscreen mode.

Platforms: DOM, iOS

[cobarx]

On iOS, the system provides a default set of controls that are intended for developers who don't want to build their own controls.

Android doesn't have a similar feature, so we'd have to build it or include the sample controls provided by ExoPlayer. Imo, those look like crap so I have not wanted to include them, it makes more sense to use a package like react-native-media-controls or build your own.

I have a set of controls that are fairly nice that I could release as a separate module but haven't gotten approval from my employer to open source them.

DOM refers to react-native-dom implementation of React Native for the web. The html5 video element spec requires it to provide a set of controls.

[IbrahimSulai]

Opened a PR (#1414) for showing the controls in Android Exoplayer.