Skip to content

Instantly share code, notes, and snippets.

@krissnawat krissnawat/phoneinput-2.js
Last active Jul 16, 2019

Embed
What would you like to do?
import React, { Component } from "react";
import {
View,
TouchableOpacity,
Text,
StyleSheet,
TextInput
} from "react-native";
class PhoneInput extends Component {
constructor(props) {
super(props);
this.state = {
phone_number: null
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
One more thing please prove your are human{" "}
</Text>
<TextInput
style={styles.input}
placeholder="input phone number"
onChangeText={phone_number => this.setState({ phone_number: phone_number })}
/>
<View style={styles.btnContiner}>
<TouchableOpacity
style={styles.btn}
onPress={() => this.sendOtp(this.state.phone_number)}
>
<Text style={styles.btntext}>Send OTP</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
bottom: 66
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
fontWeight: "300"
},
input: {
width: "90%",
backgroundColor: "skyblue",
padding: 15,
marginBottom: 10
},
btnContiner: {
flexDirection: "row",
justifyContent: "center",
width: "80%"
},
btn: {
backgroundColor: "orange",
padding: 15,
width: "45%",
marginLeft: 10
},
btntext: { fontSize: 16, textAlign: "center" },
logo: {
flexDirection: "row"
}
});
export default PhoneInput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.