Skip to content
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

Closed
hahahatrick opened this issue Dec 26, 2017 · 20 comments
Closed

Text box not visible when keyboard active using expo #680

hahahatrick opened this issue Dec 26, 2017 · 20 comments
Labels

Comments

@hahahatrick
Copy link

@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
Copy link
Collaborator

@xcarpentier xcarpentier commented Dec 26, 2017

And if you remove props forceGetKeyboardHeight?

@hahahatrick
Copy link
Author

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

@christopher-18
Copy link

@christopher-18 christopher-18 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
Copy link

@wmonecke 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
Copy link

@davidbiller 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
Copy link
Collaborator

@xcarpentier xcarpentier commented Jan 23, 2018

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

@watadarkstar
Copy link
Collaborator

@watadarkstar 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
Copy link

@akulah91 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
Copy link
Collaborator

@watadarkstar 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
Copy link

@akulah91 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
Copy link
Collaborator

@watadarkstar watadarkstar commented Apr 9, 2018

@akulah91 THANK YOU that worked! Life saver!

@akulah91
Copy link

@akulah91 akulah91 commented Apr 10, 2018

@watadarkstar most welcome..

@brunokiafuka
Copy link

@brunokiafuka 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
Copy link
Contributor

@nandiniparimi1107 nandiniparimi1107 commented Dec 17, 2018

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

@stale
Copy link

@stale stale bot commented Feb 15, 2019

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
Copy link

@hadpro24 hadpro24 commented May 21, 2019

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

chandlervdw added a commit to chandlervdw/react-native-gifted-chat that referenced this issue Sep 5, 2019
I found this in another issue and I think it should be updated here. FaridSafi#680 (comment)
@nppull
Copy link

@nppull nppull commented Sep 6, 2019

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
Copy link

@RemusRD RemusRD commented Sep 11, 2019

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
Copy link

@alexander0205 alexander0205 commented Dec 26, 2019

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
Copy link

@KrisShin KrisShin commented Dec 29, 2019

forceGetKeyboardHeight will move messgeArray up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet