useNativeDriver for animated progress bar

1 min read

without using width

react-native

1. The problem

When building a component for animated progress bar, we might bump into this issue.

style property 'width' is not supported by native animated module

That's happening as a result of animating width with useNativeDriver: true

In this blog, I will document how to keep useNativeDriver: true without using width property.

2. The solution

From:

<Animated.View
  style={[
    styles.activeProgressBar,
    {
      width: progressBarAnimationRef.current.interpolate({
        inputRange: [0, 1],
        outputRange: ['0%', '100%'],
      }),
    },
  ]}
/>

To:

<Animated.View
  style={[
      styles.activeProgressBar,
      {
         transform: [
            {
               translateX:
                  progressBarAnimationRef.current.interpolate({
                     inputRange: [0, 1],
                     outputRange: [-singleBarWidth, 0],
                  }),
            },
         ],
      },
  ]}
/>

Using translateX instead of width, with negative bar width as the start of the output range, and overflow: 'hidden' on the parent container.

Thanks for reading! Cheers!