React Native - Seekbar Slider - Mobile Application development
Congratulations! You are standing in the right place! In this article, we would be going to engender a react native application with the Text component and Slider component.
We are going to create a mobile app like below,
Implementation:
First, You must set up your local development environment. Follow the below link to set up your local environment.
After executing the commands mentioned in this link, a folder with a specified name is created with the following contents.
Next, we are going to edit the App.js file and write the below code.
Import AppRegistry, StyleSheet, Text, View, and Slider component in our project.
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Slider } from 'react-native';
Engender constructor()
constructor() {
super();
this.state = {
SliderInitValue: 18
}
}
Engender a Parent View in render’s return block and inside it engender a Text component. Set the SliderValue State value in the Text component.
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 20 }}>Age = {this.state.SliderInitValue}</Text>
<Slider
step={1}
minimumValue={18}
maximumValue={60}
minimumTrackTintColor="purple"
onValueChange={(ChangedValue) => this.setState({
SliderInitValue: ChangedValue })}
style={{ width: '100%' }}
/>
</View>
);
}
}
Style Sheet
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
margin: 10
}
});
Complete source code for App.js File
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Slider } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
SliderInitValue: 18
}
}
render() {
return (
<View style={styles.MainContainer}>
<Text style={{ fontSize: 20 }}>Age = {this.state.SliderInitValue}
</Text>
<Slider
step={1}
minimumValue={18}
maximumValue={60}
minimumTrackTintColor="purple"
onValueChange={(ChangedValue) => this.setState({
SliderInitValue: ChangedValue })}
style={{ width: '100%' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
margin: 10
}
});
AppRegistry.registerComponent('App', () => App);
Run
sibinmuhammed@ladmin-H310M-S2:~$ react-native start
sibinmuhammed@ladmin-H310M-S2:~/knf-reactnative/KnowledgeFactoryDemo$ react-native run-android
More Topics,
