TextInput with mode="outlined", how to use bigger height for multiline and how to remove the paddingTop

Current behaviour

Expected behaviour

I am setting height in <TextInput multiline style={{height: 200, paddingTop: 0}} /> to have a bigger textarea field.

It seems that the padding top is forced by react native paper

Code sample

<TextInput multiline style={{height: 200, paddingTop: 0}} />

Reproduction

https://snack.expo.io/@kopax/blessed-popsicle

Screenshots (if applicable)

What have you tried

So far, I don’t see how to use my paddingTop preference to fix the issue

Your Environment

software	version
ios or android	web
react-native	expo sdk 36
react-native-paper	3.6.0
node	13
npm or yarn	6.4.1
expo sdk	36

[Svarto]

@OlimpiaZurek that comment does not fixed the forced paddingTop, or am I missing something? The paddingTop comes from the view that RNP have wrapped the textinput in, it is set at 8, and I can’t find a way to make it zero

[jasongaare]

I’ve hit this same issue. When using mode="outlined" the text is padding on the top, creating an undesirable user experience.

My ultimate solution has been to hack together my own outlined TextInput, by extending the styles of the flat style, as seen here (using styled components):

const OutlinedTextInput = styled(TextInput).attrs({
  dense: true,
  underlineColor: 'transparent',
})`
  margin: 8px 0px;
  border: ${StyleSheet.hairlineWidth}px solid ${colors.charcoal};
  border-radius: 4px;
  padding-bottom: 4px;
`;