Build a Clean React Native Multi-Slider for Android and iOS Using Hooks

Better mobile sliders

1, 2, 3… 100. Let’s go!

Today’s article will show you how to build a multi-slider that can be used for age, distance, weight ranges, etc.

What We’ll Be Using

• Styled-Components
• React Native Multi Slider

What You’ll Be Getting

A slider that works for iOS and Android:

Step 1: Install Dependencies

$ npm i --save @ptomasroos/react-native-multi-slider
$ npm i styled-components-native

Step 2: Create Your Component

What is happening here?

1. We are creating styled-components to style View and Text.

2. TheuseState hook returns a stateful value (multiSliderValue) and a function to update it (setMultiSliderValue). The initial state of the multiSliderValueand value is an array set to [0, 100].

4. The multiSliderValuesChange function will update the values onValuesChange and update the state.

5. …Platform.select({}) — React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code, which is where you will find different styles for Android and iOS.

Step 3: Import It

Implement your component wherever you’d like!

🎬 Fin. You’re Done!

Have more questions? Let me know!