Skip to content

Instantly share code, notes, and snippets.

@khalid32
Created June 25, 2017 17:31
Show Gist options
  • Select an option

  • Save khalid32/c3bc9869d52390e743da7ace0a848b6e to your computer and use it in GitHub Desktop.

Select an option

Save khalid32/c3bc9869d52390e743da7ace0a848b6e to your computer and use it in GitHub Desktop.
Here I backup all react-native component; basically for understanding how it works...
import React, { Component } from 'react';
import { StyleSheet, Text, View, Slider } from 'react-native';
class SlideText extends React.Component {
constructor(props){
super(props);
this.state = {
value: this.props.value,
min: this.props.min,
max: this.props.max,
step: this.props.step,
};
}
static defaultProps = {
value: 3,
min: 0,
max: 5,
step: 1,
}
onValueChange(value){
this.setState({
value: value,
});
}
onSlidingComplete(value){
alert(`Complete ${value}`);
}
render() {
return (
<View style={styles.container}>
<Slider style={styles.onlyJustify}
maximumValue={this.state.max}
minimumValue={this.state.min}
step={this.state.step}
value = {this.state.value}
onValueChange={(value) => {this.onValueChange(value)}}
onSlidingComplete={(value) => {this.onSlidingComplete(value)}}/>
<View style={[styles.container, styles.adjust]}>
<Text>Hello from the other side</Text>
<Text>{this.state.value}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
},
adjust: {
justifyContent: 'center',
alignItems: 'center',
},
onlyJustify: {
alignItems: 'center',
}
});
export default SlideText;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment