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 doesn't work when behavior is padding on ios

See original GitHub issue

Environment

npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
      react-native: 0.57.3 => 0.57.3
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

when behavior="padding" padding

when behavior=“position” position

Reproducible Demo

export default class Test extends Component {
    render() {
        const { navigation } = this.props
        return (
            <SafeAreaView style={CommonStyles.container}>
                <KeyboardAvoidingView style={styles.keyborderView} behavior="padding">
                    <View style={styles.topView}></View>
                    <TextInput style={styles.input} />
                </KeyboardAvoidingView>
           </SafeAreaView> 
        )
    }
}

const styles = StyleSheet.create({
    input: {
        width: 300,
        height: 40,
        borderWidth: 1,
        borderColor: 'red'
    },
    topView: {
        height: 300,
    },
    keyborderView: {
        flex: 1
    }
})

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
orkylishcommented, Jul 20, 2019

I wanted a super simple way for this to work, and finally found one thanks to this comment on stackoverflow

react-native-keyboard-aware-scroll-view

works exactly as I wanted for my multi-input screen, view only adjusts enough to match the currently selected input box

4reactions
vovkasmcommented, Nov 30, 2018

@Liqiankun I’am usually write custom components in my apps to avoid keyboard and they highly coupled with apps layout, but yesterday I write something more or less universal. I think it will work in you case: https://gist.github.com/vovkasm/8e2d2f6ac9b77e16a802e2900b9f9e40 it is not well tested, but if it work for you, you can use the same principles in your own implementation.

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardAvoidingView not Working Properly - Stack Overflow
View> ); } // iOS: React Native's KeyboardAvoidingView with header offset and // behavior 'padding' works fine on all ios devices (and ...
Read more >
KeyboardAvoidingView not working properly? Check your ...
It can automatically adjust either its position or bottom padding based on the position of the keyboard. In other words, KeyboardAvoidingView is ...
Read more >
How to fix KeyboardAvoidingView in React Native?
KeyboardAvoidingView is kind of difficult to make it right in both ios and android, let's see how we can fix that. Tagged with...
Read more >
react native keyboard avoiding view not working - You.com
React Native KeyboardAvoidingView not working properly ... <KeyboardAvoiding behavior={'padding'} keyboardVerticalOffset={64} style={styles.container}> ...
Read more >
KeyboardAvoidingView - React Native
On both iOS and Android, setting behavior is recommended. Type. enum( 'height' , 'position' , 'padding' ) ...
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