netbeast/react-native-dial

A react native reusable and efficient dial knob element

react-native-dial

 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)} />

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.

react-native-dial's Issues

Example

Great work guys.

Would you have an example of implementation to share? I saw in the root README this:

initialRadius={brightness * DIF_RADIUS / 100 + MIN_RADIUS}
radiusMax={MAX_RADIUS}
radiusMin={MIN_RADIUS}

but was wondering what would be brightness, DIF_RADIUS, MIN_RADIUS or MAX_RADIUS.

Thanks!

Odd behavior with precision

It seems like the precision prop that is used to configure how granular the turning of the knob is, is off. Not sure exactly what it is, I'll be investigating since it could be my usage of it, but I figured I'd post this in case someone else has a similar issue. It seems like every now and then the knob will completely disregard the precision prop and became super super sensitive again.

It seems like when you change the direction in which you're turning the knob, the knob becomes super sensitive in that direction but remains normal in the other direction.

this.props.onValueChange is not a function

this.props.onValueChange is not a function. (In 'this.props.onValueChange(deg,radius)', 'this.props.onValueChange' is undefined)

Did you manage to make this component work?

ColorWheel ?

Hello, thank you for the top project. In the example ColorWheel is used, unfortunately I can not find this in the project? Is this the ColorWheel that the Yeti App uses?

Many Thanks.

comonentWillMount deprecated

Hi
using expo 36.0.0 and there is such warning

Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Dial

according to official documentation https://en.reactjs.org/docs/react-component.html#unsafe_componentwillmount componentWillMount is deprecated.