Initial commit

Author: brentvatne

README.md

@@ -0,0 +1,5 @@
+# react-navigation-addon-search-layout
+
+More documentation coming..
+
+[Try it on Snack](https://snack.expo.io/BkkFRMa_Z)

index.js

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

package.json

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

src/Header.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Animated, Platform, StyleSheet, View } from 'react-native';
+import { withNavigation, HeaderBackButton } from 'react-navigation';
+
+const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : 0;
+const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
+
+@withNavigation
+export default class Header extends React.PureComponent {
+  static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;
+
+  _navigateBack = () => {
+    this.props.navigation.goBack(null);
+  };
+
+  _maybeRenderBackButton = () => {
+    if (!this.props.backButton) {
+      return;
+    }
+
+    return (
+      <HeaderBackButton
+        onPress={this._navigateBack}
+        pressColorAndroid={this.props.tintColor || '#fff'}
+        tintColor={this.props.tintColor}
+        title={this.props.backButtonTitle || null}
+        truncatedTitle={this.props.backButtonTruncatedTitle || null}
+        titleStyle={this.props.backButtonTitleStyle || null}
+      />
+    );
+  };
+
+  render() {
+    let headerStyle = {};
+    if (this.props.backgroundColor) {
+      headerStyle.backgroundColor = this.props.backgroundColor;
+    }
+
+    return (
+      <Animated.View style={[styles.container, headerStyle]}>
+        <View style={styles.appBar}>
+          <View style={[StyleSheet.absoluteFill, styles.header]}>
+            {this._maybeRenderBackButton()}
+            {this.props.children}
+          </View>
+        </View>
+      </Animated.View>
+    );
+  }
+}
+
+let platformContainerStyles;
+if (Platform.OS === 'ios') {
+  platformContainerStyles = {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: 'rgba(0, 0, 0, .3)',
+  };
+} else {
+  platformContainerStyles = {
+    shadowColor: 'black',
+    shadowOpacity: 0.1,
+    shadowRadius: StyleSheet.hairlineWidth,
+    shadowOffset: {
+      height: StyleSheet.hairlineWidth,
+    },
+    elevation: 4,
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: STATUSBAR_HEIGHT,
+    backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
+    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
+    ...platformContainerStyles,
+  },
+  appBar: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+  },
+  item: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  title: {
+    bottom: 0,
+    left: TITLE_OFFSET,
+    right: TITLE_OFFSET,
+    top: 0,
+    position: 'absolute',
+    alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start',
+  },
+  left: {
+    left: 0,
+    bottom: 0,
+    top: 0,
+    position: 'absolute',
+  },
+  right: {
+    right: 0,
+    bottom: 0,
+    top: 0,
+    position: 'absolute',
+  },
+});

src/SearchBar.android.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { NativeModules, StyleSheet, TextInput, View } from 'react-native';
+import { withNavigation } from 'react-navigation';
+
+@withNavigation
+export default class SearchBar extends React.PureComponent {
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      this._textInput.focus();
+    });
+  }
+
+  state = {
+    text: '',
+  };
+
+  render() {
+    let searchInputStyle = {};
+    if (this.props.tintColor) {
+      searchInputStyle.color = this.props.tintColor;
+    }
+
+    return (
+      <View style={styles.container}>
+        <TextInput
+          ref={view => {
+            this._textInput = view;
+          }}
+          placeholder="Search"
+          placeholderStyle={styles.searchPlaceholderText}
+          value={this.state.text}
+          autoCapitalize="none"
+          autoCorrect={false}
+          underlineColorAndroid={this.props.underlineColorAndroid || '#ccc'}
+          onSubmitEditing={this._handleSubmit}
+          onChangeText={this._handleChangeText}
+          style={[styles.searchInput, searchInputStyle]}
+        />
+      </View>
+    );
+  }
+
+  _handleChangeText = text => {
+    this.setState({ text });
+    this.props.onChangeQuery && this.props.onChangeQuery(text);
+  };
+
+  _handleSubmit = () => {
+    let { text } = this.state;
+    this.props.onSubmit && this.props.onSubmit(text);
+    this._textInput.blur();
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  searchPlaceholderText: {
+    color: '#fff',
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 18,
+    marginBottom: 2,
+    paddingLeft: 5,
+    marginRight: 5,
+  },
+});