Fix placeholder color

Author: brentvatne

README.md

@@ -2,4 +2,4 @@
 
 More documentation coming..
 
-[Try it on Snack](https://snack.expo.io/BkkFRMa_Z)
+[Try it on Snack](https://snack.expo.io/HJXlZ7TuW)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "main": "index.js",
   "license": "MIT"
 }

src/SearchBar.android.js

@@ -27,7 +27,7 @@ export default class SearchBar extends React.PureComponent {
             this._textInput = view;
           }}
           placeholder="Search"
-          placeholderStyle={styles.searchPlaceholderText}
+          placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
           value={this.state.text}
           autoCapitalize="none"
           autoCorrect={false}
@@ -57,9 +57,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
   },
-  searchPlaceholderText: {
-    color: '#fff',
-  },
   searchInput: {
     flex: 1,
     fontSize: 18,

src/SearchBar.ios.js

@@ -41,7 +41,7 @@ class PlaceholderButtonSearchBar extends React.PureComponent {
             <TextInput
               editable={false}
               placeholder="Search"
-              placeholderStyle={styles.searchInputPlaceholderText}
+              placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
               style={styles.searchInput}
             />
 
@@ -118,7 +118,7 @@ export default class SearchBar extends React.PureComponent {
             autoCorrect={false}
             returnKeyType="search"
             placeholder="Search"
-            placeholderStyle={styles.searchInputPlaceholderText}
+            placeholderTextColor={this.props.placeholderTextColor || '#ccc'}
             onSubmitEditing={this._handleSubmit}
             style={styles.searchInput}
           />
@@ -141,7 +141,11 @@ export default class SearchBar extends React.PureComponent {
             hitSlop={{ top: 15, bottom: 15, left: 15, right: 20 }}
             onLayout={this._handleLayoutCancelButton}
             onPress={this._handlePressCancelButton}>
-            <Text style={{ fontSize: 17, color: this.props.tintColor || '#007AFF' }}>
+            <Text
+              style={{
+                fontSize: 17,
+                color: this.props.tintColor || '#007AFF',
+              }}>
               Cancel
             </Text>
           </TouchableOpacity>
@@ -192,7 +196,7 @@ const styles = StyleSheet.create({
     height: 30,
     width: SearchContainerWidth,
     backgroundColor: '#f2f2f2',
-    borderRadius: 6,
+    borderRadius: 5,
     marginHorizontal: SearchContainerHorizontalMargin,
     marginTop: 10,
     paddingLeft: 27,
@@ -208,5 +212,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     paddingTop: 1,
   },
-  searchInputPlaceholderText: {},
 });

src/SearchLayout.js

@@ -39,6 +39,7 @@ export default class SearchLayout extends React.Component {
           <SearchBar
             onChangeQuery={this._handleChangeQuery}
             onSubmit={this._handleSubmit}
+            placeholderTextColor={this.props.searchInputPlaceholderTextColor}
             underlineColorAndroid={this.props.searchInputUnderlineColorAndroid}
             tintColor={
               this.props.searchInputTintColor || this.props.headerTintColor