# react-native-tooltip-progress-bar

> Animated Progress Bar with tooltip

Latest version **1.1.5** (published 2023-09-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-tooltip-progress-bar
pnpm add react-native-tooltip-progress-bar
yarn add react-native-tooltip-progress-bar
bun add react-native-tooltip-progress-bar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2023-09-23 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 134.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ayush Khade |
| Maintainers | ayushkhade |
| Keywords | Progress, Bar, Tooltip, Animated, Tooltip, react-native-progress-bar, react, native, tooltip, react, native, progress, bar, react, native, animated, progress, bar |

## Links

- npm: https://www.npmjs.com/package/react-native-tooltip-progress-bar
- Repository: https://github.com/Ayush-khade/react-native-tooltip-progress-bar
- Homepage: https://github.com/Ayush-khade/react-native-tooltip-progress-bar#readme
- Issues: https://github.com/Ayush-khade/react-native-tooltip-progress-bar/issues
- npm.io page: https://npm.io/package/react-native-tooltip-progress-bar

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2023-09-23
- 1.1.4 — 2023-09-23
- 1.1.3 — 2023-09-20
- 1.1.2 — 2023-09-20
- 1.1.1 — 2023-09-20
- 1.1.0 — 2023-09-20
- 1.0.0 — 2023-09-20

## README

# React Native Tooltip Progress Bar

This React Native Package is developed by Ayush Khade. A simple library for progress bar with a tooltip option and fully customisable.

## Demo

<img src='./Screenshot_1695249524.png' width='200'>

## Installation

- Go to your project's root folder and run `npm install react-native-tooltip-progress-bar` or `yarn add react-native-tooltip-progress-bar`.
- Run `npm run ios` or `npm run android` to start your application!
(Using yarn: `yarn ios` or `yarn android`)

## Usage

```js

import React from 'react';
import {Text, View} from 'react-native';
import RNProgressBar from 'react-native-tooltip-progress-bar';

const App = () => {
  return (
    <>
      <Text
        style={{
          color: 'black',
          fontSize: 24,
          textAlign: 'center',
          fontWeight: 'bold',
        }}>
        React Native Tooltip Progress Bar
      </Text>
      <Text style={{color: 'black', fontSize: 18, textAlign: 'center'}}>
        Developed by - Ayush Khade
      </Text>
      <View style={{flex: 1, justifyContent: 'center', margin: 5}}>
        <View style={{}}>
          <View style={{height: 70}}>
            <Text style={{color: 'black', fontSize: 17}}>
              Progress Bar with all defaults
            </Text>
            <RNProgressBar />
          </View>

          <View style={{height: 70}}>
            <Text style={{color: 'black', fontSize: 17}}>
              Progress Bar without tooltip
            </Text>
            <RNProgressBar
              options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
              showTooltip={false}
            />
          </View>

          <View style={{height: 70}}>
            <Text style={{color: 'black', fontSize: 17}}>
              Progress Bar with custom bar colors
            </Text>
            <RNProgressBar
              options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
            />
          </View>

          <View style={{height: 70}}>
            <Text style={{color: 'black', fontSize: 17}}>
              Progress Bar with Low, High & Value
            </Text>
            <RNProgressBar
              options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
              low={10}
              high={200}
              value={143}
            />
          </View>

          <View style={{height: 70}}>
            <Text style={{color: 'black', fontSize: 17}}>
              Progress Bar with thickness: 20
            </Text>
            <RNProgressBar options={{barThickness: 20}} />
          </View>
        </View>

        <View
          style={{
            flexDirection: 'row',
            marginTop: 30,
            justifyContent: 'center',
          }}>
          <View style={{height: 200, flex: 1, alignItems: 'center'}}>
            <RNProgressBar
              options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
              type={'vertical'}
            />
          </View>
          <View style={{height: 200, flex: 1, alignItems: 'center'}}>
            <RNProgressBar
              options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
              type={'vertical'}
              low={30}
              high={300}
              value={90}
            />
          </View>
          <View style={{height: 200, flex: 1, alignItems: 'center'}}>
            <RNProgressBar
              options={{
                leftColor: '#4385f0',
                rightColor: '#aac0e3',
                barThickness: 25,
              }}
              type={'vertical'}
              low={30}
              high={300}
              value={90}
            />
          </View>
        </View>
      </View>
    </>
  );
};
export default App;


```

### Properties for RNProgressBar

| Prop                                 | Description                                                                  | Default                |
| ------------------------------------ | ---------------------------------------------------------------------------- | ---------------------- |
| **`low`**                            | Lower limit of a `Progress Bar`.                                             | `0`                    |
| **`high`**                           | Higher limit of a `Progress Bar`.                                            | `100`                  |
| **`value`**                          | Progres value.                                                               | `Random`               |
| **`type`**                           | Progress Bar type `horizontal` or `vertical`.                                | `horizontal`           |
| **`showTooltip`**                    | Tooltip is `visible` when `true`.                                            | `true`                 |
| **`options`**                        | Options for the Progress Bar                                                 | `{ leftColor:"#008b91", rightColor:"#b53636", barThickness:10, tooltipSize:10, tooltipTextColor:"#ffffff", tooltipBackgroundColor:"#000000" }` |

---
_Source: https://npm.io/package/react-native-tooltip-progress-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._