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

Readme

Keywords

Package Sidebar

Install

npm i react-native-sectioned-slider

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

55 kB

Total Files

15

Last publish

Collaborators

  • mrousavy