intereactive KeyboardAvoidingView.

[flodlc]

Is your feature request related to a problem? Please describe. Hi, when I set keyboardDismissMode="interactive" on KeyboardAvoidingView, a blank space is left between the bottom of the component and the top of the keyboard. Basically, there is no animation in this situation.

Is it a usecase that react-native-keyboard-controller can handle?

Additional context Here is a short demo of the issue:

https://github.com/user-attachments/assets/05c9c812-7e2c-4969-aee0-64edf49ae584

Thanks a lot for your help :)

[kirillzyusko]

@flodlc yes, definetely! 🙈

You just need to add onInteractive handler in https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/src/components/KeyboardAvoidingView/hooks.ts (just use the same code as in onMove handler).

Would you mind to try that and let me know if it fixes the problem or not? 👀

[flodlc]

Thank you so much for the answer @kirillzyusko ! I tried duplicating KeyboardAvoidingView and useKeyboardAnimation locally to add the onInteractive handler. It helps, but now I face new issues 😆

Not sure if it's related to layouts issues on my side or if it needs to be managed on the library side. What do you think ?

Here it is, the Flatlist scrolls while keyboard is animating which is expected, but in addition to that the keyboard animation leaves extra space, causing the list to scroll at twice the speed of the cursor.

https://github.com/user-attachments/assets/acbbf7c6-586d-40ff-910f-39626d078c49

[kirillzyusko]

Oh @flodlc you are right! It happens because we scroll and at the same time we increase the height of the view, so because of that we are getting a double scroll effect.

I don't know if it can be handled in KeyboardAvoidingView and from what I understand it's barely impossible (just because how different things (scroll, view resize, etc.) work together 🤷‍♂️)

But you can go to low-level primitives and handle the layout that you want to get. I prepared a small example https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example%2Fsrc%2Fscreens%2FExamples%2FInteractiveKeyboardIOS%2Findex.tsx and I believe it's the same layout that you are trying to get 👀

May I ask you to check that example and let me know if you can use that layout/code in your app?

[kirillzyusko]

@flodlc I merged a PR where I added onInteractive handler, but it'll produce double scrolling effect 🙈

The issue was automatically closed. I will try to find a better solution, but at the moment I don't have any ideas on how to make it working within KeyboardAvoidingView and its layout transformations 🤷‍♂️

Anyway, at the moment I can only suggest to use this code: https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example%2Fsrc%2Fscreens%2FExamples%2FInteractiveKeyboardIOS%2Findex.tsx to achieve effect that you want to achieve 👀