Fix iOS SearchBar width (#1218)

Width is no longer bound to the width of the device.
react-native-elements · May 23, 2018 · 925f96e · 925f96e
1 parent f8af41c
commit 925f96e
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 121 deletions.
diff --git a/src/searchbar/SearchBar-ios.js b/src/searchbar/SearchBar-ios.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
   Button,
-  Dimensions,
   LayoutAnimation,
   UIManager,
   StyleSheet,
@@ -16,7 +15,6 @@ import Input from '../input/Input';
 import Icon from '../icons/Icon';
 import { renderNode, nodeType } from '../helpers';
 
-const SCREEN_WIDTH = Dimensions.get('window').width;
 const IOS_GRAY = '#7d7d7d';
 const defaultSearchIcon = {
   type: 'ionicon',
@@ -32,6 +30,16 @@ const defaultClearIcon = {
 };
 
 class SearchBar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasFocus: false,
+      isEmpty: true,
+      cancelButtonWidth: 0,
+      cancelButtonTransform: 0,
+    };
+  }
+
   focus = () => {
     this.input.focus();
   };
@@ -54,28 +62,26 @@ class SearchBar extends Component {
   onFocus = () => {
     this.props.onFocus();
     UIManager.configureNextLayoutAnimation && LayoutAnimation.easeInEaseOut();
-    this.setState({ hasFocus: true });
+    this.setState({
+      hasFocus: true,
+      cancelButtonTransform: -this.state.cancelButtonWidth,
+    });
   };
 
   onBlur = () => {
     this.props.onBlur();
     UIManager.configureNextLayoutAnimation && LayoutAnimation.easeInEaseOut();
-    this.setState({ hasFocus: false });
+    this.setState({
+      hasFocus: false,
+      cancelButtonTransform: 0,
+    });
   };
 
   onChangeText = text => {
     this.props.onChangeText(text);
     this.setState({ isEmpty: text === '' });
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-      isEmpty: true,
-    };
-  }
-
   render() {
     const {
       cancelButtonProps,
@@ -104,12 +110,11 @@ class SearchBar extends Component {
           ref={input => (this.input = input)}
           inputStyle={[styles.input, inputStyle]}
           containerStyle={{
-            flex: !hasFocus ? 0 : 1,
-            width: null,
+            width: '100%',
           }}
           inputContainerStyle={[
             styles.inputContainer,
-            !hasFocus && { width: SCREEN_WIDTH - 32, marginRight: 15 },
+            hasFocus && { marginRight: this.state.cancelButtonWidth },
             inputContainerStyle,
           ]}
           leftIcon={renderNode(Icon, searchIcon, defaultSearchIcon)}
@@ -138,11 +143,19 @@ class SearchBar extends Component {
             rightIconContainerStyle,
           ]}
         />
-        <Button
-          title={cancelButtonTitle}
-          onPress={this.cancel}
-          {...cancelButtonProps}
-        />
+
+        <View
+          style={{ marginLeft: this.state.cancelButtonTransform }}
+          onLayout={event =>
+            this.setState({ cancelButtonWidth: event.nativeEvent.layout.width })
+          }
+        >
+          <Button
+            title={cancelButtonTitle}
+            onPress={this.cancel}
+            {...cancelButtonProps}
+          />
+        </View>
       </View>
     );
   }
@@ -184,11 +197,12 @@ SearchBar.defaultProps = {
 
 const styles = StyleSheet.create({
   container: {
-    width: SCREEN_WIDTH,
+    width: '100%',
     backgroundColor: '#f5f5f5',
     paddingBottom: 13,
     paddingTop: 13,
     flexDirection: 'row',
+    overflow: 'hidden',
   },
   input: {
     marginLeft: 6,
@@ -199,6 +213,7 @@ const styles = StyleSheet.create({
     borderRadius: 9,
     height: 36,
     marginLeft: 15,
+    marginRight: 15,
   },
   rightIconContainerStyle: {
     marginRight: 8,