callstack / callstack/react-native-paper

TextInput's textarea component doesn't grow with height of TextInput

Open
#3,673 3 comments 1 reaction 0 assignees View on GitHub
feature request TextInput
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
I set a TextInput component with `style={{flex:1]]` and `multiline`. The outer bounds of the input grows vertically as expected, but the bounds of the textarea within it are not growing.

### Expected behaviour
If I set the height of the TextInput larger, the multiline textarea should grow with it.

### How to reproduce?
Here's a snack that shows the problem:
https://snack.expo.dev/@jmbldwn/textinput?name=TextInput&description=https%3A%2F%2Fcallstack.github.io%2Freact-native-paper%2Ftext-input.html&code=import%20*%20as%20React%20from%20%27react%27%3B%0Aimport%20%7B%20TextInput%20%7D%20from%20%27react-native-paper%27%3B%0A%0Aconst%20MyComponent%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20%5Btext%2C%20setText%5D%20%3D%20React.useState(%22%22)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20label%3D%22Email%22%0A%20%20%20%20%20%20value%3D%7Btext%7D%0A%20%20%20%20%20%20onChangeText%3D%7Btext%20%3D%3E%20setText(text)%7D%0A%20%20%20%20%2F%3E%0A%20%20)%3B%0A%7D%3B%0A%0Aexport%20default%20MyComponent%3B&dependencies=react-native-paper,@expo/vector-icons%40%5E13.0.0,react-native-safe-area-context

### Preview
See Snack.

### What have you tried so far?
The stock react native TextInput doesn't have this problem.
I am able to force flex attributes on the textarea in my debugger, but this isn't a solution.

### Your Environment

| software | version
| --------------------- | -------
| ios | n/a
| android | n/a
| react-native | 0.69.4
| react-native-paper | 5.2.0
| node | 14.16.0
| npm or yarn | yarn 1.x
| expo sdk | 46.0.7

Contributor guide

Open the contributing guide

Research direction

Reproduce the linked Expo Snack with react-native-paper TextInput, multiline, and an explicit height. Then inspect the TextInput component's multiline textarea path; done means the inner textarea grows with the outer TextInput height and the relevant behavior is covered by an appropriate test.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.