Native-circular-status NPM

Native Circular Status

About

Progress bar modeled on the animation from Apple Music and App Store on iOS

Similar Projects

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: number, paused: boolean) => 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