Video with white background appears with black background on some Androids

[amaury1093]

🐛 Bug Report

I have a video, which basically is a white background, with some smoke on the bottom right side. On some Android devices, it appears with a black background:

Environment

[15:25:06] Generating diagnostics report...
[15:25:06] You can join our slack here: https://slack.expo.io/.

  Expo CLI 2.3.6 environment info:
    System:
      OS: macOS 10.14.3
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.1.0 - /usr/local/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.5.0 - /usr/local/bin/npm
    IDEs:
      Xcode: 10.2/10E125 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^32.0.0 => 32.0.6 
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1 
      react-navigation: ^3.0.9 => 3.3.2 
    npmGlobalPackages:
      expo-cli: 2.3.6

  Diagnostics report:
    https://exp-xde-diagnostics.s3.amazonaws.com/amaurymartiny-8ab57533-1e6b-447d-b243-29cb4c2f7164.tar.gz

This bug has only been reproduced on some Android devices, including:

• Google Pixel 2 XL, Android 9

Steps to Reproduce

The steps to reproduce are pretty hard.

• Get one of the above Android devices
• Get the app: (one of the 3 below)
  • Install this apk https://expo.io/artifacts/e62f33fa-d38c-4c74-af25-fc77c83636fd (if you trust me)
  • https://expo.io/@amaurymartiny/shoot-i-smoke, on the default release channel
  • Build from source https://github.com/amaurymartiny/shoot-i-smoke/tree/am-white-video - you'll need some api tokens though...

The complete source code is https://github.com/amaurymartiny/shoot-i-smoke/tree/am-white-video (am-white-video branch, the video is in this folder), and clearly has a white background.

I initially had a transparent background video, and thought that the black background was caused by transparency. But now, as you can see, the video itself has a white background, and the bug is still here.

Expected Behavior

White background.

Actual Behavior

Black background.

Reproducible Demo

See this file:

import React, { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import { inject, observer } from 'mobx-react';
import { Video } from 'expo';

import smokeVideo from '../../../../assets/video/smoke_bg_720.mp4'; // This video has a white background!

@inject('stores')
@observer
export class SmokeVideo extends Component {
  /* snip */
  render () {
    return (
      <Video
        isLooping
        resizeMode='cover'
        shouldPlay
        source={smokeVideo}
        style={[styles.video, this.getVideoStyle()]}
      />
    );
  }
}

[amaury1093]

FWIW, here's how we solved it on our side: https://github.com/amaurymartiny/shoot-i-smoke/pull/70/files#diff-ab19598a07e60e855062e25b8ea312c0R19.

[github-actions]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.