text: import React, {Component} from 'react';
  import {
    View,
    Text,
    StyleSheet,
    TextInput,
    Dimensions,
    TouchableOpacity,
    Image,
    Keyboard,
  } from 'react-native';
  import {API_URL, MAIN_COLOR, TEXT_COLOR} from '../../../constants';
  import Icon from 'react-native-vector-icons/Ionicons';
  import {TextInputMask} from 'react-native-masked-text';
  import PopUpComponent from '../../../components/PopUpComponent';
  
  const {width, height} = Dimensions.get('window');
  
  class LogInScreen2d extends Component {
    render() {
      const {
        navigation,
        route: {
          params: {catchFromAsk, username},
        },
      } = this.props;
      return (
        <View style={styles.container}>
          <View style={styles.header}>
            <TouchableOpacity
              style={styles.menuIcon}
              onPressOut={() => navigation.goBack(null)}>
              <Icon name="ios-arrow-back" size={26} color="black" />
            </TouchableOpacity>
            <Image
              style={{width: width * 0.26}}
              source={require('../../../assets/images/logo.jpeg')}
              resizeMode={'contain'}
            />
          </View>
          <View style={styles.body}>
            <Text style={{margin: 20, fontSize: 15}}>
              휴대폰 번호를 입력해 주세요.
            </Text>
            <TextInputMask
              placeholder="휴대폰 번호"
              autoFocus={true}
              ref="mobilePhone"
              keyboardType="numeric"
              type={'custom'}
              options={{
                mask: '999-9999-9999',
              }}
              value={this.props.phone}
              onChangeText={this.props.changePhone}
              style={[
                styles.textInput,
                this.props.isFocused ? styles.focused : styles.unFocused,
              ]}
            />
          </View>
          <View style={styles.btnContainer}>
            <TouchableOpacity
              style={styles.button}
              onPressOut={() => this.props.handleSubmit()}>
              <Text style={styles.btnText}>확인</Text>
            </TouchableOpacity>
          </View>
          <PopUpComponent
            title={'환영합니다!'}
            body={'회원 가입이 완료되었습니다.'}
            hide={this.props.hide}
            onConfirm={() => {
              this.props.initApp();
              this.props.hidePopup();
              this.props.navigation.navigate('Main');
              Keyboard.dismiss();
            }}
            onCancel={() => {
              this.props.initApp();
              this.props.hidePopup();
              this.props.navigation.navigate('Main');
              Keyboard.dismiss();
            }}
          />
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: 'white',
      flex: 1,
      paddingTop: 5,
    },
    header: {
      backgroundColor: 'white',
      width,
      height: width * 0.16,
      justifyContent: 'space-between',
      flexDirection: 'row',
      alignItems: 'center',
      paddingRight: 18,
      marginTop: 10,
    },
    menuIcon: {
      padding: 17,
    },
    body: {
      alignItems: 'center',
      paddingTop: 20,
    },
    textInput: {
      fontSize: 16,
      width: width * 0.85,
      borderBottomWidth: 1,
      padding: 14,
      color: MAIN_COLOR,
      marginTop: 15,
    },
    focused: {
      borderBottomColor: MAIN_COLOR,
    },
    unFocused: {
      borderBottomColor: 'lightgrey',
    },
    btnContainer: {
      alignItems: 'center',
    },
    button: {
      backgroundColor: MAIN_COLOR,
      width: width * 0.8,
      height: width * 0.12,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 3,
      marginTop: 57,
    },
    btnText: {
      color: 'white',
      fontSize: 15,
    },
  });
  
  export default LogInScreen2d;
  