React-native-gifted-chat: InputToolbar rises up to the top when user types

[nubeble]

I'm using a ejected app (ios) from expo.
Everything was fine before I tested in ios. If I touched the input text, keyboard showed, I typed a letter then the input text jumps to the top.
Does anyone know about this issue?

here's my code.

<View style={{ flex: 1 }} >
                <GiftedChat
                    minInputToolbarHeight={56}
                    textInputProps={{
                        style: {
                            width: '86%',
                            height: 56,
                            fontSize: 16,
                            color: "white",
                            paddingTop: 6,
                            paddingLeft: 16,
                            paddingRight: 16
                        }
                    }}
                    renderSend={this.renderSend}
                    renderInputToolbar={this.renderInputToolbar}
                >
                <KeyboardSpacer />
</View>

renderSend(props) {
    return (
        <Send {...props} >
            <View style={{
                marginBottom: 14
            }}>
                <Ionicons name='ios-send' color={Theme.color.selection} size={28} />
            </View>
        </Send>
    );
}

renderInputToolbar(props) {
    return <InputToolbar {...props} containerStyle={{
        backgroundColor: Theme.color.background,
        borderTopColor: Theme.color.textInput
    }} />
}

Additional Information

. React Native + Expo -> eject
. working fine in android, only in ios this issue occurred
. latest version of react-native-gifted-chat

[xcarpentier]

Can you please test on v0.7.1 and let us know if it's still the case?

[nubeble]

I tried with v0.7.1. But still same.

I found out the KeyboardSpacer component cause this issue.
If I remove from under

So, have to find more solution for this.

[xcarpentier]

Ok, please let us know ;)

[NicWickman]

I am experiencing the same symptoms as Nubeble. When I open the keyboard, everything disappears (moves out of place), but pops back into place after typing on the keyboard.

If I use KeyboardSpacer, it starts in-place, then jumps too high after typing.

Some height-setting step or something in GiftedChat is not firing until after the keyboard is touched. There are multiple people in all of these inputToolbar threads who have this issue, which isn't solved by just moving something up or down.

[infaz]

Im also facing the same issue. If you are using "react-native-keyboard-manager", then disable it in this view,

componentDidMount() {
    KeyboardManager.setEnable(false);
    KeyboardManager.setEnableAutoToolbar(false);
 }

[ishannaktode]

+1 @xcarpentier

Same issue here. Only for iOS. Expo App.

Had issue with android also, but doing below fixed it.

<KeyboardAvoidingView behavior="padding" style={{flex:1}}>
    <App/>
</KeyboardAvoidingView>

This might be causing issues with iOS due to differences in result of behavior prop on iOS and Android - Check out this link

[projectpublius]

Since I use KeyboardAvoidingView, I fixed this issue by editing GiftedChat.js in the getKeyboardHeight() function at line 174, replacing
if (Platform.OS === 'android' && !this.props.forceGetKeyboardHeight) {
with
if (!this.props.forceGetKeyboardHeight) {
so that the function will return 0 for both ios and android.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[wangdicoder]

Since I use KeyboardAvoidingView, I fixed this issue by editing GiftedChat.js in the getKeyboardHeight() function at line 174, replacing
if (Platform.OS === 'android' && !this.props.forceGetKeyboardHeight) {
with
if (!this.props.forceGetKeyboardHeight) {
so that the function will return 0 for both ios and android.

Should consider checking whether KeyboardAvoidingView is used to determine the keyboard height at that line?

[ManuEpi]

Does someone have a solution for it ? (In the case where we don't want to modify source files, because it's not a permanent fix, "node_modules" files are generated each time ...)
@projectpublius

[ManuEpi]

+1

[jamonholmgren]

I was able to fix it by setting isKeyboardInternallyHandled={false} on the GiftedChat component.

[usamamoinakhter]

Facing same issue

[rentedpanda]

any solution? permanent?

[socialcode-rob1]

It doesn't happen on all android versions.
I see it on Android 10.

On Android 8 it works fine.