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

Bottom Gap after keyboard hidden #1614

Closed
IronLady opened this issue Jan 18, 2020 · 13 comments
Closed

Bottom Gap after keyboard hidden #1614

IronLady opened this issue Jan 18, 2020 · 13 comments
Labels

Comments

@IronLady
Copy link

Issue Description

Seems like there is some gap after keyboard close. Before and while keyboard showing, there is no gap.

  1. Before keyboard shown
    Before Keyboard Shown

  2. Keyboard shown
    Keyboard Shown

  3. Keyboard hidden
    Keyboard Hidden

Steps to Reproduce / Code Snippets

<SafeAreaView style={styles.androidSafeArea}>
    <GiftedChat
        messages={this.state.messages} 
        onSend={messages => this.onSend(messages)}
        user={{
        _id: 1,
        }} />
    <KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={80}/>
</SafeAreaView>

Expected Results

There is no gap below the text input bar. Just like the 1st screenshot

Additional Information

  • Nodejs version: 8
  • React version: 16.9.0
  • Expo React Native version: 36.0.0
  • react-native-gifted-chat version: 0.13.0
  • Platform(s) (iOS, Android, or both?): Android 9
@technoplato
Copy link
Contributor

I realize this is on Android, but possible dupe of #1306

@msqar
Copy link

msqar commented Jan 27, 2020

@IronLady Were you able to solve it? I just see this post of yours, it happens for instance on my iPhone XS, it looks ugly, i'd like to make it fill down the bottom too.

@IronLady
Copy link
Author

@msqar Not yet. I can't find the issue. Is it really happening in iOS too?

@msqar
Copy link

msqar commented Jan 28, 2020

@IronLady yes, i created an issue for this on iOS yesterday. Here it is so you can keep track of it if you'd like #1624

Also, I noticed that if you minimize the app while the chat keyboard is opened, and go back in to the app, it adds an extra gap between input and keyboard, you need to close the keyboard, open it back and the gap is gone... it's a pretty weird bug.

@msqar
Copy link

msqar commented Jan 28, 2020

@IronLady ended up fixing it myself by again, modifying GiftChat code. I have a local forked version with all my custom modifications. Had to remove the SafeAreaView and handle every case with isIphoneX() to set different heights of input toolbox and also the overall container height to prevent overlapping between message container and input toolbar. I suggest you doing the same, otherwise it will be a looong wait until something gets released in master.

@technoplato
Copy link
Contributor

technoplato commented Jan 28, 2020 via email

@msqar
Copy link

msqar commented Jan 28, 2020

@technoplato sure but how can i share all those files? i did modifications to some files, i added stuff like when top is reached i automatically load more messages instead of having to press the button, added the scrollToBottom to work along the feature i just mentioned otherwise both wouldn't work at the same time, and i also fixed the iPhoneX marginBottom and now it works on Android/iOS. I can't tell you exactly where i did these changes as i made them not all at once, I kept working on my own version of it.

This is how it looks now for me on iPhone XS:

Imgur

@technoplato
Copy link
Contributor

technoplato commented Jan 29, 2020 via email

@shamilovtim
Copy link
Contributor

@msqar you should move your changes to a fork of this project so that:

  1. you could make a pull request and contribute to this project
  2. (most importantly) the next time you npm install your changes will be overwritten permanently. they should be stored in git on a new branch off of master in your fork.

@shamilovtim
Copy link
Contributor

if you search existing issues you will see issues relevant to the fact that you've nested your entire project in a Safeareaview but this project provides its own Safeareview. People have already encountered and worked around this and you can consult their solutions

@technoplato
Copy link
Contributor

technoplato commented Jan 29, 2020 via email

@msqar
Copy link

msqar commented Jan 29, 2020

@shamilovtim i know, that's why my changes are in my own project, I got all the files from gifted-chat and made my own version. I should make these changes in this official repo. I will whenever I have some time.

About the SafeAreaView, i don't like having a SafeAreaView, it creates that gap automatically in iPhoneX phones... that's why i had to do my own changes because i want it this way, and some people might not like it.

@stale
Copy link

stale bot commented Feb 28, 2020

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.

@stale stale bot added the wontfix label Feb 28, 2020
@stale stale bot closed this as completed Mar 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants