ComponentsDisplay
LoadingSpinner
A loading spinner that shows when the video is buffering, customizable in size, color, and style.
Usage
import React from 'react';
import { LoadingSpinner, useBuffering } from 'react-native-video-toolkit';
import { Button } from '@/components/ui/button';
import { View } from 'react-native';
export const LoadingSpinnerExample = () => {
const { setBuffering } = useBuffering();
return (
<>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
gap: 10,
position: 'absolute',
top: 10,
}}>
<Button onClick={() => setBuffering(true)}>Start Buffering</Button>
<Button onClick={() => setBuffering(false)}>Stop Buffering</Button>
</View>
<View style={{}}>
<LoadingSpinner />
</View>
</>
);
};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.