https://github.com/gaishimo/react-native-circle-size-selector

React Native component to select number (size) with circle dragging (100% Pure JS)
https://github.com/gaishimo/react-native-circle-size-selector

android circle drag ios javascript react react-native react-native-component size tap

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/gaishimo/react-native-circle-size-selector
• Owner: gaishimo
• License: mit
• Created: 2018-01-09T07:52:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-04-28T21:12:33.000Z (over 2 years ago)
• Last Synced: 2024-09-18T10:42:05.263Z (15 days ago)
• Topics: android, circle, drag, ios, javascript, react, react-native, react-native-component, size, tap
• Language: JavaScript
• Homepage:
• Size: 3.67 MB
• Stars: 17
• Watchers: 4
• Forks: 2
• Open Issues: 30
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-circle-size-selector

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

## Preview

|--|--|

|--|--|

|![](./docs/example-movie.gif)| ![](./docs/example-movie2.gif) |

## install

```

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

```

## Basic Usage

```js

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

export default class App extends Component {

  state = {

    value: 3,

  }

  onChange = (value) => {

    this.setState({ value })

  }

  render () {

    return (

      

        

      

    )

  }

}

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.

```

```

### Show children in the circle

You can render elements in the circle by adding children.

```

  

    

      {this.state.value}

    

  

```

## 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](https://github.com/gaishimo/react-native-circle-size-selector/blob/master/Example/App.js) in Example folder.