react-native-gmailtype-textinput

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