From 8baaacb66458dd706421fcbc1fc1934cd1ebbb94 Mon Sep 17 00:00:00 2001
From: Mattijs Fuijkschot <mattijs@innovactory.com>
Date: Wed, 13 Jun 2018 22:44:29 -0700
Subject: [PATCH] - Keyboard layout now updates when changing keyboardType
 while it has focus (#19027)

Summary:
This PR makes sure that changing the `keyboardType` props of `<TextInput>` is reflected while the text field has focus. It is something that is also discusses in #13782. The workaround mentioned in that issue using `key` causes the TextInput to re-render itself which has some undesired side-effects.

Fixes #13782

```javascript
export default class KeyboardTypeApp extends Component {
  state = { keyboardType: 'default' };

  toggleKeyboardType = () => {
    this.setState({
      keyboardType: this.state.keyboardType === 'default' ? 'numeric' : 'default'
    });
  }

  render() {
    return (
      <View style={{ padding: 40 }}>
        <TextInput autoFocus value="Press Toggle :)" keyboardType={this.state.keyboardType} />
        <Button title="Toggle" onPress={this.toggleKeyboardType} />
      </View>
    );
  }
}
```

![video](https://user-images.githubusercontent.com/706368/39268429-3e331440-48d0-11e8-947c-7d334e3cec50.gif)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

 [IOS] [ENHANCEMENT] [TextInput] - Keyboard layout now updates when changing `keyboardType` while it has focus

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/19027

Differential Revision: D8416007

Pulled By: PeteTheHeat

fbshipit-source-id: c4f89ab3dc0819bca52feddbc9c7a9f62fd96794
---
 Libraries/Text/TextInput/RCTBaseTextInputView.h |  1 +
 Libraries/Text/TextInput/RCTBaseTextInputView.m | 17 +++++++++++++++++
 .../TextInput/RCTBaseTextInputViewManager.m     |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.h b/Libraries/Text/TextInput/RCTBaseTextInputView.h
index 6de343f2fa06d2..1ea3d8df46be97 100644
--- a/Libraries/Text/TextInput/RCTBaseTextInputView.h
+++ b/Libraries/Text/TextInput/RCTBaseTextInputView.h
@@ -47,6 +47,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, strong, nullable) NSNumber *maxLength;
 @property (nonatomic, copy) NSAttributedString *attributedText;
 @property (nonatomic, copy) NSString *inputAccessoryViewID;
+@property (nonatomic, assign) UIKeyboardType keyboardType;
 
 @end
 
diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.m b/Libraries/Text/TextInput/RCTBaseTextInputView.m
index cbfa24d1ab4f8d..9ba7df140a3e0d 100644
--- a/Libraries/Text/TextInput/RCTBaseTextInputView.m
+++ b/Libraries/Text/TextInput/RCTBaseTextInputView.m
@@ -178,6 +178,23 @@ - (void)setTextContentType:(NSString *)type
   #endif
 }
 
+- (UIKeyboardType)keyboardType
+{
+  return self.backedTextInputView.keyboardType;
+}
+
+- (void)setKeyboardType:(UIKeyboardType)keyboardType
+{
+  UIView<RCTBackedTextInputViewProtocol> *textInputView = self.backedTextInputView;
+  if (textInputView.keyboardType != keyboardType) {
+    textInputView.keyboardType = keyboardType;
+    // Without the call to reloadInputViews, the keyboard will not change until the textview field (the first responder) loses and regains focus.
+    if (textInputView.isFirstResponder) {
+      [textInputView reloadInputViews];
+    }
+  }
+}
+
 #pragma mark - RCTBackedTextInputDelegate
 
 - (BOOL)textInputShouldBeginEditing
diff --git a/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m b/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m
index 42266eacfb91a4..d5c49328042812 100644
--- a/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m
+++ b/Libraries/Text/TextInput/RCTBaseTextInputViewManager.m
@@ -40,7 +40,6 @@ @implementation RCTBaseTextInputViewManager
 RCT_REMAP_VIEW_PROPERTY(editable, backedTextInputView.editable, BOOL)
 RCT_REMAP_VIEW_PROPERTY(enablesReturnKeyAutomatically, backedTextInputView.enablesReturnKeyAutomatically, BOOL)
 RCT_REMAP_VIEW_PROPERTY(keyboardAppearance, backedTextInputView.keyboardAppearance, UIKeyboardAppearance)
-RCT_REMAP_VIEW_PROPERTY(keyboardType, backedTextInputView.keyboardType, UIKeyboardType)
 RCT_REMAP_VIEW_PROPERTY(placeholder, backedTextInputView.placeholder, NSString)
 RCT_REMAP_VIEW_PROPERTY(placeholderTextColor, backedTextInputView.placeholderColor, UIColor)
 RCT_REMAP_VIEW_PROPERTY(returnKeyType, backedTextInputView.returnKeyType, UIReturnKeyType)
@@ -51,6 +50,7 @@ @implementation RCTBaseTextInputViewManager
 RCT_REMAP_VIEW_PROPERTY(clearButtonMode, backedTextInputView.clearButtonMode, UITextFieldViewMode)
 RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
 RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(selection, RCTTextSelection)