crazycharge-app/component/global/normal_input.tsx

import React, { forwardRef } from 'react';
import {
    TextInput,
    StyleSheet,
    StyleProp,
    ViewStyle,
    KeyboardTypeOptions
} from 'react-native';

interface NormalInputProps {
    placeholder: string | undefined;
    extendedStyle?: StyleProp<ViewStyle>;
    onChangeText: (text: string) => void;
    type?: KeyboardTypeOptions;
    secureTextEntry?: boolean;
    value?: string;
    editable?: boolean;
    textContentType?:
        | 'none'
        | 'URL'
        | 'addressCity'
        | 'addressCityAndState'
        | 'addressState'
        | 'countryName'
        | 'creditCardNumber'
        | 'emailAddress'
        | 'familyName'
        | 'fullStreetAddress'
        | 'givenName'
        | 'jobTitle'
        | 'location'
        | 'middleName'
        | 'name'
        | 'namePrefix'
        | 'nameSuffix'
        | 'nickname'
        | 'organizationName'
        | 'postalCode'
        | 'streetAddressLine1'
        | 'streetAddressLine2'
        | 'sublocality'
        | 'telephoneNumber'
        | 'username'
        | 'password'
        | 'newPassword'
        | 'oneTimeCode';
    autoComplete?:
        | 'name'
        | 'nickname'
        | 'username'
        | 'password'
        | 'new-password'
        | 'one-time-code'
        | 'email'
        | 'tel'
        | 'street-address'
        | 'postal-code'
        | 'cc-number'
        | 'cc-exp'
        | 'cc-csc'
        | 'cc-exp-month'
        | 'cc-exp-year'
        | 'off'
        | 'password-new';
}

const NormalInput = forwardRef<TextInput, NormalInputProps>(
    (
        {
            placeholder,
            extendedStyle,
            type,
            onChangeText,
            autoComplete,
            secureTextEntry = false,
            value,
            editable,
            textContentType = 'oneTimeCode'
        },
        ref
    ) => {
        return (
            <TextInput
                ref={ref}
                style={[styles.textInput, extendedStyle]}
                placeholder={placeholder}
                placeholderTextColor={'#888888'}
                secureTextEntry={secureTextEntry}
                keyboardType={type ? type : 'default'}
                value={value}
                onChangeText={(value) => onChangeText(value)}
                textContentType={textContentType}
                editable={editable}
                autoComplete={autoComplete}
            />
        );
    }
);

const styles = StyleSheet.create({
    textInput: {
        maxWidth: '100%',
        fontSize: 16,
        borderWidth: 1,
        padding: 20,
        borderRadius: 12,
        borderColor: '#bbbbbb'
    }
});

export default NormalInput;