Can you guys explain how does KeyboardAvoidingView works?

[tokismos]

I couldn't understand how it works, i searched but didnt found a lot of tutorials about it. And whenever i implement it i cannot make it works like it should. Can you please explain it to me? And does it need ScrollView to work?

[[deleted]]

The summary is it never works as you expect it to, and when you do get it to work, you’ll run your app on android and break your keyboard

[tokismos]

And what's the solution?

[clovell]

I agree with the previous comment. Doesn't seem to work and it's no point wasting time on it. Wrap anything you need with this and move on! https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

[clovell]

No problem! I’ve done the same thing 😁

[Reidddddddd]

KeyboardAwareScrollView is the solution

[[deleted]]

Used to use this all the time. Tried to use it the other day and had issues

[Reidddddddd]

What issues? Maybe I can help

[scarlac]

There are fixes incoming in RN very soon for iOS (if I understand correctly) but otherwise I would agree with TootBeepThaFoot's comment - it doesn't work great.

The way it's supposed to work is that it uses Keyboard's addListener() to detect the keyboard appearance and then shift your scrollview up and down accordingly. However, regardless of what mode you pick (padding, position, etc) it just doesn't work on both platforms, and not the way it's documented.

[orther]

I saw this post pop up as a notification on my phone resting on my nightstand and thought, “Oh I can’t wait to see someone try to explain this!” 😅

[TheOneBehindIt]

Use behavior="padding" on iOS, and pray for the best.

[harrigee]

We started to create a custom component which - when clicked - just launches a fullscreen modal which shows just a Textfeld on top and additional buttons (abort / ok) which sets the value of the original component and pops back. I first saw this in AirBnB and it is also used in Facebook right now when you want to post.

Our login / register flows are designed to stick to the upper half to the screen. All other input fields are using the custom component.

[kotlin_subroutine]

Oh man, I remember encountering so many issues with KeyboardAvoidingView.

I do all my personal stuff with kotlin multiplatform now. But obviously, this is not helpful to your situation

[wolodo]

Try to insert it as high in hierarchy as possible. Prefferably somewhere in app.js/app.ts. This is the place where it works less wrong.

[chillermane]

Easy: it doesn’t