Indicate loading state with a universal progress component

Usage no npm install needed!

<script type="module">
  import expoProgress from 'https://cdn.skypack.dev/expo-progress';


Welcome to Expo Progress 👋

Product: demo

Github: evanbacon License: MIT

Try it with Snack 🥳

A simple progress bar component that you can use with Expo (iOS, Android, web).

I created this as an alternative to using a bunch of different packages across iOS, Android, and web. This is still natively accelerated using popular packages shipped in the Expo standard library (SVG, and Reanimated).

This package is a work in progress. I'd like to also add a circular loader and pie loader.


Twitter: baconbrix Twitter: expo


  • Fully TypeScript
  • iOS, Android, web
  • Native animation
  • Optimized for tree-shaking
  • Shipped in JS (no JSX)


yarn add expo-progress

# or

npm install --save expo-progress

Add peer dependencies:

# Get versions for Expo
expo install react-native-svg react-native-gesture-handler react-native-reanimated react-native-redash

# Get any version
yarn add react-native-svg react-native-gesture-handler react-native-reanimated react-native-redash


import * as React from 'react';
import * as Progress from 'expo-progress';

export default function App() {
  return <Progress.Bar isIndeterminate color="blue" />;



Here are the prop types (I'm kinda lazy):

export type ProgressBarProps = {
   * If the progress bar will show indeterminate progress by looping an animation infinitely.
   * @default false
  isIndeterminate?: boolean;

   * Duration to animate changes in milliseconds.
   * @default isIndeterminate ? 1000 : 500
  duration?: number;

   * If the bar should animate between values.
   * @default false
  isAnimated?: boolean;

   * The progress value (between 0 and 1).
   * @default 0
  progress?: number;

   * The tint color of the progress bar itself.
   * @default #007aff
  color?: string;

   * The tint color of the progress bar track.
   * @default transparent
  trackColor?: string;

   * A stretchable image to display as the progress bar.
  progressImage?: ImageURISource | ImageURISource[];

   * A stretchable image to display behind the progress bar.
  trackImage?: ImageURISource | ImageURISource[];

   * Height of the loading indicator.
   * @default 7
  height?: number;

   * Border radius of the loading indicator.
   * @default height / 2
  borderRadius?: number;

   * Style for the loading indicator container view.
  style?: ImageBackgroundProps['style'];

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

  • Clone the repo
  • Install yarn
  • Build dev yarn build
  • Start example expo start

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Evan Bacon.
This project is MIT licensed.