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.
Related
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.
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 am using the "Input" component from react-native-elements, not "TextInput". I need to focus scroll to the input when it is touched. The keyboard keeps covering the input even after using KeyboardAwareScrollView and KeyboardAvoidingView. Please help.
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
In regular native behavior, scrolling an unfocused text view does not make it focus. In React Native however, when you have a multiline TextInput, and you try to scroll, it immediately focuses.
Looking at the source code, this seems to be by design, as the text view is wrapped in a TouchableWithoutFeedback that calls focus on press.
Any workarounds short of forking React Native?