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?: 'oneTimeCode';
}

const NormalInput = forwardRef<TextInput, NormalInputProps>(
    (
        {
            placeholder,
            extendedStyle,
            type,
            onChangeText,
            secureTextEntry = false,
            value,
            editable,
            textContentType
        },
        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}
            />
        );
    }
);

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

export default NormalInput;