React-native-paper: TextInput multiline is always vertical padded

[IngenieroLata]

TextInput multiline is always vertical padded

Is there a way to prevent the vertical paddings for TextInputs multiline? I'm currently fixed to v3.6.0 since I require ellipsis for Card titles and it seems that for multiline TextInputs the content is always padded.

Not sure if this is intended. Or how do I prevent this behavior?

[raajnadar]

Try adding this to style to TextInput component textAlignVertical: 'top'

[IngenieroLata]

@raajnadar It didn't work for me. I end up using the render prop

<TextInput
    {...props}
    style={styles.field}
    render={(innerProps) => (
    <NativeTextInput
        {...innerProps}
        style={[
        innerProps.style,
        props.multiline
            ? {
                paddingTop: 8,
                paddingBottom: 8,
                height: 100,
            }
            : null,
        ]}
    />
    )}
/>

[anshumanworks]

@raajnadar It didn't work for me. I end up using the render prop

<TextInput
    {...props}
    style={styles.field}
    render={(innerProps) => (
    <NativeTextInput
        {...innerProps}
        style={[
        innerProps.style,
        props.multiline
            ? {
                paddingTop: 8,
                paddingBottom: 8,
                height: 100,
            }
            : null,
        ]}
    />
    )}
/>

What is component here?

[moudallal]

What is the component here?

@anshumanworks Hey! The component is actually the Native Text Input that you can import from the React Native Library.

Try adding this import to your code
import { TextInput as NativeTextInput } from 'react-native';

He imports it under another name to avoid conflict between the native text input and the paper text input.

Hope I helped!

[Ramesh-Chathuranga]

Hi, I had the same issue and using render method also fix my issue. but don't use innerProps.style for styling, and use your own styles. and it will be solved your issue.