React-native-gifted-chat: 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 (

    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..

[brunokiafuka]

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. 👍

The code works fine but it adds a padding on iOS, so we have to check which Plaform the app is running, my fix was 👇🏾

<View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.onSend}
          user={{
              _id: 1
            }}

        />
       <KeyboardAvoidingView behavior={ Platform.OS === 'android' ? 'padding' :  null} keyboardVerticalOffset={80} />
      </View>

[nandiniparimi1107]

Its not working for me. I tried using KeyboardAvoidingView but still keyboard overlaps the text input

[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.

[hadpro24]

Why use 80 ? I must use 190 so that it is clearly visible, Is there not a value that is noted for any device?

[nppull]

Why use 80 ? I must use 190 so that it is clearly visible, Is there not a value that is noted for any device?

yes my friend, i use 150

[RemusRD]

I use it like this, seems responsive....

                <KeyboardAvoidingView style={{flex: 1}} behavior={"padding"}
                                      keyboardVerticalOffset={Header.HEIGHT + StatusBar.currentHeight} enabled={Platform.OS === 'android'} >
                    <GiftedChat
                        messages={messages}
                        onSend={newMessages => onSend(newMessages)}
                        user=
                            {{
                                _id: 1,
                            }}
                        inverted={false}
                    />
                </KeyboardAvoidingView>

[alexander0205]

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. 👍

thanks, worked form the first

[KrisShin]

forceGetKeyboardHeight will move messgeArray up