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


Keywords
react, android, ios, library, mobile, react-native, component, download, animation, progress-bar, loading, play, pause, indicator, expo
License
MIT
Install
npm install native-circular-status@0.0.1

Documentation

Native Circular Status

NPM version NPM downloads NPM license run in expo snack Codecov Travis Bundle size

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