React-native-keyboard-aware-scroll-view: extraHeight and extraScrollHeight not working on React Native 0.56

[ashour]

Hello,

I had this library working with a RN 0.55 project, and I've recently upgraded the project to RN 0.56. At that point extraHeight suddenly stopped working, and I can't figure out why. I know there have been subtle changes to ScrollView in RN 0.56, but I don't know whether or not they're affecting the library.

I also tried extraScrollHeight, which seems to work on iOS, but not Android with RN 0.56.

_You just don't get any extra space with extraHeight on either platform, and you only get extra space with extraScrollHeight on iOS._

Here's a minimal project that demos the problem behaviour:

https://github.com/ashour/KeyboardAwareScrollViewRN56Demo

Here's the relevant code as well:

import React, {Component} from 'react';
import {TextInput, StyleSheet, Text, View} from 'react-native';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <KeyboardAwareScrollView
                    enableOnAndroid

                    // Doesn't work on RN 0.56 for either Android or iOS
                    extraHeight={200}

                    // Works on iOS but not Android in RN 0.56
                    extraScrollHeight={200}

                    style={styles.keyboardAwareScrollView}
                    contentContainerStyle={styles.contentContainer}
                >
                    <Text style={styles.label}>Enter your name</Text>
                    <TextInput style={styles.input}/>
                </KeyboardAwareScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: '#F5FCFF',
    },
    keyboardAwareScrollView: {
        flex: 1,
        borderColor: 'red',
        borderWidth: 1,
    },
    contentContainer: {
        borderColor: 'blue',
        borderWidth: 1,
    },
    label: {
        marginTop: 400,
        fontSize: 20,
        margin: 10,
    },
    input: {
        width: '100%',
        height: 44,
        backgroundColor: '#eee',
        borderColor: '#333',
        borderWidth: 1,
    },
});

[pinkladywithcoco]

Yes extraHeight do nothing on IOS, but extraScrollHeight works on IOS...

[andrewmarmion]

I'm having the same issue _extraScrollHeight_ works on iOS but not on Android, _extraHeight_ doesn't seem to do anything on either. Has anyone managed to resolve this?

[bhavukjain1]

+1

[denis-shostik]

For me
extraHeight - doesn't work on IOS but works on ANDROID
extraScrollHeight - works on IOS but doesn't work on ANDROID

[andrewmarmion]

@denis-shostik which version of RN are you using?

[NazifaNajish01]

I am using version 0.56 and facing the same problem.

[denis-shostik]

@andrewmarmion I'm using 0.55.4 and probably it the reason why the props are working for me

[otaviogaiao]

I'm on React 0.56 and it's not working either

[mickaelw]

Yes for me too and keyboardOpeningTime

[axelander]

There is a bug in RN 0.56 on TextInput.State.currentlyFocusedInput(). Looks like it is fixed in 0.57.2. https://github.com/facebook/react-native/commit/b4b594cec1d91c38faac11a90a787ae692e35296#diff-c473a5caf30f5ac44489c74e1804dc25

[Moreno97]

Closing for being a bug on RN.

[abarisic86]

Can someone confirm that this is working from 0.57.2? I'm on 0.57.3 and can't make this to work.

[mallikarjun]

It does not work on Android (did not test on iOS)
"react-native": "0.57.8",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
Tried both extraHeight and extraScrollHeight

[mallikarjun]

After setting android:windowSoftInputMode="adjustResize" in android manifest and enableOnAndroid={true} worked.

[phanbien9x]

@mallikarjun Thanks! It working.

[nikoremi97]

I've upgrade the project to React-native 0.59.4 and the KeyboardAwareScrollView stop scrolling as usual on iOS. Can someone give me some help?

[nikoremi97]

Well, it seems that props
scrollEnabled={true} enableAutomaticScroll={true}>
are now mandatory

[nagpalm7]

I guess its not a bug with RN I am using version 0.59.1 and facing same issue

[tuzmusic]

I can't seem to get extraScrollHeight to work even on iOS with RN 0.59.9

 <KeyboardAwareScrollView
        scrollEnabled={true}
        enableAutomaticScroll={true}
        extraScrollHeight={100}
        contentContainerStyle={styles.superContainer}
      >

[lathamishra]

Thank you @nikoremi97 :)
"Well, it seems that props
scrollEnabled={true} enableAutomaticScroll={true}>
are now mandatory"

this works like a magic <3