Nocturnal Pajama Mutants

    react-native-sectioned-slider

    1.0.0 • Public • Published

    react-native-sectioned-slider

    An iOS 11 Control Center inspired Slider for React Native implemented natively using LeonardoCardoso/SectionedSlider.

    Install

    Install via npm:

    npm install react-native-sectioned-slider
    

    Currently only iOS is supported, if you want Android support please create a pull request.

    Light Dark
    iOS Demo Screenshot with Light Colors iOS Demo Screenshot with Dark Colors

    Usage

    See the example App for a full usage example.

    // View
      <SectionedSlider
        style={styles.slider}
        sections={10}
        selectedSection={selected}
        onSelectedSectionChange={(s) => setSelected(s)}
        sliderColor="grey"
        sliderBackgroundColor="darkgrey"
      />
     
    // Styles
      slider: {
        backgroundColor: 'transparent',
        width: 300,
        height: 500,
      },
    Name Type Explanation Required Default Value
    sections number The count of sections in this Slider. Must be between 2 and 20. 10
    selectedSection number The currently selected section. Must be between 0 and {sections}. 2
    onSelectedSectionChange (section: number) => void An event for when the selectedSection changes. undefined
    sliderColor color The Slider's selected sections' color undefined
    sliderBackgroundColor color The Slider's background (unselected sections) color undefined
    All View props ViewProps All properties from the React Native View. Use style.backgroundColor to change the black background! (or make it smoothly transparent) {}

    Resources

    Keywords

    Install

    npm i react-native-sectioned-slider

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    55 kB

    Total Files

    15

    Last publish

    Collaborators

    • mrousavy