Stop propagation of button with position absolute above a webview - react-native

I'm using a webview to show a html content, this html have links. I put a TouchableWithoutFeedback to open a link, I tried to emulated the button action of android so I put this button with position absolute. my problem is that when the button is above a link and I touch the button, react native open the link in the webview and the link in my button, I try to put TouchableWithoutFeedback inside a view to use onTouchStart and onTouchEnd with stopPropagation, but this doesn't work, Do you know a ways to stop propagation in these cases?
I tried with pointerEvents="none" in a view with the webview but this cancel all the links, as could be expected.
I tried to change pointerEvents to none in an onTouchStart and after change pointerEvents to auto in a onTouchEnd in a view with my TouchableWithoutFeedback, but it doesn't work.
Thanks for your help!

Related

React Native KeyboardAvoidingView event

There is a way to create a component that run when KeyboardAvoidingView is running. For example, in a screen there are a TextInput (in the bottom like footer) and a Text. When I click in TextInput to edit (KeyboardAvoidingView is enable) I want the Text disappear. I know how can disappear the Text but I should find a way to detect when KeyboardAvoidingView open.

How to close UI Kitten modal on back button press in android?

I am using modal for React Native UI kitten.
But the problem is I did't find anything like onRequestClose prop like the React Native provides for the modal. Nothing mentioned on their API also.
So is there anything like I can close the modal on back button press?
I suggest react-native-modal which is easy to use and customize https://github.com/react-native-modal/react-native-modal

Press on textinput hides modal react-native-modal

I am rendering Flatlist which render list of items each item have button and modal inside it when the button pressed the modal shall open, each modal have some text inputs inside it
so the hierarchy is as the following :
Screen
-FlatList
--Item
---Button
---Modal
----TextInput
When I open press on the first item's button the modal opens and everything works great, but when I scroll down in the Flatlist and press on the last item and open the modal open then I try to write on the modal's textinput the modal disappears.
I am sure that the modal exists but I cannot see it, Any help?
GIF explaining what I mean
I suffered from the same issue and after digging into this subject, I do not think there is any other way than taking the modal out of FlatList.
Seems that there is a bug in Android with a modal with textinput inside a FlatList, which caused when the keyboard expands.
When modal is outside of the FlatList, works like a charm.

How to Bring button (which opens modal) on top of modal as well? React native

I am using react-native-modal. I am using modal's overlay, and the button which opens up modal, changes to cross button, but it stays behind the overlay of modal. I want that button to be on top of modal when modal is visible. I have already tried zIndex with the button but it didn't work. Need help with this. Thanks in advance.
Something like this but with modal overlay:
The Modal component of react native traps the focus inside the modal content while visible. The only way to capture a click on the button is to display another copy of it inside the Modal component. If you manage to display it at the same position, the user won't see that it's another button.

How to use KeyboardAvoidingView in an animation view in react-native?

I try to animate a login view with fly-in animation when the view did mount, but it seems that KeyboardAvoidingView isn't work inside the animation view. I have tried several packages, none of them work. Can someone tell me how to avoid text input behind the keyboard in the animation view?