nomadmania-app/src/components/Input/index.tsx

import React, { FC, ReactNode, useState } from 'react';
import {
  TextInput,
  Text,
  View,
  InputModeOptions,
  NativeSyntheticEvent,
  TextInputFocusEventData,
  TouchableOpacity
} from 'react-native';
import { styling } from './style';
import { Colors } from 'src/theme';

type Props = {
  placeholder?: string;
  onChange?: (text: string) => void;
  header?: string;
  isPrivate?: boolean;
  inputMode?: InputModeOptions;
  isFocused?: (boolean: boolean) => void;
  value?: string;
  active?: boolean;
  onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
  formikError?: string | boolean;
  icon?: ReactNode;
  multiline?: boolean;
  editable?: boolean;
  height?: number;
  backgroundColor?: string;
  clearIcon?: ReactNode;
  setValue?: (value: string) => void;
};

export const Input: FC<Props> = ({
  onChange,
  placeholder,
  header,
  isPrivate,
  inputMode,
  isFocused,
  onBlur,
  value,
  formikError,
  icon,
  multiline,
  editable,
  height,
  backgroundColor = Colors.FILL_LIGHT,
  clearIcon,
  setValue
}) => {
  const [focused, setFocused] = useState(false);

  const styles = styling(focused);

  return (
    <View>
      {header ? <Text style={styles.text}>{header}</Text> : null}
      <View
        style={[
          [styles.wrapper, formikError ? styles.inputError : null, { backgroundColor }],
          { flexDirection: 'row', alignItems: 'center' },
          multiline ? { minHeight: height ?? 100, height: 'auto' } : { height: height ?? 44 }
        ]}
      >
        {icon ? (
          <View
            style={{
              height: 44,
              width: 44,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {icon}
          </View>
        ) : null}
        <TextInput
          editable={editable}
          value={value}
          inputMode={inputMode ?? 'text'}
          secureTextEntry={isPrivate ?? false}
          placeholder={placeholder}
          onChangeText={onChange}
          multiline={multiline}
          contextMenuHidden={inputMode === 'none'}
          caretHidden={inputMode === 'none'}
          onPress={() => {
            setFocused(true);
            if (isFocused) {
              isFocused(true);
            }
          }}
          onFocus={() => {
            if (inputMode !== 'none') {
              setFocused(true);
              if (isFocused) {
                isFocused(true);
              }
            }
          }}
          onBlur={(e) => {
            setFocused(false);
            if (onBlur) {
              onBlur(e);
            }
          }}
          style={[{ height: '100%', width: '100%', flex: 1 }, !icon ? { padding: 10 } : null]}
        />
        {clearIcon && value && value?.length > 0 ? (
          <TouchableOpacity
            style={styles.clearIcon}
            onPress={() => {
              setValue && setValue('');
            }}
          >
            {clearIcon}
          </TouchableOpacity>
        ) : null}
      </View>
      {formikError ? <Text style={styles.errorText}>{formikError}</Text> : null}
    </View>
  );
};