Animated Bar

index.js

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>
    )
  }
}

styles.js

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,
    },
  })
}

Animated Bar component for react-native bar charts.

Usage

import React from 'react-native'
const { ScrollView, View } = React
import styles from './styles'

// Components in Development
import { Bar } from 'react-native-charts'

export default class ActivityDashboardScreen extends React.Component {
  render() {
    const {
      style,
    } = this.props

    return (
      <ScrollView 
        style={[styles().container, style]}>

        <View 
          style={{
            flexDirection: 'row',
          }}>
          <Bar 
            fillColor='#46b3f7'
            value={10} 
            maxValue={12}
            style={{
              height: 200,
            }}/>
          <Bar 
            fillColor='#3386b9'
            value={11} 
            maxValue={12}
            style={{
              height: 200,
            }}/>
        </View>

      </ScrollView>
    )
  }
}