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]

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: #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
}
}

[FitzroyITDev]

@davidgvf 's response is the right one, just in case any of you still have this issue with iOS

[CervarlCG]

I achieved the desired result playing with placeholder and label properties depending if the input has content or not (Only works for controlled components)

...

export default function Textarea(props: InputProps) {
  const [label, setLabel] = useState("");
  const { styles } = useStyles<StyleProps>(createStyles, {
    numberOfLines: props.numberOfLines,
  });

  return (
    <TextInput
      mode="outlined"
      multiline
      style={[styles.textarea, !label ? styles.noLabel : {}]}
      outlineStyle={styles.outline}
      {...props}
      label={label}
      placeholder={!label ? (props.label as string) : " "}
      onFocus={() => setLabel(props.label as string)}
      onBlur={() => !props.value && setLabel("")}
    />
  );
}

const createStyles: CreateStyleSheet<StyleProps> = (theme, props) =>
  StyleSheet.create({
    textarea: {
      backgroundColor: "transparent",
      borderColor: theme.colors.outline,
      paddingVertical: 0,
      height: 48 + 20 * (props.numberOfLines || 1),
    },
    noLabel: {
      marginTop: 8,
    },
    outline: {
      borderRadius: theme.spacing(),
      paddingVertical: 0,
    },
  });

Textarea.Affix = TextInput.Affix;
Textarea.Icon = TextInput.Icon;