Animated bar chart on load - React Native

Animating a simple bar chart on load using React Native and Reanimated


3 min read

See the finished example


Animate a bar chart on the initial load, and when the data changes. The bars should grow in height.

Attempt 1

Reanimated provides layout animations out of the box, such as SlideInUp and FadeIn. These are easy to use and require very little code, and if you don't want to use the provided animations, you can create a custom layout animation. This was the approach I tried first, creating a custom entering animation to animate the height of my bars. However, I found that the animation only took the height of the first item, meaning all the bars had the same height regardless of the property passed to them. I'm not too sure why this is, but it could perhaps be because of the way the 'worklet' is created and runs independently on the UI thread, and so perhaps my use of the map function does not play nicely here.


Instead of using Reanimated's layout animations, I ended up writing a simple animation and triggering it in a UseEffect on load.

I store the height in a Animated.SharedValue initiated to 0 and pass it to an animated style using the UseAnimatedStyle hook. The shared value is then set to the desired height in a UseEffect where the dependency is the height value - meaning it would fire again should the data change.


// BarChart.tsx
import {View, useWindowDimensions, Text} from 'react-native';
import React, {FC} from 'react';
import tw from 'twrnc';

import Bar from './Bar';
import {BarData} from './types';

interface BarChartProps {
  data: BarData[];
  yMaxValue: number;

const BarChart: FC<BarChartProps> = ({data, yMaxValue}) => {
  const chartHeight = 200;
  const {width} = useWindowDimensions();
  const margin = 4;

  const calculateBarHeight = (barValue: BarData) => {
    return (barValue.value / yMaxValue) * chartHeight;

  const calculateBarWidth = () => {
    return width / data.length - margin * 2;

  return (
      <View style={tw`flex-row`}>
        {, index) => {
          const barHeight = calculateBarHeight(bar);
          const barWidth = calculateBarWidth();
          return (
            <View key={index.toString()}>
              <Text style={tw`self-center text-base text-white pt-3`}>
      <View style={tw`flex-row`}></View>

export default BarChart;
import {View} from 'react-native';
import React, {FC, useEffect} from 'react';
import tw from 'twrnc';
import Animated, {
} from 'react-native-reanimated';

interface BarProps {
  totalHeight: number;
  barHeight: number;
  barWidth: number;
  barMargin: number;

const Bar: FC<BarProps> = ({totalHeight, barHeight, barWidth, barMargin}) => {
  const animatedHeight = useSharedValue<number>(0);

  useEffect(() => {
    animatedHeight.value = withTiming(barHeight);
  }, [barHeight, animatedHeight]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      height: animatedHeight.value,

  return (
        tw`bg-gray-800 flex-row rounded-2xl mx-[${barMargin}]`,
        {height: totalHeight, width: barWidth},
          tw`bg-green-500 rounded-2xl self-end`,
          {width: barWidth},

export default Bar;