react-native-custom-spinner

A drop-in, zero-dependency replacement for <ActivityIndicator /> from React Native. API-compatible with react-native-paper's ActivityIndicator.

Demo

https://github.com/user-attachments/assets/2bce73ca-be3d-494f-96e7-9b051ca95c5c

Installation

npm install react-native-custom-spinner

Usage

import { ActivityIndicator } from 'react-native-custom-spinner';

// Basic usage (matches React Native Paper's API)
<ActivityIndicator />
<ActivityIndicator animating={false} />
<ActivityIndicator size="large" color="blue" />

// With custom styling
<ActivityIndicator
  size={40}
  duration={800}
  ringThickness={4}
  style={{ margin: 10 }}
/>

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------ | ----------- | ------------------------------------------------------------------------ | | animating | boolean | true | Whether to show the indicator or hide it | | color | string | '#F95B5F' | The color of the spinner | | size | 'small' \| 'large' \| number | 'small' | Size of the indicator - 'small' (20px), 'large' (36px), or custom number | | hidesWhenStopped | boolean | true | Whether the indicator should hide when not animating | | style | ViewStyle | - | Style object for the container | | duration | number | 1000 | The duration of one complete rotation in milliseconds | | ringThickness | number | 6 | The thickness of the spinner rings in pixels | | backgroundOpacity | number | 0.2 | The opacity of the background ring (0-1) |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library