react-native-sectioned-slider

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

⚠️: This is more of a proof of concept than a production-ready library, since styling a similarly-looking Slider is really easy using React Native and react-native-reanimated and will be cross-platform. Feel free to create a new issue if you have any questions about creating Native UI Modules using Swift.

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

Other

Check out my other react-native libraries:

• react-native-blurhash: 🖼️ Give your users the loading experience they want.
• react-native-google-nearby-messages: 📲 Communicate with nearby devices using Bluetooth, BLE, WiFi and near-ultrasonic audio. Broadcast and receive small payloads (like strings) using the easy-to-use React Native API!
• react-native-notification-badge: 🔴 A notification badge count manager for React Native