Why should i return a 'Promise'? So

Here's my code:
`import Search from "react-native-search-box";

export default class App extends Component {
onSearch = () => {
alert("!");
}

onCancel = () => {
    alert("????");
}

render() {
    return (
        <View style={styles.container}>
            {/* Hide status bar */}
            <StatusBar hidden={true} />

            {/* Header */}
            <View style={styles.headerContainer}>
                <Text style={styles.text}>
                    NeuralNews
                </Text>
            </View>

            {/* Search field */}
            <View style={styles.searchBar}>
                <Search
                    ref={"search_box"}
                    onSearch={this.onSearch}
                    onCancel={this.onCancel}
                 />
            </View>
        </View>
    );
}

}`

For some reason, the onSearch method isn't firing even though the onCancel one is. What exactly causes the onSearch to fire? I am testing on a simulator, and pressing the 'Search' button on the iPhone keyboard isn't seeming to work.

I'd like to remove the cancel button completely and just have the animation of search moving from middle to left. Without a cancel button or animation. Is this potentially possible in the near future?

I am using this search box to load the contacts list page but there are a few nested API calls retrieving data based on what the user has typed.

In my experience the results being loaded onChangeText as opposed to them being loaded on onAfterSearch and pressing the enter key is more seamless and smooth

How can I trigger the click event on the enter key manually from the code to load the view?

I'm using react-navigation.
I want to add search bar on stack navigator.
but I'm not able to change left margin and width of search bar.
I want it after profile page.
how can I do it ?

navigationOptions: {
      headerTitleStyle: { color: '#fff' },
      header: props => <ImageHeader {...props} />,
      headerTitle: <Search backgroundColor='transparent' left='40'/>,
      headerLeft: <ProfilePicture />,
    },

The latest RTL feature introduced a bug when using the component on iOS without isRtl.

on line 412: textAlign: isRtl ? 'right' : 'text', should be textAlign: isRtl ? 'right' : 'left', ?

Right now it breaks with Invalid NSTextAlignment 'text' error

You should keep the value of input search box populated and so the delete icon should still appears.
For example:
onSearch function I called setState with searchText,
after delete the search, then type again, the searchBox didn't display the searchText inside.

Please fix it.

This is my view:

  <View style={styles.containerStyle}>
      <Text> Hello </Text>
      <Search
        placeholder={placeholder}
        backgroundColor="#f8fdff"
        borderColor="#ffffff"
      />
    </View>

with the following styles:

const styles = {
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  }
};

What I want is for a text label to be next to the search box. However, the search box keeps shifting infinity to the right of the screen (at one point the place holder also disappears to the right). I am thinking it has something to do with flexDirection: row . However I do not understand this behavior. What is going wrong?

Also, how to I alight the placeholder (by default its aligning to the right for me?)

Thank you

How can autoCapitalize=none be set? This is especially important for keyboardType="url".

When I enter the search box, the app Bottom tabs disappear,
it display a white space instead.

So I've been playing with this library and so far is been great, the one problem that I have is that the SearchBar won't have the placeholder centered if my placeholder is something like Jump to a conversation and the thing is that setting the Collapse and Expand margins isn't the best way to go.

any pointers on how to resolve it?

If you click on the text box of the search field and quickly begin typing text, it might get centralized in the text box (at least for some time). If the bug does not get reproduced try clicking "cancel" button and typing again and again, this behavior should cause the bug sooner or later.

The onSearch callback is not getting called when the user finishes search.

When I change "cancelTitle" to something longer as 'Cancel', the text gets closer to the side but doesn't change the cancelButton size responsive.

Unfortunately, SearchBox currently doesn't support any TestIDs properties, which makes it extremely rigid to UI testing.

Would be great to have optional testIDs to SearchBox props for both Input and Cancel button so it could be visible in view hierarchy and accessible for UI testing frameworks (eg Detox).

Thanks in advance :)

Hi, is there any way to change the current input text of the search programatically?

Cannot click on cancel or clear button while keyboard is opened, tap causes keyboard to be dismissed.

How I would cant change the "Cancel" text of the cancel button?

• Rewrite plugin
• Use nativeDriver to animation

I don't need the animation in my application. But how can I disable the animation and keep my search icon and placeholder left aligned?

I am trying to re-render a view in the onDelete method, but for some reason it wont render a view.

afterDelete() { return new Promise((resolve, reject) => { alert('deleting') this.renderView(); resolve(); }); }

The alert works fine, but the view does not re-render.
any ideas?

Documentation doesn't make sense really, it doesn't even have a complete example

Hi.
I'd like suggest you add property 'keyboardAppearance' to inner AnimatedTextInput. In some cases UI design does not have standard appearance.
II believe it might be helpful for someone.

Thank you in advance.

Hi, i'm using your search-box.
Can i remove the cancel button?
If so, how can i remove it?

Hi, is there a way to auto focus the search input on render?

When I execute a search how do I handle the error when what I've searched is not found?

