react-native-search-box - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

index.js

@@ -6,2 +6,3 @@ import React, { PureComponent } from 'react';
   TouchableWithoutFeedback,
+  TouchableOpacity,
   TextInput,
@@ -25,3 +26,3 @@ Animated,
       keyword: '',
-      expanded: false
+      expanded: false,
     };
@@ -31,2 +32,3 @@ const { width } = Dimensions.get('window');
     this.middleWidth = width / 2;
+    this.cancelButtonWidth = this.props.cancelButtonWidth || 70;
 
@@ -64,2 +66,3 @@ /**
     this.cancelTitle = this.props.cancelTitle || 'Cancel';
+    this.autoFocus =  this.props.autoFocus || false;
 
@@ -75,2 +78,10 @@ /**
 
+  componentDidMount() {
+    if(this.autoFocus) {
+      this.setState({expanded: true})
+      this.refs.input_keyword._component.focus();
+
+    }
+  }
+
   onLayout = event => {
@@ -179,3 +190,3 @@ const contentWidth = event.nativeEvent.layout.width;
         Animated.timing(this.inputFocusWidthAnimated, {
-          toValue: this.contentWidth - 70,
+          toValue: this.contentWidth - this.cancelButtonWidth,
           duration: 200
@@ -285,2 +296,3 @@ }).start(),
           ]}
+          onEndEditing={this.onCancel}
           editable={this.props.editable}
@@ -293,2 +305,3 @@ value={this.state.keyword}
           }
+          selectionColor={this.props.selectionColor}
           onSubmitEditing={this.onSearch}
@@ -324,3 +337,3 @@ autoCorrect={false}
         </TouchableWithoutFeedback>
-        <TouchableWithoutFeedback onPress={this.onDelete}>
+        {this.props.useClearButton && <TouchableWithoutFeedback onPress={this.onDelete}>
           {this.props.iconDelete
@@ -352,4 +365,5 @@ ? <Animated.View
               />}
-        </TouchableWithoutFeedback>
-        <TouchableWithoutFeedback onPress={this.onCancel}>
+        </TouchableWithoutFeedback>}
+
+        <TouchableOpacity onPress={this.onCancel}>
           <Animated.View
@@ -376,3 +390,3 @@ style={[
           </Animated.View>
-        </TouchableWithoutFeedback>
+        </TouchableOpacity>
       </Animated.View>
@@ -435,2 +449,3 @@ );
 };
+                     
 /**
@@ -516,2 +531,3 @@ * Props
   keyboardShouldPersist: PropTypes.bool,
+  useClearButton: PropTypes.bool,
 
@@ -542,3 +558,3 @@ /**
   editable: true,
-  blurOnSubmit: false,
+  blurOnSubmit: true,
   keyboardShouldPersist: false,
@@ -556,5 +572,7 @@ searchIconCollapsedMargin: 25,
   shadowRadius: 4,
-  shadowVisible: false
+  shadowVisible: false,
+  useClearButton: true,
 };
 
 export default Search;
+

package.json

 {
   "name": "react-native-search-box",
-  "version": "0.0.11",
-  "description": "A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/Android devices",
+  "version": "0.0.12",
+  "description":
+    "A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/Android devices",
   "main": "index.js",
@@ -13,3 +14,4 @@ "scripts": {
   },
-  "author": "Anh Tuan Nguyen <[e-mail]> (https://github.com/anhtuank7c)",
+  "author":
+    "Anh Tuan Nguyen <[e-mail]> (https://github.com/anhtuank7c)",
   "license": "MIT",
@@ -16,0 +18,0 @@ "keywords": ["react-native", "ios", "android", "anhtuank7c", "agiletechvn"],

README.md

@@ -140,2 +140,3 @@ ## React Native Search Box
      * return a Promise
+     * NOTE: As of RN V0.48.3 the blurOnSubmit property must be set to {true} for this to trigger
      */
@@ -177,2 +178,3 @@ beforeSearch: PropTypes.func,
     tintColorDelete: PropTypes.string,
+    cancelButtonWidth: PropTypes.number,
     cancelButtonStyle: PropTypes.PropTypes.oneOfType([
@@ -179,0 +181,0 @@ PropTypes.number,

No alert changes

Improved metrics

Total package byte prevSize

24619

increased by2.49%

Lines of code

530

increased by2.51%

Number of lines in readme file

254

increased by0.79%

Worsened metrics

Number of package files

5

decreased by-16.67%

No dependency changes