Govind Maheshwari's blog

Govind Maheshwari's blog

React Native Progress Bar

using reanimated2

PublishedSeptember 26, 2022

•1 min read•View as Markdown

React Native Progress Bar

Govind Maheshwari

I'm a Senior Software developer who loves solving real-world problems and building meaningful products 💡 I currently focus on crafting clean, user-friendly experiences using React Native ⚛️ I enjoy working on challenging projects and constantly learning new things — whether it’s exploring a new framework or diving deeper into existing ones. This space is where I share my journey, the issues I tackle, and the lessons I pick up along the way 🚀

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

ezgif.com-gif-maker (2).gif

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

carbon (4).png

carbon (6).png

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

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

carbon (7).png

carbon (8).png

Whole code:

carbon (9).png

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

carbon (10).png

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

#reactjs #react-native #progress-bar #reanimated

52 views

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

The "Local First" Approach: Testing AI with Ollama Before Going Mobile

I’m using Ollama and Google’s latest Gemma 3 model. My goal is simple: Understand the difference between the /api/generate and /api/chat endpoints and learn how to bridge my React Native app to a loca

Apr 17, 20262 min read2

Beyond the Chatbox: Structured Data and the Art of Prompt Compression

I’ve spent the last few posts learning how to talk to an AI. Now, I’m learning how to make the AI talk back in a way my code understands. If I want to build a weather app, I don't want a poem about ra

Apr 8, 20262 min read2

Beyond the Chatbox: Structured Data and the Art of Prompt Compression

Prompt Engineering 101: How to Give Your Mobile AI a Memory (and a Brain)

I used to think that "Chatting" with an AI was like a real conversation. But as a developer, I’ve realized it’s more like a movie script that we keep rewriting and resending every time the user types

Apr 7, 20262 min read7

Prompt Engineering 101: How to Give Your Mobile AI a Memory (and a Brain)

GGUF, Quantization, and Pruning: The Three Keys to "Shrinking" an AI Brain

I used to think that "smaller model" just meant "worse model." But today I learned that there are two separate ways to make an AI fit on a phone: you can make its memory less precise (Quantization), o

Apr 5, 20262 min read8

GGUF, Quantization, and Pruning: The Three Keys to "Shrinking" an AI Brain

Temperature, System Prompts, and Why AI Has No Memory: The "Personality" of LLMs

Context I used to think LLMs were like databases—you ask a question, you get the stored answer. But after playing with Temperature and System Prompts, I realized they are more like improv actors. They

Apr 2, 20262 min read7

Temperature, System Prompts, and Why AI Has No Memory: The "Personality" of LLMs

Govind Maheshwari's blog

12 posts