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

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

• iOS Sectioned Slider by https://github.com/LeonardoCardoso/SectionedSlider