Progress bar animation is not working in React Native-CodePudding

I have a problem using Animated.timing with useNativeDriver: true. So i want a pretty simple progress bar with timer but i got error

Error: Style property 'width' is not supported by native animated module

My code so far

  const animProgress = React.useState(new Animated.Value(0))[0];

  const onAnimate = () => {
    Animated.timing(animProgress, {
      useNativeDriver: true,
      toValue: 100,
      duration: 6000, // six seconds long,
      easing: Easing.linear,
    }).start();
  };

  const animWidthPrecent = animProgress.interpolate({
    inputRange: [0, 100],
    outputRange: ["0%", "100%"],
  });

Usage

<View
  style={{
    width: "100%",
    height: 40,
    padding: 3,
    borderColor: "red",
    borderWidth: 3,
    borderRadius: 30,
    marginTop: 200,
    justifyContent: "center",
  }}
>
  <Animated.View
    style={[
      {
        width: "100%",
        height: 30,
        borderRadius: 15,
        backgroundColor: "green",
      },
      { width: animWidthPrecent },
    ]}
  />
</View>

But as i said before it returm me error described above...

When i cahnged useNativeDriver: true to useNativeDriver: false it worked. But i want to use native driver. So i tried to use transform like that

 <Animated.View
    style={[
      {
        width: "100%",
        height: 30,
        borderRadius: 15,
        backgroundColor: "green",
      },
      {
        transform: [
          {
            scaleX: animWidthPrecent,
          },
        ],
      },
    ]}
  />

but now it is not working at all! So how can i use native driver with that progress bar? Sorry for my bad English!

CodePudding user response：

Your code works for me, I just replaced the output range by 0, 1 because it is now referring to the transform value. However the animation worked even with 0%, 100% but the behavior wasn't the one expected.

const ProgressBar = (props) => {
    const animProgress = useState(new Animated.Value(0))[0];

    const onAnimate = () => {
        Animated.timing(animProgress, {
            useNativeDriver: true,
            toValue: 100,
            duration: 6000, // six seconds long,
            easing: Easing.linear,
        }).start();
    };

    const animWidthPercent = animProgress.interpolate({
        inputRange: [0, 100],
        outputRange: [0, 1],
    });

    return (
        <>
            <View
                style={{
                    width: '100%',
                    height: 40,
                    padding: 3,
                    borderColor: 'red',
                    borderWidth: 3,
                    borderRadius: 30,
                    marginTop: 200,
                    justifyContent: 'center',
                }}
            >
                <Animated.View
                    style={[
                        {
                            width: '100%',
                            height: 30,
                            borderRadius: 15,
                            backgroundColor: 'green',
                        },
                        {
                            transform: [
                                {
                                    scaleX: animWidthPercent,
                                },
                            ],
                        },
                    ]}
                />
            </View>
            <TouchableOpacity onPress={onAnimate} activeOpacity={0.7}>
                <Text>Click Me</Text>
            </TouchableOpacity>
        </>
    );
};

export default ProgressBar;