search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.4k stars 24.25k forks source link

KeyboardAvoidingView Still Broken, TextInput is covered by Keyboard (Sometimes) #28240

Closed iway1 closed 4 years ago

iway1 commented 4 years ago

Description I'm trying to use a keyboard avoiding view to move a form upwards vertically whenever a text input would be covered by the keyboard. KeyboardAvoidingView is having some trouble by not pushing things up quite enough to make it fully visible sometimes.

This exact same issue was raised in 2017, and was closed even though it was never fixed: https://github.com/facebook/react-native/issues/13393. Please do not close/remove this issue before it is fixed as this is a serious issue for react native developers who rely on react-native components to work properly.

I only say that because, in the past, the issue was closed without actually being fixed. That was back when iOS was in version 10 and react native was version 0.43. Now we're past version 13 in iOS and version 0.6 in react native and the exact same problem continues. In the previous issue, the creator of the issue closed the issue before it was actually fixed.

Reproduction Steps and Sample Code See the link to the previous issue from 2017 https://github.com/facebook/react-native/issues/13393. In my case, I'm using a stack navigator and in a KeyboardAvoidingView textinputs may still be covered when using `behavior={'position'}. The purpose of KeyboardAvoidingView is specifically to assure that TextInputs are not covered by the keyboard. It doesn't do that correctly in its current state.

It might take some fiddling with heights of TextInputs to get the keyboard to actually cover a textinput, in my experience the keyboard and KeyboardAvoidingView works properly in some UI configurations (Certain TextInput heights and vertical locations) but sometimes the keyboard will cover the targeted TextInput

Solution Any navigation header breaks KeyboardAvoidingView in some circumstances. KeyboardAvoidingView may need to be modified in order to take into account headers that may be present. There is a workaround, where you supply a prop to KeyboardAvoidingView: keyboardVerticalOffset={Header.HEIGHT}. This works when a navbar is at the top. If a navbar is at the bottom of the screen then you need to supply a negative value. This workaround shouldn't be required though.

Additional Information React Native version: 0.61 Platform: iOS Development Operating System: MacOS Dev tools: iPhone 11 simulator, iOS 13.3

hramos commented 4 years ago

I just want to point out that #13393 was closed by the same person who reported the issue, as they hadn't run into the issue any more. That seems like a fair resolution to me.

Thanks for opening a new issue - it's the right thing to do when you run into a problem but the issue has been closed. There's one thing I'd like to ask: please make sure to fill out the issue template that is included in all new issues and that appears to have been erased from this issue.

stale[bot] commented 4 years ago

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

stale[bot] commented 4 years ago

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.