Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android - Keyboard hides InputToolBar and navigation hidden when input is focused

See original GitHub issue

Issue Description

Screenshot_1572325793

Steps to Reproduce / Code Snippets

import { GiftedChat,
  InputToolbar,
  Composer,
  LoadEarlier } from 'react-native-gifted-chat';
import React from 'react';
import { View } from 'react-native';

<View style={MessageStyle.container}> 
        <GiftedChat
          isAnimated
          showScrollBottom
          alwaysShowSend
          showUserAvatar
          renderAvatarOnTop
          showAvatarForEveryMessage
          messages={[...messages]}
          listViewProps={{
            showsVerticalScrollIndicator: false,
            style: { marginBottom: 12 },
          }}
          onSend={this.onSend}
          user={senderDetails}
          onDetail={() => true}
          renderMessage={this.renderMessage}
          renderSend={(props) => <Send {...props} status={sendMessageStatus === 'sending'} />}
          renderLoadEarlier={(props) => (
            <LoadEarlier
              {...props}
              label='Load more'
              textStyle={MessageStyle.textStyle}
              wrapperStyle={MessageStyle.loadEarlierStyle}
            />
          )}
          isLoadingEarlier={fetchMessagesStatus === 'fetching'}
          onLoadEarlier={this.onLoadEarlier}
          loadEarlier={loadEarlier}
          renderComposer={(props) => (
            <Composer {...props} textInputStyle={MessageStyle.textInputStyle} />
          )}
          renderInputToolbar={(props) => <InputToolbar {...props} />}
          placeholder="Type here"
        />
      </View>

Expected Results

Keyboard should not hide input tool bar.
Header is not visible.

Additional Information

System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 21.13 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.14.1 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 26.0.2, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-Q | Android TV Intel x86 Atom, android-Q | Intel x86 Atom, android-Q | Google APIs Intel x86 Atom, android-Q | Google APIs Intel x86 Atom_64, android-Q | Google Play Intel x86 Atom, android-Q | Google Play Intel x86 Atom_64
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7
    react-native-swift-cli: 2.3.0

iOS 13, Android 8 or above

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

2reactions

virtualLastcommented, Nov 20, 2019

OK the first thing to try is adding a <KeyboardAvoidingView /> just under <GiftedChat /> and make sure that the wrapping <View /> has a flex: 1 on it that should fix the inputBox issue.

0reactions

fukemycommented, May 1, 2022

It’s not a solution but I added offset as a work around. 2.25% looked good for me.
<KeyboardAvoidingView
          keyboardVerticalOffset={Dimensions.get("window").height * 0.025}
          behavior="height"
        >
          <GiftedChat  />
</KeyboardAvoidingView>

did u tried with other device? I think static height is not good solution