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.
Related
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!
In my react native app, I have a header with a search option and a body with content which is a flatlist and a footer. The flatlist is shrinking when the keyboard is active and my footer is showing above the keyboard.
I don't want to shrink flatlist while the keyboard is active or don't want to show the footer while the keyboard is active. how I can achieve that?
You can use KeyboardAvoidingView from react-native.
Please check your android manifest it should have
android:windowSoftInputMode="adjustPan"
something like this(please check this)
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.
I'm currently building an order page that takes in only selected characters for my TextInput element.
My requirement is that when I focus on TextInput, the keyboard doesn't appear but I can still point the cursor around in the TextInput.
Tried using editable={false}, works for keyboard not appearing but disables cursor.
Is there a workaround to this where I can hide my keyboard but still use cursor?
What you are trying to do is not currently posisble in React Native, see this Github thread
Currently I have a TextInput at the bottom of my screen, when I press the TextInput the keyboard is placed on top of the TextInput, so I can't see what I am typing.
Does anyone know how I would be able to show the TextInput component just above the keyboard, when the component is pressed?
There's an exact component for this, provided by React Native, KeyboardAvoidingView.