Welcome to Expo Progress 👋

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.

Replaces

Features

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

Install

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

Example

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

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

Docs

Bar

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!

SebastianKurp/expo-progress