Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evanbacon/expo-progress
Simple progress components for Expo
https://github.com/evanbacon/expo-progress
expo progress react react-dom react-native
Last synced: 21 days ago
JSON representation
Simple progress components for Expo
- Host: GitHub
- URL: https://github.com/evanbacon/expo-progress
- Owner: EvanBacon
- License: mit
- Created: 2020-06-20T03:03:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-06-28T09:30:33.000Z (over 4 years ago)
- Last Synced: 2024-10-20T11:14:03.761Z (30 days ago)
- Topics: expo, progress, react, react-dom, react-native
- Language: TypeScript
- Size: 12.7 KB
- Stars: 35
- Watchers: 3
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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**
- [`@react-native-community/progress-bar-android` Android only](https://github.com/react-native-community/progress-bar-android)
- [`@react-native-community/progress-view` iOS only](https://github.com/react-native-community/progress-view)
### Features
- 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
```
### Example
```tsx
import * as React from 'react';
import * as Progress from 'expo-progress';
export default function App() {
return ;
}
```
## Docs
### Bar
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](https://github.com/evanbacon/expo-progress/issues).
- 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](/LICENSE) licensed.