Phone number screen

Copy to Clipboard

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Image, ActivityIndicator, Keyboard, Dimensions, TouchableWithoutFeedback} from 'react-native';
import share from '../images/share.png';

export const deviceHeight = Dimensions.get('window').height;

export default class PhoneNumberScreen extends Component {

constructor(props) {
    super(props);
    this.state = {
        phoneNumber : '',
        isLoading: false,
        keyboardHeight: 0,
    };
}

componentDidMount = () => {
    if (Platform.OS === 'ios') {
        this.keyboardWillShowListener = Keyboard.addListener(
          'keyboardWillShow',
          this._keyboardDidShow.bind(this),
        );
        this.keyboardDidHideListener = Keyboard.addListener(
          'keyboardDidHide',
          this._keyboardDidHide.bind(this),
        );
    }
}

_keyboardDidShow() {
    this.setState({keyboardHeight: deviceHeight / 2.5});
}

_keyboardDidHide(event) {
this.setState({keyboardHeight: 0});
}

onClick = () => {
    Keyboard.dismiss();
    this.setState({isLoading: true})
    console.log('PhoneNumberScreen', this.state.phoneNumber);
}

render() {
    return (
        <TouchableWithoutFeedback
            onPress={() => {
              Keyboard.dismiss();
            }}>
            <View style={styles.container}>
                <Image style={{height : 200 , width : 200, marginBottom: 30}}
                    resizeMode={'center'} source={share}
                />
                <View style={{marginBottom: this.state.keyboardHeight, alignItems: 'center'}}>
                    <View style={{}}>
                        <Text style={{justifyContent: 'flex-start'}}>Phone Number</Text>
                        <View style={styles.inputContainer}>
                            <TextInput style={styles.inputs}
                                placeholder="+91XXXXXXXXXX"
                                onChangeText={(phoneNumber) => this.setState({phoneNumber})}/>
                        </View>
                    </View>
                    <TouchableHighlight style={[styles.buttonContainer, styles.sendButton]} onPress={() => this.onClick()}>
                        { this.state.isLoading ?
                            <View style={{}}>
                                <ActivityIndicator
                                    size="small" 
                                    color="#ffffff"
                                />
                            </View>
                        :
                            <Text style={styles.buttonText}>Send</Text>
                        }
                    </TouchableHighlight>
                </View>
            </View>
        </TouchableWithoutFeedback>
    );
}
}

const styles = StyleSheet.create({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: 'white',
    },
   inputContainer: {
       borderBottomColor: 'black',
       backgroundColor: '#FFFFFF',
       borderBottomWidth: 1,
       width:300,
       height: 50,
       marginBottom:20,
       flexDirection: 'row',
       alignItems:'center',
   },
   inputs:{
       height:45,
       marginLeft:0,
       fontSize: 20,
       borderBottomColor: '#FFFFFF',
       flex:1,
   },
   buttonContainer: {
       height:50,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
       marginBottom:20,
       width:200,
       borderRadius:30,
   },
   sendButton: {
       backgroundColor: '#000000',
   },
   buttonText: {
      color: 'white',
      fontSize: 18,
   }
});