An iOS 11 Control Center inspired Slider for React Native implemented natively using LeonardoCardoso/SectionedSlider.
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 |
|---|---|
 |  |
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) | ❌ | {} |
- iOS Sectioned Slider by https://github.com/LeonardoCardoso/SectionedSlider
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