Closed irekrog closed 3 months ago
Hey @irekrog
I think this is kind of expected behavior, since KeyboardAvoidingView
is designed to simply resize container without paying an attention to TextInput position (correct me if I'm wrong)?.. What is the behavior of KeyboardAvoidingView
from RN on iOS? π Does it have the same problem or not?
In your layout I think I'd recommend to use KeyboardAwareScrollView
(because according to description you want to achieve the effect provided by this component).
Plus I see that additionally you are moving your content by 400px
(which is also not sensitive to focused TextInput position (i. e. if you scrolled and your input around top of the screen -> you still move the view by 400px and thus the input gets hidden)).
What is the behavior of KeyboardAvoidingView from RN on iOS? π Does it have the same problem or not?
On iOS it looks a much better, so I'm not sure what is wrong π
Plus I see that additionally you are moving your content by 400px
Yes, because I want to hide the image outside a screen window when keyboard is active. Exactly like on this recorded video from iPhone.
@kirillzyusko and I'm trying to use KeyboardAwareScrollView
but there is no difference
@irekrog what happens here:
I don't see a keyboard, but according to Submit button it's kind of visible?
@kirillzyusko yep, it's a problem with recorded video because actually there is a keyboard
Yes, because I want to hide the image outside a screen window when keyboard is active. Exactly like on this recorded video from iPhone.
I don't know why iPhone behaves in this way, but on the layout that you provided:
KeyboardAvoidingView
should shrink an inner view;translateY
should move a view by 400px so there is a lot of risks that focused input will be hidden too (because it's very close to the image);Maybe because of layout animations (or some internal stuff inside) iOS itself does a little bit magic and changes view positions to what you expect, but on Android it'll not work for sure I think.
I'll test your layout when I have time (but can not promise it'll be soon, because I have a plenty of work with keyboard controller at the moment π )
And yeah, last but not least - you can create your own avoiding solution that will be specific for your layout:
onScroll
event using reanimated to understand how much distance use has scrolled;useKeyboardHandler
to have an access to every keyboard frame and do a corresponding animations.Using all these variables you'll be able to calculate necessary layout adjustments.
and I'm trying to use KeyboardAwareScrollView but there is no difference
Can you share a code sample with KeyboardAwareScrollView
?
I think KeyboardAwareScrollView
with bottomOffset
should do a trick. Also I can recommend you to try to change size of your image (set height
to 0
when keyboard is open), instead of translation
entire ScrollView
content.
Sure I'll try, and thanks for tips :)
Can you share a code sample with KeyboardAwareScrollView?
Nothing special, I just changed component from KeyboardAvoidingView
to KeyboardAwareScrollView
and tried manipulate bottomOffset
but behavior is similar like on the attached video.
Nothing special, I just changed component from KeyboardAvoidingView to KeyboardAwareScrollView and tried manipulate bottomOffset but behavior similar like on the attached video.
Okay, got you! Then I think the problem happens because of these additional 400px translation - potentially resizing content (changing real layout) may fix the problem, but of course need to try π
Feel free to share your observations here - I'll try to help if I can π
@irekrog I'm going to close this issue. I hope I provided the answer on how to achieve desired behavior βΊοΈ
Maybe in future this library will be able to synchronously retrieve a layout of focused input in each keyboard frame, and your use case will work out of the box π
Describe the bug When the content is scrolled to the bottom, halfway down the screen, etc., and the input is pressed, it is not always properly sticked and visible
Code snippet
Repo for reproducing You can paste a code above to
src/screens/Examples/KeyboardAvoidingView/index.tsx
in this repoExpected behavior TextInput should stick to the right place
Screenshots
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/11172548/d970e901-b37e-4aae-9ec7-bafb3a35d828
Smartphone