Android: Add disableExtractUI prop to TextInput on Android

Summary:
On Android, if there is a small amount of space available around a text input (e.g. landscape orientation on a phone), Android may choose to have the user edit the text inside of a full screen text input mode. This behavior isn't always desirable. For example, if your app offers some UI controls for controlling the formatting of the text, you want the controls to be visible while the user is editing the text. This Android feature conflicts with that desired experience because the UI controls would be hidden while the text is being edited.

The `disableExtractUI` prop enables developers to choose whether or not Android's full screen text input editing mode is enabled. When this prop is true, Android's `IME_FLAG_NO_EXTRACT_UI` flag is passed to the `setImeOptions` method.

**Test plan (required)**

Verified `disableExtractUI` works for both `true` and `false` values in a test app.

My team is also using this change in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/10900

Differential Revision: D4226483

Pulled By: mkonicek

fbshipit-source-id: 8f1055f6e612b05bafabe6f07a3705dd8788e3da
This commit is contained in:
Adam Comella
2016-11-23 06:41:53 -08:00
committed by Facebook Github Bot
parent 9fb520e3b2
commit 1b870d2019
3 changed files with 75 additions and 24 deletions

View File

@@ -304,6 +304,15 @@ const TextInput = React.createClass({
* @platform android
*/
numberOfLines: PropTypes.number,
/**
* When `false`, if there is a small amount of space available around a text input
* (e.g. landscape orientation on a phone), the OS may choose to have the user edit
* the text inside of a full screen text input mode. When `true`, this feature is
* disabled and users will always edit the text directly inside of the text input.
* Defaults to `false`.
* @platform android
*/
disableFullscreenUI: PropTypes.bool,
/**
* If `true`, the keyboard disables the return key when there is no text and
* automatically enables it when there is text. The default value is `false`.
@@ -708,6 +717,7 @@ const TextInput = React.createClass({
onTextInput={this._onTextInput}
text={this._getText()}
children={children}
disableFullscreenUI={this.props.disableFullscreenUI}
/>;
return (