React Native Create Seekbar Slider in Android iOS Example Tutorial

Slider also known as Seekbar is used to get one value from a multiple range of values in both android and iOS applications. Slider is most likely used in applications to set Ringer volume, Media Volume, Notification Volume, Screen brightness etc. This tutorial is the simplest example of Slider . In this tutorial we would going to create a react native application with Text component and Slider component, Now when application user starts moving the Slider then it will automatically update and set value between 1 to 100 in TextView.

Contents in this project Seekbar Slider Android iOS Example :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Import AppRegistry, StyleSheet, Text, View and Slider component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Slider} from ‘react-native’;

import React, { Component } from ‘react’;

import { AppRegistry, StyleSheet, Text, View, Slider} from ‘react-native’;

3. Create constructor() in your project’s class with super() method. Now create a State in your constructor named as SliderValue . Set the default starting value of SliderValue variable is zero(0) .

<br />
constructor(){</p>
<p>   super();</p>
<p>   this.state ={</p>
<p>    SliderValue :  0</p>
<p>   }<br />
 }

constructor(){

super();

this.state ={

SliderValue : 0

}

4. Create a Parent View in render’s return block and inside it create a Text component. Set the SliderValue State value in Text component. So when we will start updating the State value using Slider automatically updated value set inside the Text component.

<br />
<View style={styles.MainContainer}></p>
<p>        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text></p>
<p>     </View>

<Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>

</View>

5. Add Slider component just after the Text component.

step : This would set the margin value between each value.

minimumValue : Sets the minimum stating value of Slider .

maximumValue : Sets the maximum value of Slider .

minimumTrackTintColor : Color of Slider after moving.

onValueChange : Method call on moving Seekbar, so it will set the value inside Slider .

<br />
<View style={styles.MainContainer}></p>
<p>        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text></p>
<p>        <Slider<br />
          step = { 1 }<br />
          minimumValue = { 0 }<br />
          maximumValue = { 100 }<br />
          minimumTrackTintColor = “#009688”<br />
          onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })}<br />
          style = {{ width: ‘100%’ }}<br />
          /></p>
<p>     </View>

<Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text>

<Slider

step = { 1 }

minimumValue = { 0 }

maximumValue = { 100 }

minimumTrackTintColor = “#009688”

onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })}

style = {{ width: ‘100%’ }}

</View>

6. Create CSS Classes.

<br />
const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
alignItems: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});

const styles = StyleSheet.create({

MainContainer :{

justifyContent: ‘center’,

alignItems: ‘center’,

flex:1,

margin: 10

}

});

7. Complete source code for index.android.js / index.ios.js file:

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, StyleSheet, Text, View, Slider} from ‘react-native’;</p>
<p>class Project extends Component {</p>
<p> constructor(){</p>
<p>   super();</p>
<p>   this.state ={</p>
<p>    SliderValue :  0</p>
<p>   }<br />
 }</p>
<p> render() {</p>
<p>   return (</p>
<p>     <View style={styles.MainContainer}></p>
<p>        <Text style = {{fontSize: 20}}>Slider Value = { this.state.SliderValue }</Text></p>
<p>        <Slider<br />
          step = { 1 }<br />
          minimumValue = { 0 }<br />
          maximumValue = { 100 }<br />
          minimumTrackTintColor = “#009688”<br />
          onValueChange={(ChangedValue) => this.setState({ SliderValue: ChangedValue })}<br />
          style = {{ width: ‘100%’ }}<br />
          /></p>
<p>     </View><br />
   );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>MainContainer :{</p>
<p>justifyContent: ‘center’,<br />
alignItems: ‘center’,<br />
flex:1,<br />
margin: 10</p>
<p>}</p>
<p>});</p>
<p>AppRegistry.registerComponent(‘Project’, () => Project);