Skip to content

Commit

Permalink
feat: Add rows prop to TextInput component (#34488)
Browse files Browse the repository at this point in the history
Summary:
This adds the Android only `rows` prop to TextInput as requested on #34424 mapping the existing `numberOfLines` prop to `rows`. This PR also updates the TextInputExample.android on the RNTester in order to facilitate the manual QA of this.

## Changelog

[Android] [Added] - Add rows prop to TextInput component

Pull Request resolved: #34488

Test Plan:
1. On Android open the RNTester app and navigate to the TextInput page
2. Test the `TextInput` component through the `Fixed number of lines` section

https://user-images.githubusercontent.com/11707729/186300173-7de79799-25b8-48af-99c0-8e3abeae334f.mov

Reviewed By: christophpurrer

Differential Revision: D38981953

Pulled By: cipolleschi

fbshipit-source-id: d4d84b3c0dac7342ba9a65e2491928fbc61ff4f1
  • Loading branch information
gabrieldonadel authored and facebook-github-bot committed Aug 25, 2022
1 parent 0b70b38 commit 49c9ccd
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 2 deletions.
8 changes: 8 additions & 0 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -452,6 +452,13 @@ type AndroidProps = $ReadOnly<{|
*/
returnKeyLabel?: ?string,

/**
* Sets the number of rows for a `TextInput`. Use it with multiline set to
* `true` to be able to fill the lines.
* @platform android
*/
rows?: ?number,

/**
* When `false`, it will prevent the soft keyboard from showing when the field is focused.
* Defaults to `true`.
Expand Down Expand Up @@ -1356,6 +1363,7 @@ function InternalTextInput(props: Props): React.Node {
disableFullscreenUI={props.disableFullscreenUI}
focusable={focusable}
mostRecentEventCount={mostRecentEventCount}
numberOfLines={props.rows ?? props.numberOfLines}
onBlur={_onBlur}
onChange={_onChange}
onFocus={_onFocus}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -392,12 +392,22 @@ exports.examples = ([
<TextInput
numberOfLines={2}
multiline={true}
placeholder="Two line input"
placeholder="Two line input using numberOfLines prop"
/>
<TextInput
numberOfLines={5}
multiline={true}
placeholder="Five line input"
placeholder="Five line input using numberOfLines prop"
/>
<TextInput
rows={2}
multiline={true}
placeholder="Two line input using rows prop"
/>
<TextInput
rows={5}
multiline={true}
placeholder="Five line input using rows prop"
/>
</View>
);
Expand Down

0 comments on commit 49c9ccd

Please sign in to comment.