Skip to content

React Native component to select number (size) with circle dragging (100% Pure JS)

License

Notifications You must be signed in to change notification settings

gaishimo/react-native-circle-size-selector

Repository files navigation

react-native-circle-size-selector

React Native component to select number (size) with circle dragging (100% Pure JS)

Preview

-- --

install

npm install --save react-native-circle-size-selector

Basic Usage

import CircleSizeSelector from 'react-native-circle-size-selector'

export default class App extends Component {
  state = {
    value: 3,
  }

  onChange = (value) => {
    this.setState({ value })
  }

  render () {
    return (
      <View style={styles.container}>
        <CircleSizeSelector
          minValue={1}
          maxValue={7}
          initialValue={3}
          onChange={this.onChange}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

Advanced Usage

Arbitrary Numbers

You can use arbitrary numbers at selectable values.

<CircleSizeSelector
  manualValues={[1, 2, 3, 5, 7, 11, 13]}
  ...
/>

Show children in the circle

You can render elements in the circle by adding children.

<CircleSizeSelector
  ...
>
  <View>
    <Text>
      {this.state.value}
    </Text>
  </View>
</CircleSizeSelector>

Properties

Prop Type Default Value Description
minValue number The minimum value of the range. This is required when manualValues is not set.
maxValue number The maximum value of the range. This is required when manualValues is not set.
manualValues number The values that user can select. If you use this, you don't need to set minValue and maxValue.
initialValue number first value
showGraduationLinesOnResizing boolean true a boolean that defines if we show graduation lines on resizing
onChange (value) => void function called when value is changed during resizing
onSelected (value) => void function called when value is selected after resizing
outermostCircleStyle StyleObj { borderWidth: 2, borderColor: 'rgb(240, 240, 240)', backgroundColor: 'rgb(247, 247, 247)' } The style of the outermost circle
graduationLineCircleStyle StyleObj { borderWidth: 1, borderColor: 'rgb(230, 230, 230)' } The style of graduation line circles showed on resizing
currentValueCircleStyle StyleObj { borderWidth: 1, borderColor: 'rgb(200, 240, 240)', backgroundColor: 'rgba(201, 250, 245, 0.8)' } The style of current value circle
resizingCurrentValueCircleStyle StyleObj { backgroundColor: 'rgba(187, 232, 227, 0.6)' } The style of current value circle on resizing

Example

Check App.js in Example folder.