LoadingSpinner

LoadingSpinner is a control component that displays a loading indicator whenever the video is buffering.
It automatically hides when buffering is not active. The spinner can be customized in size, color, and style, and it integrates seamlessly with the player's theme.

---

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

---

info

• Spinner visibility is fully managed internally by the useBuffering hook.
• Integrates with your theme via the primary color.
• If you pass color, it overrides the theme color.