question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

KeyboardAvoidingView behaves differently in some circumstances

See original GitHub issue

Hi,

i am using KeyboardAvoidingView inside a SafeView in a StackView of react-navigation-stack. While it works great on android, in iOS i notice differences between several iOS devices (iphone 11 & SE (1. gen)).

screen is structured like this:

<SaveAreaView>
    <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : null}
        keyboardVerticalOffset={Header.HEIGHT}
    >
       <TextInput/>
    </KeyboardAvoidingView
<SaveAreaView>

I figured out that the following changes in KeyboardAvoidingView would fix my issue, why has this been reverted and is there maybe another workaround?

https://github.com/facebook/react-native/commit/a37e45a57ef508bf9b413b64d1324294cec5e478#diff-68fc16c983e5047f1dc94c5de9622326

React Native version:

0.62.2

Expected Results

same padding / distances cross different devices

image

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
chrisgleincommented, Jul 22, 2020

Differences between Android and iOS are expected, according to the docs: https://reactnative.dev/docs/keyboardavoidingview#behavior

Android and iOS both interact with this prop differently. On both iOS and Android, setting behavior is recommended.

So, while I don’t know the history of that, sounds like this is expected? Pinging @TheSavior as he was on the PR for the commit you identified.

0reactions
stale[bot]commented, Dec 26, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardAvoidingView not Working Properly - Stack Overflow
I am trying to use the KeyboardAvoidingView with behavior="padding" . For some reason, when I'm trying to enter any text in TextInput ,...
Read more >
KeyboardAvoidingView not working properly? Check your ...
KeyboardAvoidingView not working properly? Check your Flexbox Layout first. Keyboard overlaying Input or Submit button is a common problem in ...
Read more >
Prevent the On-screen Keyboard from Covering up Text Inputs
First, you can use the built in KeyboardAvoidingView to move components around when the keyboard comes on screen. It has the advantage to...
Read more >
react navigation keyboardavoidingview - You.com | The AI ...
Below, we have developed a page in React Native based application which is styled using different React ... behaves differently in some circumstances#29467....
Read more >
How to prevent keyboard from hiding content ... - Reddit
You can create a scrollview that doesn't actually scroll under normal circumstances, it is just a wrapper for components that behaves like ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found