Created
August 30, 2015 21:16
-
-
Save danscan/c1df3bdacaa1bc7f0001 to your computer and use it in GitHub Desktop.
Animated Bar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react-native' | |
const { Animated, View } = React | |
import styles from './styles' | |
// Configuration Constants | |
const INITIAL_VALUE_SCALE = 0 | |
const DESTINATION_VALUE_SCALE = 1 | |
const VALUE_SCALE_SPRING_FRICTION = 5 | |
export default class Bar extends React.Component { | |
constructor(props) { | |
super(props) | |
this.state = { | |
valueScale: new Animated.Value(INITIAL_VALUE_SCALE), | |
} | |
} | |
componentDidMount() { | |
Animated.spring(this.state.valueScale, { | |
friction: VALUE_SCALE_SPRING_FRICTION, | |
toValue: DESTINATION_VALUE_SCALE, | |
}).start() | |
} | |
getStyles() { | |
return styles({ | |
...this.props, | |
valueScale: this.state.valueScale, | |
}) | |
} | |
render() { | |
const { | |
style, | |
} = this.props | |
return ( | |
<View style={[this.getStyles().container, style]}> | |
<Animated.View style={this.getStyles().maximum}/> | |
<Animated.View style={this.getStyles().value}/> | |
</View> | |
) | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { StyleSheet } from 'react-native' | |
const DEFAULT_FILL_COLOR = '#00b5ec' | |
export default ({ fillColor, horizontal, maxValue, value, valueScale }) => { | |
const maximumFlex = maxValue - value | |
const valueFlex = maxValue - maximumFlex | |
let containerFlexDirection | |
let valueScaleDimension | |
if (horizontal) { | |
containerFlexDirection = 'row' | |
valueScaleDimension = 'scaleX' | |
} else { | |
containerFlexDirection = 'column' | |
valueScaleDimension = 'scaleY' | |
} | |
return StyleSheet.create({ | |
container: { | |
flex: 1, | |
flexDirection: containerFlexDirection, | |
}, | |
value: { | |
backgroundColor: fillColor || DEFAULT_FILL_COLOR, | |
flex: valueFlex, | |
transform: [ | |
{ [valueScaleDimension]: valueScale }, | |
], | |
}, | |
maximum: { | |
backgroundColor: 'transparent', | |
flex: maximumFlex, | |
}, | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Usage