Animated Progress Bar with tooltip
npm install react-native-tooltip-progress-bar
npm install react-native-tooltip-progress-bar or yarn add react-native-tooltip-progress-bar.
npm run ios or npm run android to start your application!
yarn ios or yarn android)
js
import React from 'react';
import {Text, View} from 'react-native';
import RNProgressBar from 'react-native-tooltip-progress-bar';
const App = () => {
return (
<>
style={{
color: 'black',
fontSize: 24,
textAlign: 'center',
fontWeight: 'bold',
}}>
React Native Tooltip Progress Bar
Developed by - Ayush Khade
Progress Bar with all defaults
Progress Bar without tooltip
options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
showTooltip={false}
/>
Progress Bar with custom bar colors
options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
/>
Progress Bar with Low, High & Value
options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
low={10}
high={200}
value={143}
/>
Progress Bar with thickness: 20
style={{
flexDirection: 'row',
marginTop: 30,
justifyContent: 'center',
}}>
options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
type={'vertical'}
/>
options={{leftColor: '#4385f0', rightColor: '#aac0e3'}}
type={'vertical'}
low={30}
high={300}
value={90}
/>
options={{
leftColor: '#4385f0',
rightColor: '#aac0e3',
barThickness: 25,
}}
type={'vertical'}
low={30}
high={300}
value={90}
/>
>
);
};
export default App;
`
$3
| 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" }` |