Text box not visible when keyboard active using expo

[hahahatrick]

Issue Description

Text bot is invisible when keyboard active in android with expo. I'm usingforceGetKeyboardHeight={true} and the message content moves correctly but there is an empty space instead of the textbox.

Steps to Reproduce / Code Snippets

<GiftedChat
        messages={this.state.messages}
        forceGetKeyboardHeight={true}
        onSend={(messages) => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />

Expected Results

The text box should be visible.

Additional Information

• Nodejs version: 8.9.3
• React version: 16.0.0
• React Native version: expo react native sdk 23.0.0
• react-native-gifted-chat version: 0.3.0
• expo version: 23.0.0
• Platform(s) (iOS, Android, or both?): Tested on android

[xcarpentier]

And if you remove props forceGetKeyboardHeight?

[hahahatrick]

@xcarpentier Then the screen does not get resized, the view remains the same and keyboard comes over it. I'm was able to fix it by removing the props forceGetKeyboardHeight and using KeyboardSpacer

[christopher-18]

I had the same issue , but in my case textInputBar was pushing above the keyboard but its view was coming partially.
<KeyboardAvoidingView behavior={'padding'} style={{flex:1}} keyboardVerticalOffset={30}> <ChatBot/> </KeyboardAvoidingView>
fixed my problem.
Here is my component where I have called GiftedChat .
Hope this helps.

[wmonecke]

Same issue here - also only on Android.

"react": "16.0.0-alpha.12",
"react-native": "0.48.3",
"react-native-gifted-chat": "^0.2.7",

[davidbiller]

Same with

"expo": "^24.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz"
(RN 0.52)
"react-native-gifted-chat": "^0.2.7",

`
return (
<GiftedChat

    messages={ChatsStore.messages.slice()}
    onSend={(messages) => this.onSend(messages)}
    user={{
      _id: UserStore.user.id,
      name: UserStore.user.firstname,
      avatar: UserStore.user.avatar
    }}
  />
);

`

[xcarpentier]

Hello,
Sorry about that.
There are almost 2 solutions to fix it:

• adding KeyboardAvoidingView after GiftedChat
• adding an opaque background status bar on app.json https://docs.expo.io/versions/latest/guides/configuration.html#androidstatusbar

[watadarkstar]

@xcarpentier What do you mean by after GiftedChat? Like this:

<View>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.onSend}
          user={{
              _id: 1
            }}
          forceGetKeyboardHeight
        />
      <KeyboardAvoidingView />
</View>

This and wrapping GiftedChat with KeyboardAvoidingView does not fix the issue. I am using:

"expo": "^25.0.0",
"react": "16.2.0",
"react-native": "0.52.0",
"react-native-gifted-chat": "^0.4.3",

Screenshot:

[akulah91]

I got it.. Just do like this..

 <View  style={{flex:1}}>
          <GiftedChat

            messages={this.state.messages} 
            onSend={messages => this.onSend(messages)}
            user={{
              _id: 1,
            }}
              ></GiftedChat>

            <KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={80}/>
        </View>

need to declare flex to parent view to make it works. 👍

[watadarkstar]

@akulah91

I was wondering if you get this issue where the messages disappear when you type things.

Here is my code:

<View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.onSend}
          user={{
              _id: 1
            }}
          forceGetKeyboardHeight
        />
        <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={80} />
      </View>

And this is what I mean:

CC: @xcarpentier

[akulah91]

@watadarkstar that because you put forceGetKeyboardHeight on your code..
I also have that line before but its working well when not use that.

[watadarkstar]

@akulah91 THANK YOU that worked! Life saver!

[akulah91]

@watadarkstar most welcome..