Custom text input with an optional icon and styling

Question

I am trying to create my TextInput component that wraps around React Native's TextInput, but applies additional styles and adds more features.

Unfortunately, I am stuck at the very start of my component... I cannot create its type.

Here's what I have so far:

import React, {JSX} from 'react';
import {StyleSheet, TextInput as RNTextInput, View,} from 'react-native';
import {useTheme} from '@/context/ThemeProvider';

export type TextInputProps = {
    icon?: JSX.Element | undefined;
    textInputProps?: React.ComponentProps<typeof RNTextInput>;
};


export default function TextInput({textInputProps, icon}: TextInputProps) {
    const {theme} = useTheme();

    return (
        <View
            style={[
                styles.container,
                {
                    backgroundColor: theme.backgrounds.tertiary,
                    borderBottomColor: theme.borders.secondary,
                },
            ]}
        >
            {icon && <View style={styles.icon}>{icon}</View>}

            <RNTextInput
                placeholderTextColor={theme.text.lowEmphasis}
                style={[
                    styles.input,
                    {color: theme.text.highEmphasis},
                ]}
                {...textInputProps}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        height: 44,
        paddingHorizontal: 12,
        borderBottomWidth: 2,
    },
    icon: {},
    input: {
        flex: 1,
        paddingVertical: 0,
    },
});

However, I get this when spreading any additional props that might have been passed to TextInput in <RNTextInput {...textInputProps}/>:

Type ...React.ComponentProps<typeof RNTextInput> | undefined is not assignable to type React.ReactNode | undefined

My app runs fine with this error, but I want to have a clean file. What should be the value of textInputProps? in type TextInputProps?

B Sunny · Accepted Answer · 2025-10-29 13:31:06Z

Instead of <typeof RNTextInput>, just import the actual type of TextInputProps :

import { TextInput as RNTextInput, TextInputProps as RNTextInputProps  } from 'react-native';

Then use & to combine it with your own:

export type MyInputProps = RNTextInputProps & {
  icon?: React.ReactNode;
};

And use it in the component:

export default function TextInput({ icon, ...otherProps}: MyInputProps) {
    const {theme} = useTheme();

    return (
        <View
            style={[
                styles.container,
                {
                    backgroundColor: theme.backgrounds.tertiary,
                    borderBottomColor: theme.borders.secondary,
                },
            ]}
        >
            {icon && <View style={styles.icon}>{icon}</View>}

            <RNTextInput
                placeholderTextColor={theme.text.lowEmphasis}
                style={[
                    styles.input,
                    {color: theme.text.highEmphasis},
                ]}
                {...otherProps}
            />
        </View>
    );
}

Collectives™ on Stack Overflow

Custom text input with an optional icon and styling

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related