react-native-circle-size-selector v1.0.3

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

Example

Check App.js in Example folder.