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-status

Or Yarn:

yarn add native-circular-status

Getting 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 App

License

This project is licensed under the MIT License © 2021-present Jakub Biesiada