logo
logo white
+917949175850

How to develop an Animated React Native Progress Bar?

React native is a popular framework that use JavaScript for building native mobile apps. Developers can create engaging and smooth animations within the application. Here we will learn how to develop react native progress bar.

There are many ways to implement animations in the React native app.

Using Animated API: This is a common method that allows you to define the complex animations. These can be combined and controlled in the declarative way.

LayoutAnimation API: Using LayoutAnimation API it is easy to animate the layout of the app.

Third party animation library: The other option to use the third party animation like Lottie. It allows you to use the pre-designed animation using After Effects tools.

React native progress bar

What is Interpolation? Its role to develop react native progress bar:

Interpolation refers to the function that maps the input range to the output range. The main use of it is in the animation to provide the smooth transition between two values. Interpolator is used within animated API to control the behavior of the animation over the time.

import { Animated } from 'react-native';
const rotateAnimation = new Animated.Value(0);
Animated.timing(rotateAnimation, {
  toValue: 360,
  duration: 3000,
  useNativeDriver: true,
  interpolation: (input) => {
    // the value of input is between 0 to 1, representing the progress of the animation
    // you can use an interpolator function to map this input range to the desired output range (angle of rotation)
    return input * 360; // rotate 360 degrees for 3 seconds
  }
}).start();

Here, the rotateAnimation value will start at 0 and will animate to 360 for 3 seconds. The interpolation function maps the input range and output range.

Using the transform style property, you can use the rotateAnimation value to control the rotation of the component.

<Animated.View
  style={{
    transform: [{ rotate: rotateAnimation }]
  }}
>
  {/* your component here */}
</Animated.View>

Over the course of 3 sec, the component will rotate smoothly from 0 degree to 360 degree. To achieve different effects, you can also use other interpolation functions.

Also Read
Python vs Other Programing Languages

SVG Scalable Vector Graphics:

SVG is a vector graphics format. It allows you to create the scalable graphics which can be easily resized without quality loss. The SVG graphics are mostly created using the XML mark up. The main use of such graphics are icons, logos and other simple graphics which are need to be scalable.

React native developer can use the library react-native-svg that allows them to use SVG graphics in the React native app. Developers can import SVG files and render them as native component using the library.

This is an example of how you can use React native –Svg to render the SVG file in the React Native app.

import { View } from 'react-native';
import { Svg } from 'react-native-svg';

function MyComponent() {
  return (
    <View>
      <Svg width="150" height="150" viewBox="0 0 150 150”>
        <Circle cx=”50” cy=”50” r=”40” fill=”purple” />
      </Svg>
    </View>
  );
}

Here we have used SVG component to render an SVG file that holds a single circle element. You can use other SVG elements like Polygon, Line and React to develop more complex graphics.

Also Read
10 essential libraries that every developer should know

How to build progress bar react native?

A progress meter also known as Speedometer is a visual representation of value within the certain range. The main purpose of it is to display the task progress. You can develop a speedometer animation by using Animated API.

Step 1

SVG component of the speedometer to React NativeComponent conversion.

Here we are converting the progress meter SVG component in RN component.

Its output will be displayed in the JSX component. Here we need to separate the needle and the meter component. This can be rendered using the react-native-svg.

Step 2: Defining interpolation

Here we will define the interpolation as per the component design of the progress meter.

Now considering the layout of the SVG component. Now change the input and output ranges.

Step 3

Integrating the Needle with SVG image

Using react-native-svg, we integrate the anchor point helper component for needle. Here, we need to provide the anchor point.  

const getTransform = () => {
    let transform = {
      transform: [{perspective: 1}, {rotate: animInterpolation}],
    };
    return withAnchorPoint(
      transform,
      {x: 0.5, y: 1},
      {width: 125, height: 150},
    );
  };
Add SVG components to the Animated view 
function onButtonClick() {
    if (progressValue !== score) {
      setScore(Math.floor(Math.random() * (10 - 1 + 1) + 1));
    }
  }

  useEffect(() => {
    if (score > 0) {
      Animated.timing(progressValue, {
        duration: 2000,
        toValue: new Animated.Value(score),
        useNativeDriver: true,
      }).start(finished => {
        console.log('finished====', finished);
        if (finished) {
          setFillColor('#91d9ae');
        }
      });
    }
  }, [progressValue, score]);

Verdict

This is how we create animated react native progress bar. We hope you get a clear idea on its development. All you need to follow a proper steps and defining the interpolation. This progress meter help the react native developer to analyse the projects progress. Have a happy coding.