react-native-transparent-video

React Native video player with alpha channel (alpha-packing) support. It works on iOS and Android.

Example of a mp4 video with alpha-packing:

https://github.com/status-im/react-native-transparent-video/assets/18485527/69ea988e-0c7d-4123-84a1-1ca46b61994e

Recommendations

To achieve best compatibility across different Android devices and versions, please check the video encoding recommendations from the Android documentation portal.

Installation

npm install react-native-transparent-video

or

yarn add react-native-transparent-video

Usage

import TransparentVideo from 'react-native-transparent-video';

const video = require('../assets/video.mp4');

function App() {
  return (
    <View>
      <TransparentVideo source={video} style={styles.transparentVideo} />
    </View>
  );
}

const styles = StyleSheet.create({
  transparentVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Recognition

Special thanks to:

• Quentin Fasquel for this Medium article
• Tristan Ferré for this Medium article
• @pavelsemak for creating this repository and @nopol10 for this fork which implements the alpha-packing approach that was used to build this React Native library

License

MIT