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.

React Native's KeyboardAvoidingView not responding for FormInput

See original GitHub issue

I’m using multiple FormInput on the same page and when an input gains focus and the keyboard is triggered to slide up it covers my inputs. I’ve tried to handle this by using react native’s KeyboardAvoidingView as my form container but the keyboard still covers my Inputs. What could be the reason for this, does it have anything to do with the FormInput’s default styling or my container?

Below is my container’s styling.

.container: { flex: 1, padding: 20 }

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
martinezguillaumecommented, Jun 29, 2018

Same here… I tried to wrap all of my view inside a ScrollView, same…

EDIT: I just forgot to specify the props behavior

RE-EDIT: I notice that there is a problem with KeyboardAvoidingView and react-navigation, to make it works, you have to do this workaround (add keyboardVerticalOffset to 65, the height of the react-navigation tab-bar):

<KeyboardAvoidingView
  behavior="position"
  keyboardVerticalOffset={65}
  contentContainerStyle={styles.contentContainer}
>
...
</KeyboardAvoidingView>
0reactions
martinezguillaumecommented, Jun 29, 2018

@datsik34 It’s more like that in JSX

<KeyboardAvoidingView
  behavior="position"
  keyboardVerticalOffset={65}
  contentContainerStyle={styles.contentContainer}
>
...
</KeyboardAvoidingView>

I’ll change my comment to be more understandable

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardAvoidingView not Working Properly - Stack Overflow
1. Try removing paddingBottom: this. · still not working@HSBP. – Charan Teja · Use KeyboardAwareScrollView (github.com/APSL/react-native-keyboard- ...
Read more >
KeyboardAvoidingView not working in FORM component #1518
i want scroll this form when fill up. For scrolling view i used KeyboardAvoidingView react-native component. Not working scroll view.
Read more >
KeyboardAvoidingView not working properly? Check your ...
Check your Flexbox Layout first. Keyboard overlaying Input or Submit button is a common problem in React Native. Something like ...
Read more >
KeyboardAvoidingView - React Native
KeyboardAvoidingView. This component will automatically adjust its height, position, or bottom padding based on the keyboard height to ...
Read more >
What is The Problem WIth KeyboardAvoidingView - 3 - YouTube
React Native Animated Form ... KeywordAvoidingView inside React Native and I found this is not working properly inside my android emulator.
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