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()} );