Open
Description
Current behaviour
A multiline TextInput
element expands to adapt to text content on mobile, but it doesn't on web. Instead a scrollbar appears inside the textarea
Expected behaviour
TextInput
expands on web to adapt to text length, like it does on mobile. This is expected under the material guidelines: https://material.io/archive/guidelines/components/text-fields.html#text-fields-field-types
Code sample
https://snack.expo.dev/@raphaelmerx/textinput
Screenshots (if applicable)
What have you tried
Adapting the height through onContentSizeChange
, however the textarea never shrinks in size when deleting text:
const [height, setHeight] = useState(undefined)
<TextInput
multiline={true}
onContentSizeChange={(event) => {
setHeight(event.nativeEvent.contentSize.height)
}}
style={{ height }}
/>
Your Environment
software | version |
---|---|
ios or android | web |
react-native | 0.64.3 |
react-native-paper | 4.11.2 |
node | v14.18.1 |
npm or yarn | yarn |
expo sdk | 43 |