React native gifted chat when i navigate to back from chat screen it android botton navigation bar is overlaping the bottom tabs

Author: sofian-sunnyCreated Jul 14, 2026Updated Aug 2, 2026

<KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={Platform.OS === 'ios' ? verticalScale(80) : 0} > <View style={{ flex: 1 }}> {currentChatListId ? ( <GiftedChat alwaysShowSend messages={messages} onSend={onSend} user={{ _id: uid }} wrapInSafeArea={false} isKeyboardInternallyHandled={false} bottomOffset={0} minInputToolbarHeight={verticalScale(56)} listViewProps={{ showsVerticalScrollIndicator: false, keyboardShouldPersistTaps: 'handled', contentContainerStyle: { paddingBottom: verticalScale(8), }, }} textInputProps={{ multiline: true, style: { flex: 1, minHeight: verticalScale(36), maxHeight: verticalScale(90), borderRadius: scale(18), paddingTop: Platform.OS === 'android' ? verticalScale(6) : verticalScale(8), paddingBottom: Platform.OS === 'android' ? verticalScale(6) : verticalScale(8), paddingHorizontal: scale(12), textAlignVertical: 'center', color: colors.gray_black, }, }} renderSend={renderSend} renderInputToolbar={toolbarProps => ( <InputToolbar {...toolbarProps} containerStyle={{ borderTopWidth: 0, marginHorizontal: scale(10),

                  // Fix Android 3-button navigation overlap
                  marginBottom:
                    Platform.OS === 'android'
                      ? isKeyboardVisible
                        ? verticalScale(100)
                        : Math.max(bottomInset, verticalScale(12))
                      : verticalScale(8),

                  borderRadius: scale(22),
                  backgroundColor: 'rgba(204,204,204,0.25)',
                  minHeight: verticalScale(46),
                  paddingHorizontal: scale(6),
                  paddingVertical: verticalScale(4),
                  justifyContent: 'center',
                }}
                primaryStyle={{
                  alignItems: 'center',
                  minHeight: verticalScale(42),
                }}
              />
            )}
            renderMessageText={messageProps => (
              <MessageText
                {...messageProps}
                textStyle={{
                  right: [mediumTextStyle_14_18, { color: colors.white }],
                  left: [
                    mediumTextStyle_14_18,
                    { color: colors.gray_black },
                  ],
                }}
              />
            )}
            renderBubble={bubbleProps => (
              <Bubble
                {...bubbleProps}
Image
                wrapperStyle={{
                  left: {
                    backgroundColor: colors.white,
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.22,
                    shadowRadius: 2.22,
                    elevation: scale(2),
                    shadowColor: colors.gray_black,
                  },
                  right: {
                    backgroundColor: colors.primary_color,
                    shadowOffset: { width: 0, height: 1 },
                    shadowOpacity: 0.22,
                    shadowRadius: 2.22,
                    elevation: scale(2),
                    shadowColor: colors.gray_black,
                  },
                }}
              />
            )}
          />
        ) : null}
      </View>
    </KeyboardAvoidingView>

"react-native-gifted-chat": "^3.4.0", "@react-navigation/bottom-tabs": "^7.15.9", "@react-navigation/core": "^7.17.2",

Source: FaridSafi/react-native-gifted-chat