https://github.com/mindinventory/react-native-speed-view

speed progress view, using this component we can show the speed. you can also use it to show progress of any task with effective customized animated view.
https://github.com/mindinventory/react-native-speed-view

android animation ios progress-view react react-native react-native-animation react-native-speed-view runningspeed speed-view speedview typescript

Last synced: about 1 month ago
JSON representation

speed progress view, using this component we can show the speed. you can also use it to show progress of any task with effective customized animated view.

• Host: GitHub
• URL: https://github.com/mindinventory/react-native-speed-view
• Owner: Mindinventory
• License: mit
• Created: 2022-04-20T04:34:18.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-16T13:04:18.000Z (over 2 years ago)
• Last Synced: 2024-11-01T11:47:43.381Z (2 months ago)
• Topics: android, animation, ios, progress-view, react, react-native, react-native-animation, react-native-speed-view, runningspeed, speed-view, speedview, typescript
• Language: TypeScript
• Homepage: https://www.mindinventory.com/react-native-app-development.php
• Size: 559 KB
• Stars: 22
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## react-native-speed-progress-view

![@mindinventory/React Native SpeedProgressView Version](https://flat.badgen.net/npm/v/@mindinventory/react-native-speed-view)

![@mindinventory/React Native SpeedProgressView Top Language](https://img.shields.io/github/languages/top/Mindinventory/react-native-speed-view)

![@mindinventory/React Native SpeedProgressView TypeScript](https://badgen.net/npm/types/tslib)

![@mindinventory/React Native SpeedProgressView License](https://img.shields.io/github/license/mindinventory/react-native-speed-view)

SpeedView, using this component we can show the speed progress with effective UI. you can also use it to show progress of any task with effective animated view.

![Simulator Screen Recording - iPhone 11 - 2022-04-20 at 12 59 09](https://user-images.githubusercontent.com/82019401/164174514-2369be99-a00a-4171-a47d-95b997388bbe.gif)

## Component props

| prop | value  | required/optional | Description

| ------    | ------ | ------ | ------ |

| percentage | _number_ | required | Default value `85` |

| maxPercentage | _number_ | optional | Default value `100` |

| showProgress | _boolean_ | optional | Default value `true` |

| size | _number_ | required | To define component size |

| gradientColorStart | _GradientColor_ | optional | GradientColor interface has two parameter `color` & `Opacity`|

| gradientColorEnd | _GradientColor_ | optional | GradientColor interface has two parameter `color` & `Opacity`|

| enableBounceEffect | _boolean_ | optional | Default value `true` |

| progressFormatSign | _string_ | optional | Allow user to set formate of progress text formate to change. |

## Installation

```

yarn add @mindinventory/react-native-speed-view

```

## Usage

```

```

## To run example

```sh

Goto example directory and install all packages that requires.

cd example && yarn

Pod Installation: cd example && cd ios && pod install && cd ..

To Run: yan ios

```

## Dependencies

- `react-native-svg`

## Dribbble

https://dribbble.com/shots/16912117-Automotive-App

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## LICENSE!

react-native-speed-progress-view  is [MIT-licensed](https://github.com/Mindinventory/react-native-speed-view/blob/main/LICENSE).

# Let us know!

If you use our open-source libraries in your project, please make sure to credit us and Give a star to www.mindinventory.com

Please feel free to use this component and Let us know if you are interested to building Apps or Designing Products.