Repository: callstack/react-native-paper (ts)

Issue:
Searchbar crashes on Android when wrapped in Appbar
<!-- Issues that don't use this template are likely to be closed. -->
<!-- Please search the existing issues and read the documentation before opening an issue. -->

### Current behaviour

<!-- What's currently happening? -->
`Searchbar` component crashes on Android with 
`Error while updating property 'color' in shadow node of type: AndroidTextInput` 
when it's wrapped in `Appbar` or `Appbar.Header`.  I guess this happens because `Appbar` changes the theme based on the `dark` property. This works fine on iOS.

### Expected behaviour

Should not crash.

### Code sample
```js
class SearchContainer extends React.Component {
    render() {
        return (
            <Appbar.Header>
                <Searchbar
                    value=""
                />
            </Appbar.Header>
        )
    }
}
```

It seems to happen because of [this](https://github.com/callstack/react-native-paper/blob/master/src/components/Appbar/Appbar.js#L136) and [this](https://github.com/callstack/react-native-paper/blob/master/src/components/Searchbar.js#L165). `...rest` contains `color` prop, which crashes the `TextInput`.
<!-- Provide a complete code sample that could be run to reproduce the issue, ideally on snack.expo.io or in a github repo. -->

### Your Environment

| software              | version
| --------------------- | -------
| ios or android        | android 28
| react-native          | 0.57.1
| react-native-paper    | 2.1.3
| node                  | 10.11.0
| npm or yarn           | 1.10.1


Pull request:
fix(appbar): does not pass any additional props to Searchbar component
Fix #605

Patch:
diff --git a/src/components/Appbar/Appbar.js b/src/components/Appbar/Appbar.js
index f9e7a7ada..539c1fcf3 100644
--- a/src/components/Appbar/Appbar.js
+++ b/src/components/Appbar/Appbar.js
@@ -133,7 +133,15 @@ class Appbar extends React.Component<Props> {
         {React.Children.toArray(children)
           .filter(child => child != null && typeof child !== 'boolean')
           .map((child, i) => {
-            if (!React.isValidElement(child)) {
+            if (
+              !React.isValidElement(child) ||
+              ![
+                'AppbarContent',
+                'AppbarAction',
+                'AppbarBackAction',
+                'AppbarHeader',
+              ].includes(child.type.name)
+            ) {
               return child;
             }
 


Test patch:
diff --git a/src/components/__tests__/Appbar/Appbar.test.js b/src/components/__tests__/Appbar/Appbar.test.js
new file mode 100644
index 000000000..6dfcf5da5
--- /dev/null
+++ b/src/components/__tests__/Appbar/Appbar.test.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Appbar from '../../Appbar/Appbar';
+import Searchbar from '../../Searchbar';
+
+describe('Appbar', () => {
+  it('does not pass any additional props to Searchbar', () => {
+    const tree = renderer
+      .create(
+        <Appbar>
+          <Searchbar placeholder="Search" />
+        </Appbar>
+      )
+      .toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
new file mode 100644
index 000000000..60343d331
--- /dev/null
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -0,0 +1,234 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Appbar does not pass any additional props to Searchbar 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#6200ee",
+      "elevation": 4,
+      "flexDirection": "row",
+      "height": 56,
+      "paddingHorizontal": 4,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 3,
+        "width": 0,
+      },
+      "shadowOpacity": 0.24,
+      "shadowRadius": 4,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "elevation": 4,
+        "flexDirection": "row",
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.24,
+        "shadowRadius": 4,
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      isTVSelectable={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 18,
+              "height": 36,
+              "justifyContent": "center",
+              "margin": 6,
+              "overflow": "visible",
+              "width": 36,
+            },
+            undefined,
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        style={null}
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "rgba(0, 0, 0, 0.54)",
+                "fontSize": 24,
+              },
+              Array [
+                Object {
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+    <TextInput
+      accessibilityRole="search"
+      accessibilityTraits="search"
+      allowFontScaling={true}
+      keyboardAppearance="light"
+      placeholder="Search"
+      placeholderTextColor="rgba(0, 0, 0, 0.54)"
+      returnKeyType="search"
+      selectionColor="#6200ee"
+      style={
+        Array [
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "fontSize": 18,
+            "minWidth": 0,
+            "paddingLeft": 8,
+            "textAlign": "left",
+          },
+          Object {
+            "color": "#000000",
+            "fontFamily": "Helvetica Neue",
+          },
+          undefined,
+        ]
+      }
+      underlineColorAndroid="transparent"
+    />
+    <View
+      accessibilityRole="button"
+      accessibilityStates={
+        Array [
+          "disabled",
+        ]
+      }
+      accessible={true}
+      hitSlop={
+        Object {
+          "bottom": 6,
+          "left": 6,
+          "right": 6,
+          "top": 6,
+        }
+      }
+      isTVSelectable={true}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "overflow": "hidden",
+          },
+          Array [
+            Object {
+              "alignItems": "center",
+              "borderRadius": 18,
+              "height": 36,
+              "justifyContent": "center",
+              "margin": 6,
+              "overflow": "visible",
+              "width": 36,
+            },
+            Object {
+              "opacity": 0.32,
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        style={null}
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no-hide-descendants"
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "color": "rgba(255, 255, 255, 0)",
+                "fontSize": 24,
+              },
+              Array [
+                Object {
+                  "transform": Array [
+                    Object {
+                      "scaleX": 1,
+                    },
+                  ],
+                },
+                Object {
+                  "backgroundColor": "transparent",
+                },
+              ],
+              Object {
+                "fontFamily": "Material Icons",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;