Remove dependency on expo

Author: brentvatne

src/Header.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { Animated, Dimensions, Platform, StyleSheet, View } from 'react-native';
+import { Animated, Dimensions, Platform, StatusBar, StyleSheet, View } from 'react-native';
 import { withNavigation, HeaderBackButton } from 'react-navigation';
-import { Constants } from 'expo';
 
 const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
-const STATUSBAR_HEIGHT = Constants.statusBarHeight;
 const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
+// @todo: this is static and we don't know if it's visible or not on iOS.
+// need to use a more reliable and cross-platform API when one exists, like
+// LayoutContext.
+const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 25 : StatusBar.currentHeight;
+
 @withNavigation
 export default class Header extends React.PureComponent {
   static HEIGHT = APPBAR_HEIGHT + STATUSBAR_HEIGHT;

src/SearchBar.android.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { NativeModules, StyleSheet, TextInput, View } from 'react-native';
 import { withNavigation } from 'react-navigation';
 import Touchable from 'react-native-platform-touchable';
-
-import { Icon } from 'expo';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
 @withNavigation
 export default class SearchBar extends React.PureComponent {
@@ -48,7 +47,7 @@ export default class SearchBar extends React.PureComponent {
                 hitSlop={{top: 15, left: 10, right: 15, bottom: 15}}
                 style={{ padding: 5 }}
                 background={Touchable.Ripple(this.props.tintColor, true)}>
-                <Icon.Ionicons
+                <Ionicons
                   name="md-close"
                   size={25}
                   color={this.props.tintColor}

src/SearchBar.ios.js

@@ -11,9 +11,7 @@ import {
   View,
 } from 'react-native';
 import { withNavigation } from 'react-navigation';
-
-// TODO: remove dependency on Expo
-import { Icon } from 'expo';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
 const Layout = {
   window: {
@@ -24,10 +22,11 @@ const SearchContainerHorizontalMargin = 10;
 const SearchContainerWidth =
   Layout.window.width - SearchContainerHorizontalMargin * 2;
 
-const SearchIcon = () =>
+const SearchIcon = () => (
   <View style={styles.searchIconContainer}>
-    <Icon.Ionicons name="ios-search" size={18} color="#ccc" />
-  </View>;
+    <Ionicons name="ios-search" size={18} color="#ccc" />
+  </View>
+);
 
 @withNavigation
 class PlaceholderButtonSearchBar extends React.PureComponent {
@@ -151,7 +150,7 @@ export default class SearchBar extends React.PureComponent {
                 fontSize: 17,
                 color: this.props.tintColor || '#007AFF',
               }}>
-              Cancel
+              {this.props.cancelButtonText || 'Cancel'}}
             </Text>
           </TouchableOpacity>
         </View>

src/SearchLayout.js

@@ -1,9 +1,5 @@
 import React from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-
-// TODO: remove dependency on expo
-import { Constants } from 'expo';
-
 import SearchBar from './SearchBar';
 import Header from './Header';