Solvedreact native gifted chat Text box not visible when keyboard active using expo

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.
screenshot_2017-12-26-18-51-19-590_host exp exponent

screenshot_2017-12-26-18-50-57-697_host exp exponent

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
21 Answers

βœ”οΈAccepted Answer

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. πŸ‘

Other Answers:

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.

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>

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

@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:

29830005_10156230493205120_1576481157_o

More Issues: