Add keyboardAppearance prop to TextInput component.

Summary: Resolves #3649.
Closes https://github.com/facebook/react-native/pull/4012

Reviewed By: javache

Differential Revision: D2636538

Pulled By: nicklockwood

fb-gh-sync-id: 022e79d8f8fa684cad43af1a51f728d60ac652a8

Examples/UIExplorer/TextInputExample.ios.js

@@ -386,6 +386,27 @@ exports.examples = [
       return <View>{examples}</View>;
     }
   },
+  {
+    title: 'Keyboard appearance',
+    render: function() {
+      var keyboardAppearance = [
+        'default',
+        'light',
+        'dark',
+      ];
+      var examples = keyboardAppearance.map((type) => {
+        return (
+          <WithLabel key={type} label={type}>
+            <TextInput
+              keyboardAppearance={type}
+              style={styles.default}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
+    }
+  },
   {
     title: 'Return key types',
     render: function() {

Libraries/Components/TextInput/TextInput.js

@@ -161,6 +161,15 @@ var TextInput = React.createClass({
       'twitter',
       'web-search',
     ]),
+    /**
+     * Determines the color of the keyboard.
+     * @platform ios
+     */
+    keyboardAppearance: PropTypes.oneOf([
+      'default',
+      'light',
+      'dark',
+    ]),
     /**
      * Determines how the return key should look.
      * @platform ios

Libraries/Text/RCTTextFieldManager.m

@@ -86,6 +86,7 @@ RCT_REMAP_VIEW_PROPERTY(clearTextOnFocus, clearsOnBeginEditing, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(blurOnSubmit, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(keyboardType, UIKeyboardType)
+RCT_EXPORT_VIEW_PROPERTY(keyboardAppearance, UIKeyboardAppearance)
 RCT_EXPORT_VIEW_PROPERTY(returnKeyType, UIReturnKeyType)
 RCT_EXPORT_VIEW_PROPERTY(enablesReturnKeyAutomatically, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(secureTextEntry, BOOL)

Libraries/Text/RCTTextViewManager.m

@@ -33,6 +33,7 @@ RCT_EXPORT_VIEW_PROPERTY(maxLength, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(clearTextOnFocus, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(selectTextOnFocus, BOOL)
 RCT_REMAP_VIEW_PROPERTY(keyboardType, textView.keyboardType, UIKeyboardType)
+RCT_REMAP_VIEW_PROPERTY(keyboardAppearance, textView.keyboardAppearance, UIKeyboardAppearance)
 RCT_REMAP_VIEW_PROPERTY(returnKeyType, textView.returnKeyType, UIReturnKeyType)
 RCT_REMAP_VIEW_PROPERTY(enablesReturnKeyAutomatically, textView.enablesReturnKeyAutomatically, BOOL)
 RCT_REMAP_VIEW_PROPERTY(color, textColor, UIColor)

React/Base/RCTConvert.h

@@ -63,6 +63,7 @@ typedef NSURL RCTFileURL;
 + (UITextAutocapitalizationType)UITextAutocapitalizationType:(id)json;
 + (UITextFieldViewMode)UITextFieldViewMode:(id)json;
 + (UIKeyboardType)UIKeyboardType:(id)json;
++ (UIKeyboardAppearance)UIKeyboardAppearance:(id)json;
 + (UIReturnKeyType)UIReturnKeyType:(id)json;
 
 + (UIViewContentMode)UIViewContentMode:(id)json;

React/Base/RCTConvert.m

@@ -272,6 +272,12 @@ RCT_ENUM_CONVERTER(UIKeyboardType, (@{
   @"numeric": @(UIKeyboardTypeDecimalPad),
 }), UIKeyboardTypeDefault, integerValue)
 
+RCT_ENUM_CONVERTER(UIKeyboardAppearance, (@{
+  @"default": @(UIKeyboardAppearanceDefault),
+  @"light": @(UIKeyboardAppearanceLight),
+  @"dark": @(UIKeyboardAppearanceDark),
+}), UIKeyboardAppearanceDefault, integerValue)
+
 RCT_ENUM_CONVERTER(UIReturnKeyType, (@{
   @"default": @(UIReturnKeyDefault),
   @"go": @(UIReturnKeyGo),