First, thank you for the lovely library 😄
Context: I was using the library to render a search bar that uses onSubmitEditing to fire off a function. I noticed that the function was getting called twice.
Digging through the source, I think this line is causing the issue. I think spreading props to both the TextInput as well as the RNBounceable component is the root of the issue.
The way I verified this hunch is by inspecting the node that fired the event:
<SearchBar onSubmitEditing={(e) => { console.log(e.currentTarget._children)} />
One of the events showed 3 children (the wrapper rending the TextInput and two icons) while the other showed 0 children (the TextInput rendering nothing).
Some possible solutions include:
- Only pass the props explicitly defined in
RNBounceable to that component instead of {...this.props}. This could cause some regressions and would probably warrant a major version bump.
- Add
TextInputProps as a parameter to the base component and only spread those props to the TextInput. This would be more explicit (nice) but more cumbersome to use (less nice). This would also warrant a major version bump.
- Remove
onSubmitEditing from the props passed to RNBounceable. This would be the least intrusive, but leaves the underlying issue of passing the same props to two components.
Let me know what y'all think and I can help with a PR to fix this!
To reproduce:
<SearchBar onSubmitEditing={() console.log('called')} />
// open it up and press enter
First, thank you for the lovely library 😄
Context: I was using the library to render a search bar that uses
onSubmitEditingto fire off a function. I noticed that the function was getting called twice.Digging through the source, I think this line is causing the issue. I think spreading
propsto both theTextInputas well as theRNBounceablecomponent is the root of the issue.The way I verified this hunch is by inspecting the node that fired the event:
One of the events showed 3 children (the wrapper rending the
TextInputand two icons) while the other showed 0 children (theTextInputrendering nothing).Some possible solutions include:
RNBounceableto that component instead of{...this.props}. This could cause some regressions and would probably warrant a major version bump.TextInputPropsas a parameter to the base component and only spread those props to theTextInput. This would be more explicit (nice) but more cumbersome to use (less nice). This would also warrant a major version bump.onSubmitEditingfrom the props passed toRNBounceable. This would be the least intrusive, but leaves the underlying issue of passing the same props to two components.Let me know what y'all think and I can help with a PR to fix this!
To reproduce: