/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.

Primary LanguageTypeScriptMIT LicenseMIT

react-native-speed-progress-view

@mindinventory/React Native SpeedProgressView Version @mindinventory/React Native SpeedProgressView Top Language @mindinventory/React Native SpeedProgressView TypeScript @mindinventory/React Native SpeedProgressView License

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

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

<SpeedView
  percentage={75}
  size={250}
  showProgress={true}
/>

To run example

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 to learn how to contribute to the repository and the development workflow.

LICENSE!

react-native-speed-progress-view is MIT-licensed.

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.

app development