🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A react native component to create reusable and efficient dial knob elements.

Form React Native

Documentation

react-native-dial

npm version

works with yeti

 This package powers Yeti Smart Home and is used in production.

A react native reusable and efficient dial knob element.

import { Dial } from 'react-native-dial' // ... <Dial     initialRadius={brightness * DIF_RADIUS / 100 + MIN_RADIUS}    radiusMax={MAX_RADIUS}    radiusMin={MIN_RADIUS}    onPress={() => this.toggle()}    responderStyle={styles.responderStyle}    wrapperStyle={styles.wheelWrapper}    onValueChange={(a, r) => this.changeBrightness(r)} />

demo screenshot

Some properties:

<Dial  fixed // disallows angle updates  elastic // allows scaling the element  initialAngle={Number}  initialRadius={Number}  radiusMax={Number}  radiusMin={Number}  responderStyle={ReactNative.Styles}  wrapperStyle={ReactNative.Styles}  >  {/*     Optionally you can pass children so it renders a different component of your choice as a Dial,    that can change in scale and angle  */}    <YourCustomDial />  </Dial>   

More documentation is incoming, in the meanwhile please read the source code. It is a single file! PRs and issues are more than welcome.

Follow us in Github or https://twitter.com/netbeast_co.


You May Also Like