expo-progress

Welcome to Expo Progress 👋

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.

Replaces

• @react-native-community/progress-bar-android Android only
• @react-native-community/progress-view iOS only

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!

📝 License

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