diff --git a/README.md b/README.md
index ce31247..dcf3dd1 100644
--- a/README.md
+++ b/README.md
@@ -85,6 +85,7 @@ react-native link react-native-vector-icons
| onHideControls | Callback for when the controls are being hide. |
| onShowControls | Callback for when the controls are being shown. |
| customStyles | The player can be customized in this object, see customStyles for the options. |
+| renderOverlayComponent | Render an overlay component on top of the video, but under controls / play button. |
All other props are passed to the react-native-video component.
diff --git a/index.js b/index.js
index b16b485..c16eb19 100644
--- a/index.js
+++ b/index.js
@@ -91,6 +91,7 @@ const styles = StyleSheet.create({
overlayButton: {
flex: 1,
},
+ overlayComponentWrapper: StyleSheet.absoluteFill,
});
export default class VideoPlayer extends Component {
@@ -378,6 +379,7 @@ export default class VideoPlayer extends Component {
]}
source={thumbnail}
>
+ {this.renderOverlay()}
{this.renderStartButton()}
);
@@ -465,6 +467,14 @@ export default class VideoPlayer extends Component {
);
}
+ renderOverlay() {
+ return this.props.renderOverlayComponent ? (
+
+ {this.props.renderOverlayComponent()}
+
+ ) : null;
+ }
+
renderVideo() {
const {
video,
@@ -502,6 +512,7 @@ export default class VideoPlayer extends Component {
{ marginTop: -this.getSizeStyles().height },
]}
>
+ {this.renderOverlay()}
{
@@ -533,6 +544,7 @@ export default class VideoPlayer extends Component {
} else if (!isStarted) {
return (
+ {this.renderOverlay()}
{this.renderStartButton()}
);