import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity, Platform} from 'react-native';
import {colors} from '../assets/styles/colors-theme';
import {width, height} from '../services/screen';

class CustomTextInput extends Component {
  render() {
    return (
      <View
        style={{
          backgroundColor: 'white',
          height: 50,
          borderRadius: 10,
          width: width - 40,
          justifyContent: 'center',
          marginTop: 20,
        }}>
        <TextInput
          underlineColorAndroid="rgba(0,0,0,0)"
          keyboardType={this.props.keyboardType}
          onChangeText={this.props.onChangeText}
          secureTextEntry={this.props.secureTextEntry}
          placeholderStyle={{fontWeight: 'bold'}}
          placeholderTextColor={colors.titleColor}
          ref={input => this.props.inputRef && this.props.inputRef(input)}
          returnKeyType={this.props.returnKeyType}
          onSubmitEditing={
            this.props.onSubmitEditing && this.props.onSubmitEditing
          }
          onFocus={this.props.onFocus}
          placeholder={this.props.title}
          value={this.props.content}
          style={{
            color: colors.titleColor,
            fontSize: 14,
            fontWeight: 'bold',
            marginBottom: Platform.OS === 'ios' ? 3 : 0,
            paddingVertical: 0,
            marginLeft: 15,
          }}
        />
      </View>
    );
  }
}
export default CustomTextInput;
