# React Native Progress Bar

In this blog, we will create a progress bar using react native reanimated2.


![ezgif.com-gif-maker (2).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1664187652763/pEijTYsaJ.gif align="left")

In progress.tsx file we need to import reanimated 2 properties.


![carbon (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664187775433/YHb-Lbd-n.png align="left")


![carbon (6).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188039807/Gvk3xgc32.png align="left")

Define the value in useSharedValue for the progress bar and we have to maintain the index and width for keeping track of the progress bar.


![carbon (5).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188049904/fgY1eOtT6.png align="left")

Based on the index and width we have to manipulate the value for the progress bar.

![carbon (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188150684/5I7fP4h8Y.png align="left")


![carbon (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188215474/Vu0wcHk9o.png align="left")

Whole code:

![carbon (9).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188247540/UfiwJyYp7.png align="left")

From the parents component, we have to pass value in the progress bar component

![carbon (10).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664188340692/QxkERKz57.png align="left")


GitHub repo: https://github.com/partTimeCoder96/animation-expo-reanimated/blob/main/Src/progressBar/index.tsx