README
React Native Gmailtype Textinput
react-native-gmailtype-textinput
A React Native component that allow you to use latest Gmail Type Text Input Field in react-native app.It is compatible with both expo and react-native-init. it is a cross platform componenet so it can be use in both android as well as ios.
GIF | Image | Image |
---|---|---|
Getting Started
Install it by using either npm or yarn
with npm
npm i react-native-gmailtype-textinput
react-native link react-native-gmailtype-textinput
with yarn
yarn add react-native-gmailtype-textinput
react-native link react-native-gmailtype-textinput
Usages
import { StyleSheet, Text, View,KeyboardAvoidingView } from 'react-native';
import GmailInput from 'react-native-gmailtype-textinput';
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
email_or_phone:'',
password:''
}
}
render() {
return (
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<Text>Gmail Type Input Field</Text>
<View style={{width:"100%",marginBottom: 10}}>
<GmailInput label='Email or Phone'
onChangeText={(text) => {this.setState({email_or_phone:text})}}
hideLabel={this.state.email_or_phone !== ''}
/>
</View>
<View style={{width:"100%"}}>
<GmailInput label='Password'
onChangeText={(text) => {this.setState({password:text})}}
hideLabel={this.state.password !== ''}
/>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
License
ISC