TextInput label is center aligned for multiline textInputs

[gautam678]

Environment

react-native-paper: "3.6.0" iOS: 13.3.1

Description

Label for multiline Textareas are aligned to the center. I expected the label to be aligned to the top. I don't see a prop to style label for Textinput either.

Reproducible Demo

import { TextInput } from 'react-native-paper';

export default class MyComponent extends React.Component {
  state = {
    text: ''
  };

  render(){
    return (
      <TextInput
        label='Email'
        value={this.state.text}
        multiline
        onChangeText={text => this.setState({ text })}
        style={{height:400}}
      />
    );
  }
}```

[antaehyeon]

Hi.

Can you use the render props ?

below example code.

import { ..., Platform, TextInput } from "react-native";
import { TextInput as PaperTextInput } from "react-native-paper";
 ...

 // just temporarily style
  const PAPER_TEXT_INPUT_STYLE = {
    width: "100%",
    height: 160,
    borderRadius: 4
  };

  const RN_TEXT_INPUT_STYLE = {
    width: "100%",
    height: 160,
    fontSize: 14,
    padding: 16,
    ...Platform.select({
      android: {
        textAlignVertical: "top"
      }
    })
  };

  return (
    <PaperTextInput
      style={PAPER_TEXT_INPUT_STYLE}
      multiline={true}
      mode={"outlined"}
      render={props => (
        <TextInput
          {...props}
          style={RN_TEXT_INPUT_STYLE}
          placeholder={PLACE_HOLDER}
          placeholderTextColor={Colors.grey490}
        />
      )}
    />
  );

I hope will be applied in the textInput style attribute of the react native paper.

[gautam678]

@antaehyeon I tried the code snippet. The label is still center aligned when out of focus.

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[gautam678]

This PR will fix the issue: https://github.com/callstack/react-native-paper/pull/1824

[Huxpro]

@gautam678 thanks for mentioning. Unfortunately, the team seems to be slowly responding to PRs.

[nguyen-vo]

For those looking for the answer, set the numberOfLine seems to fixed the issue

[isinha-onefc]

This issue is still occurring. However, mode="outlined" along with multiline and numberOfLines seemed to fix this issue for me on Android.

[davidgvf]

you need put heigh in content style and fixed

contentStyle={ props.multiline && { height: 150 } }