React-native-keyboard-aware-scroll-view: React Native released <KeyboardAvoidingView /> anyone used it?

[wootwoot1234]

Hey Guys,

I've used this library for a while now and it's been great but I just saw that react native released in RN 0.29. Although I like this module, I generally will revert to the react native stock code instead of using an addition module. Has anyone used it? Is it any good?

Here's a link to the commit adding <KeyboardAvoidingView />

[alvaromb]

I've seen that component @wootwoot1234, but I haven't used it yet. It would be great if it provided the same functionality of my component. The keyboard handling is something that I feel that should live in the core.

[JosephDev]

I am consideration <KeyboardAvoidingView /> component as @wootwoot1234
I followed react native docs, however it doesn't work as my expectation.
Please let me know if there is any update on this issue.

[wootwoot1234]

I have switched over to <KeyboardAvoidingView />. It's working great for me. I think there are three options: position, padding, and height. Try out each one, they all work a little different.

[JosephDev]

@wootwoot1234 Do you test it with <ScrollView/>? After removing keyboard, it makes extra slack on the bottom. um...

[tomauty]

I've tried to convert to KeyboardAvoidingView but consistently return to this library, especially for longer forms / scrollviews. This one is basically a plug-and-play replacement for a scrollview, in my experience.

[ikabar-tracxpoint]

Hi @wootwoot1234,

I also tried to work with _KeyboardAvoidingView_ but for some reason it does not work as I expect it too.

Will you be willing to share a sample of your code ?

[MovingGifts]

@JosephDev I have the same issue with <ScrollView/>. When the keyboard is removed, there is extra slack on the bottom, until you manually scroll the scrollview to bring it back down to cover the slack.

Did you find a solution using <KeyboardAvoidingView /> with <ScrollView/> where it automatically handles the slack removal on keyboard removal?

[theodoregold]

I think documentation could use some love. It seems like a good PR. I am trying it out, but for now I can't seem to figure out if it is suppose to be a spacer or some kind of wrapper. Current example doesn't seem to be working on android. Visuals would be nice too.

[JosephDev]

@MovingGifts I think <KeyboardAvoidingView /> is not mature to go production. Currently, stick on this library.

[MovingGifts]

@teodors @JosephDev Sounds good, I opened up an issue with a visual of the issue here. https://github.com/facebook/react-native/issues/10765

[j-mendez]

For the keyboard avoiding view to properly work you need to have the keyboard as a parent of the scrollview and use the behavior of padding to properly work. @MovingGifts

[MiLeung]

When using KeyboardAwareScrollView with KeyboardAvoidingView there is a keyboard height white space at the bottom of the KeyboardAvoidingView.

[alvaromb]

I don't think it's a good option to use both together in the same component.

[Lepozepo]

@JosephDev this fixes the weird extra space on android and makes the height calculate correctly when a ScrollView is a child of KeyboardAvoidingView. Hopefully the react native team will merge the open PR soon

[theodoregold]

@Lepozepo I did a search and there doesn't seem to be an open PR and even if there is, and they merge it. It is not going to be available until late (last day of) February. Or if you live that renegade life, early February for unstable. So, it still isn't going to be production ready for some time.

[Lepozepo]

@teodors you're right. I'm testing it right now but I'm still running into weird bugs on Android specifically using "height" >_<

[rohitgoyal]

Too many weird issue with this even now. :(

[alvaromb]

Folks, I'm currently searching for contributors for this lib. Is anyone interested?

[ghost]

if you don't see any changed active keyboard changes, try wrapping an empty around the whole document

[pgonzalez-santiago]

Hey @MiLeung, Did you fix the issue regarding the withe space in the bottom of the KeyboardAvoidingView? I'm having the same problem when soft keyboard is out.

Only happening on android, in iOs its working perfectly.

[iRoachie]

@pgonzalez-santiago react native 0.42 just released a change that might correct this.https://github.com/facebook/react-native/commit/e3d4ace3ae46e3e4046e1ec5a201b92033deb24a

[pgonzalez-santiago]

@iRoachie doesnt work. :( If I set "adjustResize" the keyboard wont push the view up (as in iOs) and it is what i'm trying.

[Parrryy]

@pgonzalez-santiago It worked fine, make sure you using the behaviour property height and not padding.

[npomfret]

Using KeyboardAvoidingView inside a ScrollView on android does nothing with RN0.42 as far as I can see. Or is there a trick to using correctly?

[pgonzalez-santiago]

@npomfret have you tried to android:windowSoftInputMode="adjustResize" in the androidManifest?

[npomfret]

@pgonzalez-santiago yes, that's what it's set to.

[npomfret]

Ah, it works but not if there's anything below the scrollview.

[tibbus]

I have tried to use it, doesn't work too well for me. I have tried all the options, sometimes works but with that bottom padding, sometimes doesn't work at all, pretty unstable for now.

[acrazing]

Maybe this is a perfect solution: https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

[Palisand]

Unstable indeed:
https://github.com/facebook/react-native/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20keyboardavoidingview%20in%3Atitle%20

[Rolandisimo]

@acrazing Followed that with ScrollView. Didn't manage to get it working. Though, if I remove the ScrollView, it pushes the content, alas the keyboard doesn't close after tapping outside an input field. (Plus, my content will inevitably be longer than the height of the screen) :(

Also, don't event want to try react-native-keyboard-aware-scrollview because it seems unmaintained.

[sebgam]

works perfect using <KeyboardAvoidingView behavior={'height'} style={{alignItems: 'center',}}> keep in mind that you should not be inside a<ScrollView>

[AlexHuicu]

I had a view with <KeyboardAvoidingView> inside <ScrollView> and multiple items inside the <KeyboardAvoidingView>.
When keyboard was opened, the ScrollView size was huge, while user was being able to scroll it down a lot, even if there where no more views.
I tried to debug it and added onLayout prop in <KeyboardAvoidingView>.
Suddenly, the strange behaviour has stopped.

[gregblass]

KeyboardAvoidingView just cost me like an hour and I still don't have it working right. Seems super wonky.

[cihadturhan]

I tried RN built-in KeyboardAvoidingView, this library and some other but none of them worked out well.
Because, other libraries and styling interfere the position of the views and react-native somehow can't measure the exact position from a scrollview's top to text input's top position.

I ended up using /hackiftekhar/IQKeyboardManager for iOS. Android has a native keyboard avoiding support that you define in AndroidManifest.

[aquintiliano]

@cihadturhan you used this library with ReactNative? What else you have done to make it works? I am trying without success

[winkelsdorf]

@cihadturhan great suggestion! Works like a charm with a new RN 0.59 project, no need to configure anything. Thanks 👍

[FDiskas]

I tried RN build in but not worked for me. Here is all examples I tried - based on https://medium.freecodecamp.com/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
react-native-keyboard-avoidance-examples_1574761604681.zip

[rborn]

I'll close this for being very old. Thanks for all the comments 😻

[FDiskas]

:D and problem is gone