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:trueonAnimate- Callback listener for the animated value. Default:undefinedstyle- Pass in any styling for the outer containing view. This defines the general layout of the bar for column, row, and theheightprop.wrapStyle- Add arbitrary styling to the wrapping view. This is whereborderColor,borderWidth, andborderRadiusstylings are applied.fillStyle- Add arbitrary styling to inner fill(behind the bar), this is whatfillColoris applied to.barStyle- Add arbitrary styling to the bar, this si whatbarColoris 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);