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.