react-native-dial

Like a slider input, but round. For finer grained control over large ranges.

This component is 100% JS and compatible with both Android and iOS.

props

minimumValue - PropTypes.number: the minimum selectable value
maximumValue - PropTypes.number: the maximum selectable value
value - PropTypes.number: the initial value
onValueChange - PropTypes.func: Callback continuously called while the user is interacting with the component.
onSlidingBegin - PropTypes.func: Callback called when the user begins interacting with the component. This is a good time to disable scrolling in a parent ScrollView.
onSlidingComplete - PropTypes.func: Callback called when the user finishes changing the value (e.g. when the component is released).

installation

npm install react-native-dial --save

usage sample

IMPORTANT If you are using an older version of React-Native import from react-native-dial/legacy (instead of react-native-dial) because the React Native team changed the API for accessing the NativeMethodsMixin module and the static packager doesn't support fallback or dynamic paths for loading modules.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
import Dial from 'react-native-dial';

class SampleApp extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>{this.state.value}</Text>

      	<Dial
      		style={{ width: 120, height: 120, marginBottom:30 }}
          maximumValue={3600}
          step={360/50}
          onValueChange={num=>this.setState({ value: num })}
      	/>

      </View>
    );
  }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);

future enhancements

Pull requests are welcome.

add animated gif of example to readme
set step value like in Slider control
set range of 1 revolution
don't allow oversliding more than 1 revolution past min/max
add mode prop to swap between 'dial' and 'circular-slider'
- maybe allow custom renderer?
ability to customize styles
more native looking default styles for android?
add enabled property
allow value prop to be updatable

License

CaleyD/react-native-dial

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages