Update defaults, add types, improve README, release new version

Author: brentvatne

README.md

@@ -1,7 +1,154 @@
 # react-navigation-addon-search-layout
 
-Note: this currently depends on the Expo environment being present. I
-may fix this in the future, a PR is welcome though. It also only
-explicitly supports portrait mode, ymmv with landscape.
+A plain but perfectly acceptable search layout screen that looks good on
+iOS and Android.
 
-[Try it on Snack](https://snack.expo.io/HJXlZ7TuW)
+## Installation
+
+```
+npm install react-navigation-addon-search-layout
+```
+
+This requires that you have `react-native-vector-icons` installed in
+your project, it uses the `Ionicons` font family. If you use the Expo
+managed workflow, it will work out of the box as that comes preinstalled
+and is available through `@expo/vector-icons`'.
+
+## Usage
+
+Here's an example of how you can use this:
+
+```js
+import * as React from 'react';
+import {
+  Animated,
+  Button,
+  Platform,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+import {
+  createAppContainer,
+  createStackNavigator,
+  StackViewTransitionConfigs,
+} from 'react-navigation';
+import { RectButton, BorderlessButton } from 'react-native-gesture-handler';
+import SearchLayout from 'react-navigation-addon-search-layout';
+import { Ionicons } from '@expo/vector-icons';
+
+class HomeScreen extends React.Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: 'Home',
+    headerRight: (
+      <BorderlessButton
+        onPress={() => navigation.navigate('Search')}
+        style={{ marginRight: 15 }}>
+        <Ionicons
+          name="md-search"
+          size={Platform.OS === 'ios' ? 22 : 25}
+          color={SearchLayout.DefaultTintColor}
+        />
+      </BorderlessButton>
+    ),
+  });
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Hello there!</Text>
+      </View>
+    );
+  }
+}
+
+class ResultScreen extends React.Component {
+  static navigationOptions = {
+    title: 'Result',
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>{this.props.navigation.getParam('text')} result!</Text>
+      </View>
+    );
+  }
+}
+
+class SearchScreen extends React.Component {
+  static navigationOptions = {
+    header: null,
+  };
+
+  state = {
+    searchText: null,
+  };
+
+  _handleQueryChange = searchText => {
+    this.setState({ searchText });
+  };
+
+  _executeSearch = () => {
+    alert('do search!');
+  };
+
+  render() {
+    let { searchText } = this.state;
+
+    return (
+      <SearchLayout
+        onChangeQuery={this._handleQueryChange}
+        onSubmit={this._executeSearch}>
+        {searchText ? (
+          <RectButton
+            style={{
+              borderBottomWidth: StyleSheet.hairlineWidth,
+              borderBottomColor: '#eee',
+              paddingVertical: 20,
+              paddingHorizontal: 15,
+            }}
+            onPress={() =>
+              this.props.navigation.navigate('Result', {
+                text: this.state.searchText,
+              })
+            }>
+            <Text style={{ fontSize: 14 }}>{searchText}!</Text>
+          </RectButton>
+        ) : null}
+      </SearchLayout>
+    );
+  }
+}
+
+let SearchStack = createStackNavigator(
+  {
+    Home: HomeScreen,
+    Search: SearchScreen,
+  },
+  {
+    transitionConfig: () => StackViewTransitionConfigs.NoAnimation,
+    navigationOptions: {
+      header: null,
+    },
+    defaultNavigationOptions: {
+      gesturesEnabled: false,
+    },
+  }
+);
+
+let MainStack = createStackNavigator({
+  Feed: SearchStack,
+  Result: ResultScreen,
+});
+
+export default createAppContainer(MainStack);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+```

index.js

@@ -1,2 +1 @@
-import SearchLayout from './src/SearchLayout';
-export default SearchLayout;
+export SearchLayout from './src/SearchLayout';

package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-navigation-addon-search-layout",
-  "version": "0.11.0",
+  "version": "0.12.2",
   "main": "index.js",
   "license": "MIT",
+  "types": "react-navigation-search-layout.d.ts",
   "dependencies": {
     "react-native-platform-touchable": "^1.1.1"
   }

react-navigation-addon-search-layout.d.ts

@@ -0,0 +1,34 @@
+declare module 'react-navigation-addon-search-layout' {
+  import * as React from 'react';
+
+  interface SearchLayoutProps {
+    /** Callback that fires when the text in the search input is changed **/
+    onChangeQuery: (query: string) => void;
+
+    /** Callback that fires when the user submits the input by pressing return **/
+    onSubmit?: (query: string) => void;
+
+    /** Background color of the header that contains the search bar **/
+    headerBackgroundColor?: string;
+
+    /** Tint color of the header that contains the search bar. Used to color the back buttoni on Android, the cancel button on iOS, and the color of and ripple around the clear button on Android **/
+    headerTintColor?: string;
+
+    /** Color of the placeholder text that is visible when the user has not entered any input into the search box **/
+    placeholderTextColor?: string;
+
+    /** Color of text that the user enters into the search box **/
+    textColor?: string;
+
+    /** Underline color of the text input on Android **/
+    searchInputUnderlineColorAndroid?: string;
+
+    /** Override headerTintColor for the cancel button / clear button **/
+    searchInputTintColor?: string;
+
+    /** Alternative to using children to render the results **/
+    renderResults?: () => React.ReactElement | null;
+  }
+
+  export default class SearchLayout extends React.Component<SearchLayoutProps> {}
+}

src/Header.js

@@ -58,7 +58,7 @@ let platformContainerStyles;
 if (Platform.OS === 'ios') {
   platformContainerStyles = {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: 'rgba(0, 0, 0, .3)',
+    borderBottomColor: '#A7A7AA',
   };
 } else {
   platformContainerStyles = {

src/SearchBar.ios.js

@@ -150,7 +150,7 @@ export default class SearchBar extends React.PureComponent {
                 fontSize: 17,
                 color: this.props.tintColor || '#007AFF',
               }}>
-              {this.props.cancelButtonText || 'Cancel'}}
+              {this.props.cancelButtonText || 'Cancel'}
             </Text>
           </TouchableOpacity>
         </View>

src/SearchLayout.js

@@ -3,14 +3,17 @@ import { Platform, StyleSheet, Text, View } from 'react-native';
 import SearchBar from './SearchBar';
 import Header from './Header';
 
+const DEFAULT_TINT_COLOR = Platform.OS === 'ios' ? '#007AFF' : '#000';
+
 export default class SearchLayout extends React.Component {
   static SearchBar = SearchBar;
   static Header = Header;
+  static DefaultTintColor = DEFAULT_TINT_COLOR;
 
   static defaultProps = {
     debounce: 500,
-    headerBackgroundColor: Platform.OS === 'ios' ? '#f7f7f7' : '#fff',
-    headerTintColor: '#000',
+    headerBackgroundColor: '#fff',
+    headerTintColor: DEFAULT_TINT_COLOR,
   };
 
   state = {