ComponentsDisplay Components
LoadingSpinner
A loading spinner that shows when the video is buffering, customizable in size, color, and style.
Usage
import { LoadingSpinner } from 'react-native-video-toolkit';
const MyLoadingSpinner = () => {
return <LoadingSpinner />;
};Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
size | 'small' | 'large' | No | 'large' | Size of the spinner indicator. |
color | string | No | Theme primary color | Color of the spinner. |
style | StyleProp<ViewStyle> | No | – | Custom styles for the spinner container. |
Examples
Default Spinner
<LoadingSpinner />Small White Spinner
<LoadingSpinner size="small" color="#fff" />Custom Positioned Spinner
<LoadingSpinner style={{ top: 100, left: 100 }} />Integration Example
Place inside your VideoPlayer layout to show buffering status automatically:
import { VideoPlayer, LoadingSpinner } from 'react-native-video-toolkit';
const MyVideoPlayer = () => {
return (
<VideoPlayer source={{ uri: 'https://example.com/video.mp4' }}>
<VideoPlayer.Controls>
<LoadingSpinner size="large" color="cyan" />
</VideoPlayer.Controls>
</VideoPlayer>
);
};- Spinner visibility is fully managed internally by the
useBufferinghook. - Integrates with your theme via the
primarycolor. - If you pass
color, it overrides the theme color.