Wondering what’s next for npm?Check out our public roadmap! »

    react-native-circular-slider-re

    1.0.2 • Public • Published

    license Version Twitter Follow

    react-native-circular-slider-re 🔘

    React Native component for creating circular slider.

    ***Note: This is a copy of https://github.com/bgryszko/react-native-circular-slider

    This repo just fix some issues that involves to React Proptypes

    Example app – inspired by Apple's Bedtime ⏰

    (It's just an example what you can achieve – with this package you can create any circular slider)

    image

    Installation

    1. Install library and react-native-svg

      npm i --save react-native-circular-slider-re react-native-svg
      
    2. Link native code for SVG

      react-native link react-native-svg
      

    Usage

    Import Circular Slider

    import CircularSlider from 'react-native-circular-slider-re';

    Use as follows:

    <CircularSlider
      startAngle={this.state.startAngle}
      angleLength={this.state.angleLength}
      onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
      segments={5}
      strokeWidth={40}
      radius={145}
      gradientColorFrom="#ff9800"
      gradientColorTo="#ffcf00"
      showClockFace
      clockFaceColor="#9d9d9d"
      bgCircleColor="#171717"
      stopIcon={<G><Path .../></G>}
      startIcon={<G><Path .../></G>}
    />

    Configuration

    You can configure the passing by following props:

    • startAngle – angle where the slider starts (from 0 to 2π)
    • angleLength - length of the slider (from 0 to 2π)
    • onUpdate({ startAngle, angleLength }) - when slider is moved, onUpdate(data) is triggered, where data is an object of new values of startAngle and angleLength.
    • segments (optional) - SVG doesn't support canonical gradients, so it's imitated by using multiple linear gradients across the slider. In most cases 5 should be fine.
    • strokeWidth (optional) - width of slider
    • radius (optional) - size of the slider
    • gradientColorFrom (optional) - initial gradient color
    • gradientColorTo (optional) - final gradient color
    • showClockFace (optional) - if component should render clock face
    • bgCircleColor (optional) - color of the circle under the slider (pathway for a slider)
    • stopIcon (optional) - SVG Path for a stop icon (see the example)
    • startIcon (optional) - SVG Path for a start icon (see the example)

    Working example app

    With XCode

    You'll find working example in the example directory of this repository. You can run it by:

    git clone https://github.com/bgryszko/react-native-circular-slider-re.git
    cd  react-native-circular-slider-re/example/Bedtime
    npm install
    open ios/Bedtime.xcodeproj

    XCode will open. Click Run button and that's it.

    With Exponent

    The easiest way to run it is with Exponent: https://getexponent.com/@community/bedtime

    If you'd rather build it locally, follow these steps:

    1. Download XDE
    2. Clone the repo and install dependencies
    git clone https://github.com/bgryszko/react-native-circular-slider-re.git
    cd  react-native-circular-slider-re/example-exponent/Bedtime
    npm install
    1. Open the project with XDE

    Author

    Bartosz Gryszko (b@gryszko.com)

    For new components and updates follow me on twitter.

    License

    MIT

    Install

    npm i react-native-circular-slider-re

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    15.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar