From 1b870d201976455303ee176c03a4824eac07e11b Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Wed, 23 Nov 2016 06:41:53 -0800 Subject: [PATCH] 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 --- Libraries/Components/TextInput/TextInput.js | 10 ++++ .../react/views/textinput/ReactEditText.java | 58 +++++++++++++++++++ .../textinput/ReactTextInputManager.java | 31 +++------- 3 files changed, 75 insertions(+), 24 deletions(-) diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index b354d8418..bfde62b5d 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -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 ( diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 9529a3e32..90af968f0 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -33,6 +33,7 @@ import android.view.Gravity; import android.view.KeyEvent; import android.view.MotionEvent; import android.view.View; +import android.view.inputmethod.EditorInfo; import android.view.inputmethod.InputMethodManager; import android.widget.EditText; @@ -74,6 +75,8 @@ public class ReactEditText extends EditText { private int mStagedInputType; private boolean mContainsImages; private boolean mBlurOnSubmit; + private boolean mDisableFullscreen; + private @Nullable String mReturnKeyType; private @Nullable SelectionWatcher mSelectionWatcher; private @Nullable ContentSizeWatcher mContentSizeWatcher; private final InternalKeyListener mKeyListener; @@ -97,6 +100,7 @@ public class ReactEditText extends EditText { mIsSettingTextFromJS = false; mIsJSSettingFocus = false; mBlurOnSubmit = true; + mDisableFullscreen = false; mListeners = null; mTextWatcherDelegator = null; mStagedInputType = getInputType(); @@ -254,6 +258,24 @@ public class ReactEditText extends EditText { return mBlurOnSubmit; } + public void setDisableFullscreenUI(boolean disableFullscreenUI) { + mDisableFullscreen = disableFullscreenUI; + updateImeOptions(); + } + + public boolean getDisableFullscreenUI() { + return mDisableFullscreen; + } + + public void setReturnKeyType(String returnKeyType) { + mReturnKeyType = returnKeyType; + updateImeOptions(); + } + + public String getReturnKeyType() { + return mReturnKeyType; + } + /*protected*/ int getStagedInputType() { return mStagedInputType; } @@ -407,6 +429,42 @@ public class ReactEditText extends EditText { setGravity((getGravity() & ~Gravity.VERTICAL_GRAVITY_MASK) | gravityVertical); } + private void updateImeOptions() { + // Default to IME_ACTION_DONE + int returnKeyFlag = EditorInfo.IME_ACTION_DONE; + if (mReturnKeyType != null) { + switch (mReturnKeyType) { + case "go": + returnKeyFlag = EditorInfo.IME_ACTION_GO; + break; + case "next": + returnKeyFlag = EditorInfo.IME_ACTION_NEXT; + break; + case "none": + returnKeyFlag = EditorInfo.IME_ACTION_NONE; + break; + case "previous": + returnKeyFlag = EditorInfo.IME_ACTION_PREVIOUS; + break; + case "search": + returnKeyFlag = EditorInfo.IME_ACTION_SEARCH; + break; + case "send": + returnKeyFlag = EditorInfo.IME_ACTION_SEND; + break; + case "done": + returnKeyFlag = EditorInfo.IME_ACTION_DONE; + break; + } + } + + if (mDisableFullscreen) { + setImeOptions(returnKeyFlag | EditorInfo.IME_FLAG_NO_FULLSCREEN); + } else { + setImeOptions(returnKeyFlag); + } + } + @Override protected boolean verifyDrawable(Drawable drawable) { if (mContainsImages && getText() instanceof Spanned) { diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 50d20631b..9ccf3ab81 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -88,7 +88,7 @@ public class ReactTextInputManager extends BaseViewManager