Skip to content

netbeast/react-native-dial

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

A react native reusable and efficient dial knob element

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published