Skip to content
React Native circular slider based on react-native-svg
JavaScript Objective-C Python Java
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update README.md Apr 8, 2019
example Update README.md Apr 8, 2019
.gitignore Initial commit Mar 29, 2019
.npmignore 触发 onChange 事件 Apr 2, 2019
CHANGELOG.md Release 1.1.0 Apr 8, 2019
CircularSlider.js fix:Unable to respond to events normally Apr 8, 2019
README.md Update README.md Apr 8, 2019
package.json Release 1.1.0 Apr 8, 2019

README.md

rn-circular-slider

React Native circular slider based on react-native-svg

Installation

Install the rn-circular-slider package in your React Native project.

$ yarn add rn-circular-slider

Next, install react-native-svg

$ yarn add react-native-svg
$ react-native link react-native-svg

Usage

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import CircularSlider from 'rn-circular-slider'

console.disableYellowBox = true

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

  render() {
    const { value } = this.state
    return (
      <View style={styles.container}>
        <CircularSlider
          step={2}
          min={10}
          max={80}
          value={value}
          onChange={value => this.setState({ value })}
          contentContainerStyle={styles.contentContainerStyle}
          strokeWidth={10}
          buttonBorderColor="#3FE3EB"
          buttonFillColor="#fff"
          buttonStrokeWidth={10}
          openingRadian={Math.PI / 4}
          buttonRadius={10}
          linearGradient={[{ stop: '0%', color: '#3FE3EB' }, { stop: '100%', color: '#7E84ED' }]}
        >
          <Text style={styles.value}>{value}</Text>
        </CircularSlider>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  contentContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  value: {
    fontWeight: '500',
    fontSize: 32,
    color: '#3FE3EB'
  }
});
You can’t perform that action at this time.