Native Circular Status
About
Progress bar modeled on the animation from Apple Music and App Store on iOS
Similar Projects
- react-native-progress by Joel Arvidsson
- React Native Progress Circle by Christoph Michel
- react-native-circular-progress by Bart Gryszko
- react-native-circular-progress-indicator by nithinpp69
How to Install
First, install the library in your project by npm:
npm install native-circular-statusOr Yarn:
yarn add native-circular-statusGetting Started
Connect the library with the project using ES6 import:
import NativeCircularStatus from 'native-circular-status'Options
Component extends TouchableOpacityProps
| Name | Type | Default | Description |
|---|---|---|---|
| progress | number | |
Progress value |
| iconPause | Ionicon icon name or icon name for other selected icon type | square |
Icon visible when paused status is true
|
| iconPlay | Ionicon icon name or icon name for other selected icon type | pause |
Icon visible when paused status is false
|
| paused | boolean | false |
Prop to play/pause progress action |
| renderContent | ({ progress, paused }) => React.ReactNode | undefined |
Custom content renderer |
| variant | 'normal' or 'compact' | normal |
Prop to define progress variant - normal, compact
|
| animated | boolean | true |
Prop to enable/disable animation |
| color | string | #fb2c53 |
Color for the progress element |
| placeholderColor | string | #eeeeef |
Color for the placeholder element |
| onPause | () => void | undefined |
Callback when status changed from play to pause |
| onPlay | () => void | undefined |
Callback when status changed from pause to play |
| onStatusChanged | (paused: boolean) => void | undefined |
Callback when status changed from play to pause or pause to play |
| thinking | boolean | false |
Prop to enable/disable thinking (loading) animation |
| contentProps | ViewProps | {} |
Props for the content element |
| iconProps | IconProps | {} |
Props for the icon element |
| placeholderProps | ViewProps | {} |
Props for the placeholder element |
| progressProps | CirclePropTypes | {} |
Props for the progress element |
Example
import React, { useState } from 'react'
import NativeCircularStatus from 'native-circular-status'
const App = () => {
const [paused, setPaused] = useState(false)
return (
<NativeCircularStatus
progress={0.4}
paused={paused}
onPlay={() => setPaused(false)}
onPause={() => setPaused(true)}
/>
)
}
export default AppLicense
This project is licensed under the MIT License © 2021-present Jakub Biesiada
