I have created a standard "search" component, where there is an "x" and a "cancel" icon present. The "x" is meant to clear the field quickly if you want to change what you have previously typed into the field. The "cancel" is meant to just cancel the process of searching and revert to the page's default view. Both work respectively.
the problem is when the keyboard is up/open, a user is forced to tap on the "x" or "cancel" two times to get it to work, instead of it being clickable on the first time.
Both icons are currently wrapped in TouchableWithoutFeedback independently, and those are nested down into a View within a View.
So I know my issue is ultimately tied to the TextInput having the focus, as that's what keeps the keyboard up/open. I've read something about keyboardShouldPersistTaps but it seems to be only relevant to ScrollView I tried adding it to the View that wraps everything in this scenario but that doesn't appear to do anything.
All in all, I am looking for help coming up with a solution. Or an idea of where to start, in an attempt to fix this. All I need have done is have the "x" clear the field, reset the data on the view, and close the keyboard. With a single tap rather than a tap to clear the keyboard and another tap to actually do with its doing otherwise when the keyboard is down/closed.