Skip to content

Question/feature : control of textAlignVertical for TextInput (multiline) #1570

@amauryfischer

Description

@amauryfischer

Hi,
I'm currently working with react-native-paper for both classical TextInput and multiline TextInput.
Currently i have a style problem :
Capture d’écran 2020-01-13 à 13 29 21
Capture d’écran 2020-01-13 à 13 29 33

The distance between the label and the first line of TextInput value is different for multiline and !multiline TextInput.
This is due to the property textAlignVertical which is set as "top" for !multiline fields and "center" for multiline.
It is partially related to #1020

Here is the code responsible of this behaviour : https://github.com/callstack/react-native-paper/blob/master/src/components/TextInput/TextInputFlat.tsx
Line 267

textAlignVertical: multiline ? 'top' : 'center',

(and of course same for TextInputOutlined
https://github.com/callstack/react-native-paper/blob/master/src/components/TextInput/TextInputOutlined.tsx

Is there a way to customize this style ?
It seems there is not a lot of style going that far from style props to TextInput, they are intercepted by the line76 in TextInputFlat

    const {
      fontSize: fontSizeStyle,
      fontWeight,
      height,
      paddingHorizontal,
      ...viewStyle
    } = (StyleSheet.flatten(style) || {}) as TextStyle;

Metadata

Metadata

Assignees

No one assigned

    Labels

    StalequestionQuestion related to the library, not an issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions