https://github.com/hezhii/rn-circular-slider

React Native circular slider based on react-native-svg
https://github.com/hezhii/rn-circular-slider

circle circular react-native slider svg

Last synced: about 5 hours ago
JSON representation

React Native circular slider based on react-native-svg

• Host: GitHub
• URL: https://github.com/hezhii/rn-circular-slider
• Owner: hezhii
• Created: 2019-04-02T06:25:00.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T18:56:48.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T21:57:29.472Z (8 days ago)
• Topics: circle, circular, react-native, slider, svg
• Language: JavaScript
• Homepage:
• Size: 1.93 MB
• Stars: 39
• Watchers: 1
• Forks: 14
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# rn-circular-slider

React Native circular slider based on [react-native-svg](https://github.com/react-native-community/react-native-svg)



## Installation

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

```bash

$ yarn add rn-circular-slider

```

Next, install [react-native-svg](https://github.com/react-native-community/react-native-svg)

```bash

$ yarn add react-native-svg

$ react-native link react-native-svg

```

## Usage

```js

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 (

      

         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' }]}

        >

          {value}

        

      

    );

  }

}

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'

  }

});

```