fix: fix searchbar styles (callstack#110)

Author: satya164

example/src/ExampleList.js

@@ -13,7 +13,7 @@ import PaperExample from './PaperExample';
 import RippleExample from './RippleExample';
 import RadioButtonExample from './RadioButtonExample';
 import TextExample from './TextExample';
-import SearchExample from './SearchExample';
+import SearchBarExample from './SearchBarExample';
 
 export const examples = {
   button: ButtonExample,
@@ -25,7 +25,7 @@ export const examples = {
   ripple: RippleExample,
   radio: RadioButtonExample,
   text: TextExample,
-  search: SearchExample,
+  searchbar: SearchBarExample,
 };
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

example/src/SearchExample.js renamed to example/src/SearchBarExample.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { SearchBar } from 'react-native-paper';
 
 export default class SearchExample extends Component {
-  static title = 'Search';
+  static title = 'Searchbar';
 
   state = {
     query: '',

src/components/SearchBar.js

@@ -4,18 +4,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, TextInput } from 'react-native';
 import color from 'color';
-
 import withTheme from '../core/withTheme';
 import Icon from './Icon';
 import TouchableRipple from './TouchableRipple';
 import Paper from './Paper';
+import { white } from '../styles/colors';
 import type { Theme } from '../types/Theme';
 
 type Props = {
   placeholder?: string,
   value: string,
   onChangeText: (query: string) => void,
   theme: Theme,
+  style?: any,
 };
 
 /**
@@ -36,38 +37,49 @@ class SearchBar extends Component<void, Props, void> {
      */
     onChangeText: PropTypes.func.isRequired,
     theme: PropTypes.object.isRequired,
+    style: Paper.propTypes.style,
   };
 
   _handleClearPress = () => {
     this.props.onChangeText('');
   };
 
   render() {
-    const { placeholder, value, theme } = this.props;
+    const { placeholder, value, theme, style, ...rest } = this.props;
+    const { colors, roundness } = theme;
+    const textColor = colors.text;
+    const iconColor = color(textColor).alpha(0.54).rgbaString();
+    const rippleColor = color(textColor).alpha(0.32).rgbaString();
 
     return (
-      <Paper elevation={4} style={styles.container}>
+      <Paper
+        elevation={4}
+        style={[{ borderRadius: roundness }, styles.container, style]}
+      >
         <Icon
-          style={[styles.iconWrapper, styles.icon]}
+          style={[styles.icon, { color: iconColor }]}
           name="search"
           size={24}
         />
         <TextInput
-          style={styles.input}
+          style={[styles.input, { color: textColor }]}
           placeholder={placeholder || ''}
-          value={value}
-          placeholderTextColor={theme.colors.placeholder}
+          placeholderTextColor={colors.placeholder}
           underlineColorAndroid="transparent"
-          onChangeText={this.props.onChangeText}
           returnKeyType="search"
+          {...rest}
         />
         {value
           ? <TouchableRipple
               borderless
+              rippleColor={rippleColor}
               onPress={this._handleClearPress}
-              style={styles.iconWrapper}
             >
-              <Icon style={styles.icon} name="close" size={24} />
+              <Icon
+                style={[styles.icon, { color: iconColor }]}
+                name="close"
+                size={24}
+              />
             </TouchableRipple>
           : null}
       </Paper>
@@ -78,19 +90,16 @@ class SearchBar extends Component<void, Props, void> {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    justifyContent: 'center',
     alignItems: 'center',
-    margin: 8,
+    backgroundColor: white,
+    margin: 4,
   },
   input: {
     flex: 1,
     fontSize: 18,
   },
-  iconWrapper: {
-    padding: 16,
-  },
   icon: {
-    color: color('black').alpha(0.54).rgbaString(),
+    margin: 12,
   },
 });