https://github.com/moschan/react-native-progress-bar-classic

Simple animated progress bar for React Native
https://github.com/moschan/react-native-progress-bar-classic

npm-package react-native

Last synced: 17 days ago
JSON representation

Simple animated progress bar for React Native

• Host: GitHub
• URL: https://github.com/moschan/react-native-progress-bar-classic
• Owner: moschan
• License: mit
• Created: 2016-01-06T09:56:25.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-11T04:36:41.000Z (almost 8 years ago)
• Last Synced: 2025-04-11T06:09:22.851Z (17 days ago)
• Topics: npm-package, react-native
• Language: JavaScript
• Size: 362 KB
• Stars: 35
• Watchers: 1
• Forks: 18
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
react-native-progress-bar-classic

===

> Simple animated progress bar for React Native

[![npm](https://img.shields.io/npm/v/react-native-progress-bar-classic.svg)]()[![npm](https://img.shields.io/npm/l/react-native-progress-bar-classic.svg)]()

[![NPM](https://nodei.co/npm/react-native-progress-bar-classic.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-native-progress-bar-classic/)

Demo

---

![Demo](./doc/demo.gif)

Installation

==

in Cli

---

```

npm i react-native-progress-bar-classic

```

Usage

===

Simple

---

```

import ProgressBarClassic from 'react-native-progress-bar-classic';

```

Customized

---

```

```

Props

===

progress(Int) `Default: 0`

---

The Progress. `progress` can take 0 to 100.

valueStyle(String) `Default: 'default'`

---

`valueStyle` detect style of progress percentage

### `'default'`

![Demo](./doc/default.jpg)

### `'balloon'`

![Demo](./doc/balloon.jpg)

### `'none'`

![Demo](./doc/none.jpg)

label(String)

---

The bar label. You cannot use with `valueStyle: 'balloon'`.

![Demo](./doc/label.jpg)

value(String)

---

If you want to show value, you can use the `value` props. You have to use `value` props with `label` props.

![Demo](./doc/value.jpg)

TODO

==

- [ ] can change style (color, height, etc..)

- 

Contributing

==

Of course! Welcome :)

License

==

MIT