🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Native component used for rending responsive, animated, highly-customizable progress bars.

Loading React Native

Documentation

Responsive React Native Animated Bar

Install

npm install react-native-animated-bar --save  yarn add react-native-animated-bar 

Live Demo

https://snack.expo.io/Hk03E4Avb

Configuration Options

  • height - Configure the height. Default: 10. AutoSize height of bar set to null (height={null})
  • borderColor - Configures the border color. Default: #000.
  • borderWidth - Configures the width of the border. Default: 1.
  • borderRadius - Configures border radius. Default: 0.
  • barColor - Configures the color of the progress bar. Default: #FFF.
  • fillColor - Configures color behind progress bar. Default: rgba(0,0,0,.5).
  • duration - Configures length of time in milliseconds the change in progress should take. Default: 100.
  • animate - Configures whether or not change in progress should be animated. Default: true
  • onAnimate - Callback listener for the animated value. Default: undefined
  • style - Pass in any styling for the outer containing view. This defines the general layout of the bar for column, row, and the height prop.
  • wrapStyle - Add arbitrary styling to the wrapping view. This is where borderColor, borderWidth, and borderRadius stylings are applied.
  • fillStyle - Add arbitrary styling to inner fill(behind the bar), this is what fillColor is applied to.
  • barStyle - Add arbitrary styling to the bar, this si what barColor is applied to.

Any color above can be an animated interpolated value

Example Usage

import React, { Component } from 'react'; import {   AppRegistry,   StyleSheet,   Text,   View } from 'react-native';  import AnimatedBar from "react-native-animated-bar";  export default class example extends Component {   render() {     return (       <View style={styles.container}>         <AnimatedBar />       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',   }, });  AppRegistry.registerComponent('example', () => example); 

The Big Examples

import React, { Component } from "react"; import { AppRegistry, StyleSheet, Text, View } from "react-native";  import AnimatedBar from "react-native-animated-bar";  export default class example extends Component {   state = {     progress: 0,   };    componentDidMount() {     const interval = setInterval(() => {       if (this.state.progress > 0.9) return clearInterval(interval);        this.setState(state => {         return {           progress: state.progress + 0.1,         };       });     }, 1000);   }    render() {     return (       <View style={styles.container}>         <View>           <Text>No configuration</Text>           <AnimatedBar progress={this.state.progress} />         </View>          <View>           <Text>Config Options</Text>           <AnimatedBar             progress={this.state.progress}             height={50}             borderColor="#DDD"             fillColor="tomato"             barColor="red"             borderRadius={5}           />         </View>          <View>           <Text>No Animation. No Border</Text>           <AnimatedBar             progress={this.state.progress}             height={20}             borderColor="#DDD"             barColor="tomato"             borderRadius={5}             borderWidth={0}             animate={false}           />         </View>         <View>           <Text>Auto Sizing in a Column</Text>           <AnimatedBar             progress={this.state.progress}             height={null}             borderColor="#DDD"             barColor="tomato"             borderRadius={5}             borderWidth={5}             duration={500}           >             <View style={[styles.row, styles.center]}>               <Text style={[styles.barText, { fontSize: 30 }]}>                 {Math.round(this.state.progress * 100)}%               </Text>             </View>           </AnimatedBar>         </View>          <View>           <Text>Longer duration on transition</Text>           <AnimatedBar             progress={this.state.progress}             height={20}             borderColor="#DDD"             barColor="tomato"             borderRadius={5}             borderWidth={5}             duration={500}           />         </View>         <View style={styles.row}>           <Text style={styles.rowText}>Progress with Children: </Text>           <AnimatedBar             progress={this.state.progress}             height={40}             borderColor="#DDD"             barColor="tomato"             borderRadius={5}             borderWidth={5}             duration={500}             row           >             <View style={[styles.row, styles.center, { flex: 1 }]}>               <Text style={styles.barText}>                 {Math.round(this.state.progress * 100)}%               </Text>             </View>           </AnimatedBar>         </View>          <View style={styles.row}>           <Text style={styles.rowText}>Auto Sizing to Children on Row: </Text>           <AnimatedBar             progress={this.state.progress}             height={null}             borderColor="#DDD"             barColor="tomato"             borderRadius={5}             borderWidth={5}             duration={500}             row           >             <View style={[styles.row, styles.center]}>               <Text style={[styles.barText, { fontSize: 30 }]}>                 {Math.round(this.state.progress * 100)}%               </Text>             </View>           </AnimatedBar>         </View>       </View>     );   } }  const styles = StyleSheet.create({   container: {     flex: 1,     paddingTop: 30,     paddingHorizontal: 30,     justifyContent: "space-around",   },   rowText: {     marginRight: 20,   },   row: {     flexDirection: "row",   },   center: {     justifyContent: "center",     alignItems: "center",   },   barText: {     backgroundColor: "transparent",     color: "#FFF",   }, });  AppRegistry.registerComponent("example", () => example); 

You May Also Like