The story about one progress bar animation with React Native

 const ProgressBar = ({ total, current, fill }) => {   const percent = current / total;   return (     <div class="container">       <div class="progress"></div>     </div>   ) }

.container {  background-color: #eee;  height: 4px;  border-radius: 2px;  margin: 20px;  position: relative;  overflow: hidden;}.progress {  position: absolute;  left: -100%;  width: 100%;  top: 0;  bottom: 0;  border-radius: 2px;}

...  <div class="progress" style={{ transform: `translateX(${percent * 100}%)`, backgroundColor: fill }}></div>...

.progress {  ...  transition: all 0.2s;}

const AnimatedProgress = ({ fill, current, total }) => {     const percent = current / total;     return (       <View style={styles.container}>         <View style={[styles.progress, { backgroundColor: fill, transform: [{ translateX: `${percent * 100}%` }] }]} />       </View>     );   };

export default function useOnLayout() {  const [layout, setLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });  const onLayout = useCallback((event) => setLayout(event.nativeEvent.layout), []);  return [layout, onLayout];}

const AnimatedProgress = ({ fill, current, total }) => {     const percent = current / total;    // we need only width property     const [{ width }, onLayout] = useOnLayout();     return (       <View style={styles.container} onLayout={onLayout}>         <View style={[styles.progress, { backgroundColor: fill, transform: [{ translateX: width * percent }] }]} />       </View>     );   };

import { Animated } from "react-native";// wrap our Animated.Value to useState for memoize it, alternatively you can use useRefconst [translateX] = useState(new Animated.Value(0));useEffect(() => { Animated.timing(translateX, {   toValue: width * percent,   duration: 200,   easing: Easing.inOut(Easing.ease),   // using native driver for animation in UI thread    useNativeDriver: true   }).start();// call our animation when width or percent change}, [width, percent]);....// Change View => Animated.View and translateX to our Animated.Value<Animated.View style={[styles.progress, { backgroundColor: fill, transform: [{ translateX }] }]} />

import Animated, { Easing } from "react-native-reanimated";useEffect(() => {    Animated.timing(translateX, {      toValue: width * percent,      duration: 200,      easing: Easing.inOut(Easing.ease)    }).start();  }, [width, percent]);

1) Convert color: Firstly let's convert color to one format - for example, RGBA(you can choose a different one - HSV, HSL)2) we need steam of animation which we can iterate - it can be usual for us *Animated.Value*, which we can animate from 0 to some value.3) In this time we will make interpolation of animation this value each of color part (r, g, b, a);4) combine all these values into one color.

 const interpolateColor = animatedValue.interpolate({   inputRange: [0, 150],   outputRange: ['rgb(0,0,0)', 'rgb(51, 250, 170)'] })

export default function useAnimatedColor(color) {    // store our previous color in ref  const prevColor = useRef(color);  // TODO write color interpolation  // updating previous value after creating interpolation  prevColor.current = color;  // TODO return color interpolation  return color;}

// define input range for interpolationconst inputRange = [0, 50];export default function useAnimatedColor(color) {  // store our value to ref for memoization  const colorValue = useRef(new Animated.Value(0));  ...  useCode(() => {      const [from, to] = inputRange;      // TODO iterate colorValue in range    }, [color]);}

import Animated, { Clock } from "react-native-reanimated";const { set, useCode } = Animated;export default function useAnimatedColor(color) {  const colorValue = useRef(new Animated.Value(0));  ...  // create clock instance and memoize it  const clock = useRef(new Clock());    useCode(() => {      const [from, to] = inputRange;      return [set(colorValue.current, runTiming(clock.current, from, to))];    }, [color]);}

const inputRange = [0, 50];export default function useAnimatedColor(color) {  const colorValue = useRef(new Animated.Value(0));  const prevColor = useRef(color);  // call our interpolateColors and wrap it to useMemo  const backgroundColor = useMemo(    () =>      interpolateColors(colorValue.current, {        inputRange,        outputColorRange: [prevColor.current, color]      }),    [color]  );  prevColor.current = color;  const clock = useRef(new Clock());  useCode(() => {    const [from, to] = inputRange;    return [set(colorValue.current, runTiming(clock.current, from, to))];  }, [color]);  return backgroundColor;}

import { processColor } from "react-native";import Animated, { round, color, interpolate, Extrapolate } from "react-native-reanimated";// functions for getting each part of our colorfunction red(c) {  return (c >> 16) & 255;}function green(c) {  return (c >> 8) & 255;}function blue(c) {  return c & 255;}function opacity(c) {  return ((c >> 24) & 255) / 255;}/** * Use this if you want to interpolate an `Animated.Value` into color values. * * #### Why is this needed? * * Unfortunately, if you'll pass color values directly into the `outputRange` option * of `interpolate()` function, that won't really work (at least at the moment). * See https://github.com/software-mansion/react-native-reanimated/issues/181 . * * So, for now you can just use this helper instead. */export default function interpolateColors(animationValue, options) {  const { inputRange, outputColorRange } = options;  // convert our colors to rgba format   const colors = outputColorRange.map(processColor);  // interpolate each part of our color  const r = round(    interpolate(animationValue, {      inputRange,      // map only necessary part       outputRange: colors.map(red),      extrapolate: Extrapolate.CLAMP    })  );  const g = round(    interpolate(animationValue, {      inputRange,      outputRange: colors.map(green),      extrapolate: Extrapolate.CLAMP    })  );  const b = round(    interpolate(animationValue, {      inputRange,      outputRange: colors.map(blue),      extrapolate: Extrapolate.CLAMP    })  );  const a = interpolate(animationValue, {    inputRange,    outputRange: colors.map(opacity),    extrapolate: Extrapolate.CLAMP  });  // combine all parts to one color interpolation  return color(r, g, b, a);}

const AnimatedProgress = ({ fill, current, total }) => {  const backgroundColor = useAnimatedColor(fill);  ...  // pass animated props to view  <Animated.View style={[styles.progress, { backgroundColor, transform: [{ translateX }] }]} />  ...}

export default function useAnimatedColor(color) { return color;}

export default function useAnimatedProgress(width, percent) {  return width * percent;}

export default StyleSheet.create({  ...  progress: {    ...    // select only web for avoiding error on mobile devices    ...Platform.select({ web: { transition: "0.3s all ease-in-out" } })  }});

yarn add react-native-reanimated-progress-bar