Example of React Native Community Slider in Android iOS

Hello guys, It’s been almost a week since I had posted a tutorial. So now to wait is over. In today’s tutorial we would learn about a react native’s NPM library @react-native-community/slider. The @react-native-community/slider library is used to create simple slider, trackbar, seek bar in react native. The main function of slider is to increase or decrease value on a fixed parameter when the slider moves forward or backward. So in this tutorial we would learn about Example of React Native Community Slider in Android iOS Application. You can also visit its official NPM page here.

Contents in this project Example of React Native Community Slider in Android iOS :-

1. First of all we have to install the @react-native-community/slider NPM package in our react native project. So open your react native project Root directory in CMD in windows and in Terminal in MAC and execute below command.

Screenshot :-

Example of React Native Community Slider in Android iOS

Screenshot on finish installation :-

2. Now in the next step we would start coding for the application. So open your project’s main App.js file and import View, StyleSheet, Text and useState component.

3. Import Slider component from ‘@react-native-community/slider’ .

4. Creating our main Export default functional component App.

5. Creating a State named as data with State change function setSliderData. Here we would set the default data value to 10. This would make the Slider default value of 10.

6. We would make 1 Text component in the return() block of code, In this text we would display the Slider data state value.

7. Now we would make the Slider component. I’m using most of Slider Props in our current example, But there are more of them, You can read about the remaining Props here on the package page.

  1. maximumValue : To define maximum value of a Slider.
  2. minimumValue : Minimum value of slider, From which value the slider should start.
  3. minimumTrackTintColor : This is the color of Slider which is moved.
  4. maximumTrackTintColor : The color of Slider which is remaining after moving.
  5. step : The value should be increased like +1 .
  6. value : Value of Slider.
  7. onValueChange : Calls whenever value is changed of Slider.
  8. thumbTintColor : Slider moving round button color.

8. Creating style.

9. Complete Source Code for App.js file :-

Screenshots :-

Leave a Reply

Your email address will not be published. Required fields are marked *