CODEWITHSUNDEEP
iosreact-nativereact-native-maps
Tobias Reich
Tobias Reich

Reputation: 2034

KeyboardAvoidingView keeps adjusting height

The KeyboardAvoidingView keeps adjusting its height when used together with a map. Everything works fine when the KeyboardAvoidingView is disabled.

Video: https://www.dropbox.com/s/f8tix2gqmqz7i0i/height_bug.mov?dl=0

Small part of the structure:

<View style={ styles.container }>
    <MapView style={ styles.map } provider="google">
        { markers }
    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={ 90 }>
        <View style={ styles.footer }>
            <SafeAreaView>
                { toolbar }
            </SafeAreaView>
        </View>
    </KeyboardAvoidingView>
</View>

Styling that could be relevant:

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    map: {
        flex: 1
    },
    footer: {
        backgroundColor: colors.WHITE
    },
    footerToolbar: {
        flexDirection: 'row',
        padding: sizes.SCREEN_MARGIN / 2
    }
})

React native info:

info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
      Memory: 1.58 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.3 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.6 => 16.8.6 
      react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Upvotes: 1

Views: 852

Answers (1)

Kyle Erickson
Kyle Erickson

Reputation: 66

Try wrapping your whole component in your container with KeyboardAvoidingView. This component is basically just a View with padding on the bottom. Also, if you're going to use SafeAreaView it may be better placed on an outer component, as it's used to provide spacing on iOS for the outer view to ensure it clears the edges for iOS devices with notches and no buttons.

Upvotes: 2

Related Questions