Issue with Gifted Chat, InputToolbar position for Android

Question

I would like to know how to fix correctly the position of the InputToolbar when the keyboard is visible.

If I add a marginBottom, the textInput position change. And if I change the position of textInput, the position of InputToolbar change and when the keyboard closes and open again every marginbottom are ignored.

On an iOS device everything is fine, the issue is only for Android.

  <View style={{backgroundColor: backgroundColor, flex: 1}}>
      <GiftedChat
        messages={messages}
        onSend={handleSend}
        renderSend={renderSend}
        user={mapUser(auth.currentUser)}
        loadEarlier={loadEarlier}
        isLoadingEarlier={isLoadingEarlier}
        isTyping={typing != null} 
        onLoadEarlier={handleLoadEarlier}
        onInputTextChanged={handleInputTextChanged}
        renderBubble={renderBubble}
        bottomOffset={-10}
        listViewProps={{
          keyboardDismissMode: "on-drag"
          }}
        style={{backgroundColor: backgroundColor}}
        renderFooter={renderFooter}
        list
        renderInputToolbar={(props) => (
          <InputToolbar
            {...props}
            containerStyle={{
              backgroundColor: '#F4F4F4',
              marginLeft: 15,
              marginRight: 15,
              marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 35) : (Platform.OS === 'android' ? 10 : 35),
              borderColor: 'grey',
              height:44,
              borderRadius: 25
            }}
            textInputStyle={{
              color: '#333333',
              marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 40) : 40,
              fontSize: 14,
              fontFamily: 'Roboto-medium',
            }}
            placeholder="Votre message ..."
          />
        )}
        renderChatFooter={() => (
          <View style={{marginVertical: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 0) : (Platform.OS === 'android' ? 5 : 20)}}/> // 20
        )}
      />
    </View>

I tried to add some marginBottom values

Answer 1

You could add this to your code:

import { Platform, KeyboardAvoidingView } from 'react-native';

{ Platform.OS === 'android' ? < KeyboardAvoidingView behavior="height" /> : null }

{ Platform.OS === 'iOS' ? < KeyboardAvoidingView behavior="height" /> : null }

Answer 2

It was because of Expo, I just removed "softwareKeyboardLayoutMode" in app.json and it fixed the issue