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

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

NativeCircularStatus

Component extends TouchableOpacityProps and has the following props:

name	type	default	description
progress
iconPause
iconPlay
paused
renderContent
variant
animated
color
placeholderColor
onPause
onPlay
onStatusChanged
thinking
contentProps
iconProps
placeholderProps
progressProps

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