React-Nav-Melon/components/molecules/FormTextInput.js

import {StyleSheet, Text, View} from 'react-native';
import {TextInput} from 'react-native-paper'
import React from 'react';
import colors from '../../theme/colors';
import fonts from '../../theme/fonts';

const FormTextInput = props => {
  const {title, placeholder, value, onChangeText, multiline } = props;

  return (
    <View style={styles.inputContainer}>
      <View style={styles.header}>
        <Text style={styles.inputTitleText}>{title}</Text>
        <Text style={styles.requiredSymbol}>*</Text>
      </View>
      <TextInput
        editable
        mode='outlined'
        placeholder={placeholder ?? 'Title'}
        placeholderTextColor={colors.grayShade_300}
        dense
        style={{
          fontFamily: fonts.type.medium,
          fontSize: fonts.getSize(11),
          paddingVertical: 2,
          paddingHorizontal: 4,
          
        }}
        outlineStyle={{
          borderRadius: 4,
        }}
        contentStyle={{
          fontFamily: fonts.type.regular,
          fontSize: fonts.getSize(14),
          color: colors.gray,
          height: multiline ? 128 : 40
        }}
        left={() => (
          <IonIcon name="search-outline" size={24} color={colors.black} />
        )}
        right={() => <List.Icon icon={'search'} color={colors.black} />}
        activeOutlineColor={colors.grayShade_300}
        activeUnderlineColor={colors.grayShade_300}
        outlineColor={colors.grayShade_300}
        cursorColor={colors.secondaryColor}
        selectionColor={colors.secondaryColor}
        onChangeText={onChangeText}
        onSubmitEditing={null}
        value={value}
        multiline={multiline}
      />
    </View>
  );
};

export default FormTextInput;

const styles = StyleSheet.create({
  inputContainer: {
    paddingTop: 4
  },
  inputTitleText: {
    fontFamily: fonts.type.semibold,
    color: colors.grayShade_200,
  },
  requiredSymbol: {
    fontFamily: fonts.type.semibold,
    color: colors.primaryColor,
    marginLeft: 1
  },
  header: {
    flexDirection: 'row'
  },
});