TextInputComponent.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
  Image,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {HelperText} from 'react-native-paper';
import styles from '../screens/authentication/login/styles';
import colors from '../values/colors';
import AppText from './AppText';
const TextInputComponent = ({
  placeholder,
  style,
  placeholderTextColor,
  keyboardType,
  autoCapitalize,
  onChangeText,
  onBlur,
  value,
  errors,
  rightIcon,
  onPressRightIcon,
  leftIcon,
  onPressLeftIcon,
  styleAreaInput,
  secureTextEntry,
  label,
  require,
  styleLabel,
  maxLength,
  onFocus,
  disable,
  noBorder,
  autoCompleteType,
  borderColor,
  type,
}) => {
  return (
    <View style={stylesTextInput.container}>
      {label && (
        <View style={stylesTextInput.containerLabel}>
          <AppText
            children={`${label}`}
            style={[stylesTextInput.textLabel, styleLabel]}
          />
          {require && <AppText children={' *'} style={{color: colors.red}} />}
        </View>
      )}
      <View
        style={[
          noBorder
            ? stylesTextInput.containerAreaInputNoBorder
            : stylesTextInput.containerAreaInput,
          styleAreaInput,
          {borderColor: borderColor},
        ]}>
        {leftIcon && (
          <TouchableOpacity
            onPress={() => {
              onPressLeftIcon && onPressLeftIcon();
            }}
            style={stylesTextInput.leftIcon}>
            <Image source={leftIcon} style={stylesTextInput.icon} />
          </TouchableOpacity>
        )}
        <TextInput
          style={[stylesTextInput.textInput, style]}
          placeholder={placeholder}
          placeholderTextColor={placeholderTextColor ?? colors.grayC4}
          keyboardType={keyboardType}
          autoCapitalize={autoCapitalize}
          onChangeText={onChangeText}
          onBlur={onBlur}
          value={value}
          secureTextEntry={secureTextEntry}
          maxLength={maxLength}
          onFocus={onFocus}
          editable={!disable}
          autoComplete={autoCompleteType}
        />
        {rightIcon && (
          <TouchableOpacity
            onPress={() => {
              onPressRightIcon && onPressRightIcon();
            }}>
            <Image source={rightIcon} style={stylesTextInput.icon} />
          </TouchableOpacity>
        )}
      </View>
      <HelperText type="error" visible={Boolean(errors)}>
        {errors}
      </HelperText>
    </View>
  );
};
const stylesTextInput = StyleSheet.create({
  container: {
    width: '100%',
  },
  containerAreaInput: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
    width: '100%',
    ...styles.inputBox2,
    marginTop: 5,
    paddingHorizontal: 8,
    paddingRight: 12,
    borderColor: colors.black1,
    borderWidth: 1,
  },
  containerAreaInputNoBorder: {
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
    width: '100%',
    ...styles.inputBox2,
    marginTop: 5,
    paddingHorizontal: 8,
    paddingRight: 12,
    borderBottomWidth: 0.5,
  },
  icon: {
    width: 20,
    height: 20,
  },
  textInput: {
    flex: 1,
    color: colors.royal_blue,
    // marginLeft: 10,
    height: 45,
  },
  textLabel: {
    color: colors.black1,
    fontSize: 16,
    fontFamily: 'SegoeUI',
  },
  leftIcon: {
    height: 50,
    paddingHorizontal: 5,
    justifyContent: 'center',
  },
  containerLabel: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});
export default TextInputComponent;