New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text box not visible when keyboard active using expo #680

Open
hahahatrick opened this Issue Dec 26, 2017 · 15 comments

Comments

Projects
None yet
9 participants
@hahahatrick

hahahatrick commented Dec 26, 2017

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

This comment has been minimized.

Collaborator

xcarpentier commented Dec 26, 2017

And if you remove props forceGetKeyboardHeight?

@hahahatrick

This comment has been minimized.

hahahatrick commented Dec 27, 2017

@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

@bhavna18

This comment has been minimized.

bhavna18 commented Dec 29, 2017

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

This comment has been minimized.

wmonecke commented Jan 20, 2018

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

This comment has been minimized.

davidbiller commented Jan 22, 2018

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

This comment has been minimized.

Collaborator

xcarpentier commented Jan 23, 2018

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

@watadarkstar

This comment has been minimized.

Collaborator

watadarkstar commented Mar 30, 2018

@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

@akulah91

This comment has been minimized.

akulah91 commented Mar 31, 2018

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

This comment has been minimized.

Collaborator

watadarkstar commented Apr 2, 2018

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

29955176_10156238416510120_1170559467_o

29995019_10156238417015120_559957920_o

CC: @xcarpentier

@akulah91

This comment has been minimized.

akulah91 commented Apr 9, 2018

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

@watadarkstar

This comment has been minimized.

Collaborator

watadarkstar commented Apr 9, 2018

@akulah91 THANK YOU that worked! Life saver!

@akulah91

This comment has been minimized.

akulah91 commented Apr 10, 2018

@watadarkstar most welcome..

@brunokiafuka

This comment has been minimized.

brunokiafuka commented Sep 19, 2018

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

This comment has been minimized.

nandiniparimi1107 commented Dec 17, 2018

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

@brunokiafuka

This comment has been minimized.

brunokiafuka commented Dec 17, 2018

Hi @nandiniparimi1107, here are the properties I've used in one of my projects and it's been working fine for both android and ios:

 <GiftedChat
          renderAvatarOnTop={true}
          messages={this.state.messages}
           onSend={this.onSend}
          user={{
            _id: 1,
            name: this.state.name,
            avatar: this.state.imageUrl
          }}
          listViewProps={
            {
              onEndReached: this.onEndReached,
              onEndReachedThreshold: -5,
              onMomentumScrollBegin: this.onMomentumScrollBegin
            }}
        />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment