2023-05-13 01:16:25 -03:00
![](https://github.com/status-im/react-native-transparent-video/assets/18485527/92a5b88f-b152-404e-a4ff-5d7552842cd8)
2023-05-02 21:31:14 -03:00
# react-native-transparent-video
2023-05-13 01:05:36 -03:00
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
2023-05-02 21:31:14 -03:00
2023-06-14 09:22:26 -03:00
### Recommendations
To achieve best compatibility across different Android devices and versions, please check the [video encoding recommendations ](https://developer.android.com/guide/topics/media/media-formats#video-encoding ) from the Android documentation portal.
2023-05-02 21:31:14 -03:00
## Installation
```sh
2023-08-15 13:43:59 -03:00
npm install @status -im/react-native-transparent-video
2023-05-02 21:31:14 -03:00
```
2023-05-13 01:05:36 -03:00
or
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
```sh
2023-08-15 13:43:59 -03:00
yarn add @status -im/react-native-transparent-video
2023-05-13 01:05:36 -03:00
```
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
## Usage
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
```js
2023-08-15 13:43:59 -03:00
import TransparentVideo from '@status -im/react-native-transparent-video';
2023-05-13 01:05:36 -03:00
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,
},
});
2023-05-02 21:31:14 -03:00
```
## Contributing
See the [contributing guide ](CONTRIBUTING.md ) to learn how to contribute to the repository and the development workflow.
2023-05-13 01:05:36 -03:00
## Recognition
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
Special thanks to:
- Quentin Fasquel for this [Medium article ](https://medium.com/@quentinfasquel/ios-transparent-video-with-coreimage-52cfb2544d54 )
- Tristan Ferré for this [Medium article ](https://medium.com/go-electra/unlock-transparency-in-videos-on-android-5dc43776cc72 )
2023-05-13 01:22:50 -03:00
- [@pavelsemak ](https://www.github.com/pavelsemak ) for creating [this repository ](https://github.com/pavelsemak/alpha-movie ) and [@nopol10 ](https://www.github.com/nopol10 ) for [this fork ](https://github.com/nopol10/alpha-movie ) which implements the alpha-packing approach that was used to build this React Native library
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
## License
2023-05-02 21:31:14 -03:00
2023-05-13 01:05:36 -03:00
MIT