When I installed the package and started using the code in my project. It shows an error--->
"Error while updating property 'textAlgin' in a shadow node of type: AndroidTextInput"
Invalid textAlign: text

=> When I checked through the file - index.js. I can see in the line #406 - textAlign: isRtl ? 'right' : 'text', Once I replace the text with other style element it works fine.

Could you please check and confirm.. wheater it is an issue to be fixed or it an user end issue.?

I was wondering if it was possible to only target the cancelButton's onPress handling.

Right now, I use the searchbox as header that triggers a redirect to another set of screens with the results. onCancel the user gets redirected to the previous screen. However, onCancel feels almost the same as I would be using onBlur. I was hoping onCancel was only the handling of the cancel button, but I was wrong.

Is there a way to target only the cancel Button to attach an action to?

Kind regards!

Whenever I increase the inputHeight property, the search placeholder is aligned to center but the search icon is not aligned. What can I do to solve this?

This is a great component and works really well for something so new.

Is there any chance that we can get an onBlur property added.

I'm happy to add it and provide you with a pull request if that helps?

Could you add typescript types

Hi,

I suddenly started getting this error after a reinstall of my node_modules, no update or anything. Does anyone know how to solve this?

Thank you!

Invariant Violation: Element ref was specified as a string (search_box) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

Edit:
This issue seems to be due to problems when installing packages. Reinstalling should fix.

Using [email protected]
This package doesn't recognize "PropTypes.style" such as in line 501 of index.js
cancelButtonStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.style]),

What is the problem here?

Hello. How do i reject the promise when what the user is searched is not found?

Hello,

It seems like the cancelButtonStyle prop is passed in two components:

• <Animated.View> at line 365
• <Text> at line 372

This causes warnings when we uses style properties that are not compatible with bot <Animated.View /> and `.

Example:

<SearchBar
  cancelButtonStyle={{ fontSize: 20 }}
/>

Will show a warning:

Warning: Failed prop type: Invalid props.style key fontSize supplied to RCTView.

My suggestion would be to make two new props (cancelButtonViewStyle and cancelTextButtonStyle) to customize <Animated.View /> and <Text>. The cancelButtonStyle should throw a deprecation warning. This would be backward compatible.

I'd be happy to make a PR if this makes sense

The placeholder text does not update when placeholder prop value is changed, this is because the prop is used to assign value to a class property which only happens when the constructor is called.

It seems like yarn is caching packages by version number, and the last change made here to fix PropTypes was not cached due to lack of version bumping.

Quickfix:
"react-native-search-box": "https://github.com/agiletechvn/react-native-search-box" in package.json

More proper way:
@anhtuank7c Bump version number to 0.0.14

Originally posted by @kacgrzes in #46 (comment)

there is no 0.0.14 version available

I'm trying to integrate the search element into the Android version of my React Native app, but when the view containing the search element is loaded, no matter where I navigate in the app when the keyboard attempts to launch, it immediately closes back. In regular text inputs, this is where the action ends, but in the search element, it creates an infinite loop where the beforeFocus, onFocus, and afterFocus events all fire one after the other in a never ending cycle. The app becomes unresponsive to touch, and the "Cancel" button can't be operated.

Does anyone know what might be causing this? Initially, I thought it might be that the search bar was inside a ListView, but the same behavior happened when it was placed outside of it. I've tried debugging it for the past couple hours, but can't seem to find the source of the issue.

Thanks in advance!

Expected Behaviour

On focus Input field a collapse animation trigger and cancel button appears

Happening

No animation trigger
No text alignment change

Using -

react-native": "0.62.0"

https://github.com/agiletechvn/react-native-search-box/blob/master/index.js line 505

from

direction: PropTypes.oneOf['ltr', 'rtl'],

to

 direction: PropTypes.oneOf(['ltr', 'rtl']),

I encountered this error while using :

W/ReactNativeJS( 7420): Warning: React.createElement: type is invalid -- expecte d a string (for built-in components) or a class/function (for composite componen ts) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of StaticRenderer.

Can the following cancellation be replaced with other words?

Hi there,

I am trying to place the placeholder text to the extreme left instead of having it center aligned. I tried playing around with some of the props but unfortunately none of them worked.

Any idea on how we can do this?

On both iOS and Android, https://github.com/react-native-vietnam/react-native-search-box/blob/master/index.js#L130 throws an error on react-native 0.62. This is breaking functionality.

Another warning that showed up after I updated to react-native 0.62 on my project from this package is that Animated.useDriver must be explicitly defined and is not. This one doesn't actually stop things from working but worth noting.

Why should I must return a Promise type in onChangeText function? so how to do a requst in this function?

return new Promise((resolve, reject) => { CRMManager.getSearchResult(this.page, 10, keyword).then((results) => { alert(1) this.setState({ dataSource: this.state.dataSource.cloneWithRows(results), }) resolve(); }). catch(() => { alert(2) }); });

they will alert both 1 & 2.

This is a really cool component - is there a way to disable the cancel text and it's associated functionality so that the search box just has the search icon and the clear icon?