evanbacon / expo-progress

Simple progress components for Expo

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.

expo-progress's Issues

Can't use with Expo

Tried to install module and peerDeps with expo install ...

Warnings after upgrading to Expo 42 and Reanimated 2

I'm getting following warnings after upgrade to Expo 42 and Reanimated 2 in the project:

interpolate() was renamed to interpolateNode() in Reanimated 2. Please use interpolateNode() instead

Easing was renamed to EasingNode in Reanimated 2. Please use EasingNode instead

globalThis is not defined

Hi, this is a bug report.

ReferenceError progressImage(src/Bar) happens randomly (caught with Sentry) on the web. I use expo-web SDK39.

I tried to remove the option (since I only use color for progressBar) but I failed to build
I also tried giving progressImage={null} but this error still happens.

src/Bar.tsx in progressImage at line 231:17
1

            backgroundColor: color,
            borderRadius,
          },
        ]}
        // @ts-ignore
        source={progressImage}
      />
    </ImageBackground>
  );
}

Is there any way I can fix this?