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

$3

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

Install

``sh
yarn add expo-progress

or

npm install --save expo-progress
`

Add peer dependencies:

`sh


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
`

$3

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

export default function App() {
return ;
}
`

Docs

$3

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

`ts
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.