v3.3.0

umhan35 · Jan 8, 2018 · ac655ad · ac655ad
2 parents a2620bb + 1e2052d
commit ac655ad
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 7 deletions.
diff --git a/example/App.js b/example/App.js
@@ -47,10 +47,8 @@ export default class App extends Component<{}, { search: string }> {
           <Text style={styles.header}>Dark Style</Text>
           <SearchBar
             ref={ref => (this.search1 = ref)}
-            showsCancelButton
             barStyle="black"
             onSearchButtonPress={() => this.search1.blur()}
-            onCancelButtonPress={() => this.setState({ search: '' })}
           />
 
           <Text style={styles.header}>Search Example</Text>
@@ -59,9 +57,7 @@ export default class App extends Component<{}, { search: string }> {
             ref={ref => (this.search2 = ref)}
             onChange={e => console.log(e.nativeEvent)}
             onChangeText={search => this.setState({ search })}
-            showsCancelButton
             onSearchButtonPress={() => this.search2.blur()}
-            onCancelButtonPress={() => this.setState({ search: '' })}
           />
 
           {items

diff --git a/ios/RNSearchBarManager.m b/ios/RNSearchBarManager.m
@@ -53,7 +53,6 @@ + (BOOL)requiresMainQueueSetup
 RCT_CUSTOM_VIEW_PROPERTY(showsCancelButton, BOOL, RNSearchBar)
 {
     BOOL value = [RCTConvert BOOL:json];
-    view._jsShowsCancelButton = value;
     view.showsCancelButton = value;
 }
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
@@ -179,4 +178,18 @@ - (NSDictionary *)constantsToExport
      }];
 }
 
+RCT_EXPORT_METHOD(toggleCancelButton:(nonnull NSNumber *)reactTag  flag:(BOOL *)flag)
+{
+  [self.bridge.uiManager addUIBlock:
+   ^(__unused RCTUIManager *uiManager, NSDictionary *viewRegistry){
+       RNSearchBar *searchBar = viewRegistry[reactTag];
+
+       if ([searchBar isKindOfClass:[RNSearchBar class]]) {
+           [searchBar setShowsCancelButton:flag ? YES : NO animated:YES];
+       } else {
+           RCTLogError(@"Cannot toggle: %@ (tag #%@) is not RNSearchBar", searchBar, reactTag);
+       }
+   }];
+}
+
 @end
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-search-bar",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "The native search bar for react native.",
   "keywords": ["search-bar", "react-component", "react-native", "ios"],
   "repository": {

diff --git a/src/SearchBar.js b/src/SearchBar.js
@@ -45,6 +45,7 @@ class SearchBar extends React.PureComponent {
     searchBarStyle: PropTypes.oneOf(['default', 'prominent', 'minimal']),
     editable: PropTypes.bool,
     returnKeyType: PropTypes.string,
+    showsCancelButtonWhileEditing: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -66,6 +67,7 @@ class SearchBar extends React.PureComponent {
     autoCapitalize: 'sentences',
     autoCorrect: false,
     spellCheck: false,
+    showsCancelButtonWhileEditing: true,
     onChange: () => null,
     onChangeText: () => null,
     onFocus: () => null,
@@ -83,6 +85,31 @@ class SearchBar extends React.PureComponent {
     this.props.onSearchButtonPress(e.nativeEvent.searchText)
   }
 
+  onFocus = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), true)
+    }
+
+    this.props.onFocus()
+  }
+
+  onCancelButtonPress = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
+    }
+
+    this.props.onChangeText('')
+    this.props.onCancelButtonPress()
+  }
+
+  onBlur = () => {
+    if (this.props.showsCancelButtonWhileEditing) {
+      NativeModules.RNSearchBarManager.toggleCancelButton(findNodeHandle(this), false)
+    }
+
+    this.props.onBlur()
+  }
+
   blur() {
     return NativeModules.RNSearchBarManager.blur(findNodeHandle(this))
   }
@@ -106,8 +133,10 @@ class SearchBar extends React.PureComponent {
         {...this.props}
         onChange={this.onChange}
         onPress={this.onPress}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         onSearchButtonPress={this.onSearchButtonPress}
-        onCancelButtonPress={this.props.onCancelButtonPress}
+        onCancelButtonPress={this.onCancelButtonPress}
       />
     )
   }

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -46,6 +46,13 @@ interface Props {
    */
   showsCancelButton?: boolean
 
+  /**
+   * Only shows the cancel button while the search bar has focus
+   * 
+   * Default is true
+   */
+  showsCancelButtonWhileEditing?: boolean
+
   /**
    * Indicates whether the Return key is automatically enabled when the user is entering text.
    *