diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx index 184f7c6055..2129886814 100644 --- a/docs/pages/component/props.mdx +++ b/docs/pages/component/props.mdx @@ -518,14 +518,29 @@ Speed at which the media should play. -Allows you to create custom components to display while the video is loading. If `renderLoader` is provided, `poster` and `posterResizeMode` will be ignored. +Allows you to create custom components to display while the video is loading. +If `renderLoader` is provided, `poster` and `posterResizeMode` will be ignored. +renderLoader is either a component or a function returning a component. +It is recommended to use the function for optimization matter. + +`renderLoader` function be called with parameters of type `ReactVideoRenderLoaderProps` to be able to adapt loader + +```typescript +interface ReactVideoRenderLoaderProps { + source?: ReactVideoSource; /// source of the video + style?: StyleProp; /// style to apply + resizeMode?: EnumValues; /// resizeMode provided to the video component +} +```` + +Sample: ```javascript ```` diff --git a/examples/basic/src/VideoPlayer.tsx b/examples/basic/src/VideoPlayer.tsx index 71aa654e3d..6381f34bdf 100644 --- a/examples/basic/src/VideoPlayer.tsx +++ b/examples/basic/src/VideoPlayer.tsx @@ -236,6 +236,18 @@ const VideoPlayer: FC = ({}) => { Platform.OS === 'ios' && setPaused(true); }; + const _renderLoader = showPoster ? () => : undefined; + + const _subtitleStyle = {subtitlesFollowVideo: true}; + const _controlsStyles = { + hideNavigationBarOnFullScreenMode: true, + hideNotificationBarOnFullScreenMode: true, + }; + const _bufferConfig = { + ...bufferConfig, + cacheSizeMB: useCache ? 200 : 0, + } + return (