react-native-gifted-chat icon indicating copy to clipboard operation
react-native-gifted-chat copied to clipboard

Not available on ios when using alignTop

Open ysng007 opened this issue 2 years ago • 7 comments

Issue Description

Not available on ios when using alignTop

Steps to Reproduce / Code Snippets

  1. use alignTop: true, isKeyboardInternallyHandled: false
<GiftedChat
                messages={messages}
                onSend={(messages) => onSend({ messages })}
                user={{
                    _id: 1
                }}
                // bottomOffset={100}
                alignTop
                renderAvatarOnTop
                alwaysShowSend
                renderInputToolbar={renderInputToolbar}
                renderComposer={renderComposer}
                renderSend={renderSend}
                renderAvatar={renderAvatar}
                renderBubble={renderBubble}
                renderSystemMessage={renderSystemMessage}
                // renderMessage={renderMessage}
                renderMessageText={renderMessageText}
                messagesContainerStyle={{ backgroundColor: 'indigo' }}
                renderQuickReplies={renderQuickReplies}
                minComposerHeight={Platform.OS === 'android' ? w(20) : w(14)}
                maxComposerHeight={Platform.OS === 'android' ? w(80) : w(64)}
                keyboardShouldPersistTaps="handled"
                onInputTextChanged={handleInteraction}
                onPress={handleInteraction}
                listViewProps={{
                    onScrollBeginDrag: handleInteraction,
                    // contentContainerStyle: { flexGrow: 1, justifyContent: 'flex-end' }
                }}
                scrollToBottom
                scrollToBottomStyle={styles.scrollToBottomStyle}
                scrollToBottomComponent={() => <Down width={w(24)} height={w(24)} />}
               //  isKeyboardInternallyHandled={false}
            />

https://github.com/FaridSafi/react-native-gifted-chat/assets/48479676/8dead0d2-837e-4a71-9868-ae475e1411f7

  1. Replace alignTop with listViewProps={{ contentContainerStyle: { flexGrow: 1, justifyContent: 'flex-end' } }}

https://github.com/FaridSafi/react-native-gifted-chat/assets/48479676/279dc813-8711-443b-8b9a-32491e03a53b

  1. set isKeyboardInternallyHandled: false

https://github.com/FaridSafi/react-native-gifted-chat/assets/48479676/4d3c0813-240d-46e7-a674-c7d50ee248dc

Expected Results

  1. Hope to use alignTop: true, Ugly at the bottom of the page when saying hello
  2. There is no gap between the keyboard and the input box

Additional Information

  • Nodejs version: v18.0.0
  • React version: 16.11.0
  • React Native version: 0.62.3
  • react-native-gifted-chat version: 2.4.0
  • Platform(s) (iOS, Android, or both?): IOS
  • TypeScript version:

ysng007 avatar Aug 15 '23 01:08 ysng007

  1. Modifying the code can solve the problem of some ios models(iphone 8, 16.1.2; iphone6s, 15.6.1,other versions not tested) GiftedChat.js
if (maxHeightRef.current !== layout.height ||
            isFirstLayoutRef.current === true) {
 +               if (Platform.OS === 'android') {
                    maxHeightRef.current = layout.height;
                    setState({
                        ...state,
                        messagesContainerHeight: keyboardHeightRef.current > 0
                            ? getMessagesContainerHeightWithKeyboard()
                            : getBasicMessagesContainerHeight(),
                    });
 +               }
        }
  1. On iphone6, 12.4.8, this bug persists and I can't find where the problem is

ysng007 avatar Aug 16 '23 01:08 ysng007

So the problem solved?

jackieZou123 avatar Aug 29 '23 09:08 jackieZou123

After searching for the reason for a few days, I found that the real reason is that there is code in the native iOS that handles the keyboard globally, and compatibility is sufficient in the native iOS code. There are no issues with this library itself.

ysng007 avatar Aug 29 '23 09:08 ysng007

thanks. Could you tell me how to deal with this problem.I haven't found a way to solve this problem yet

jackieZou123 avatar Aug 29 '23 09:08 jackieZou123

I'm not sure if your problem is the same as mine. I built a clean RN project and used GiftChat, which performed normally on iOS to eliminate RN issues. Then, I asked iOS native developers to check the problem and create a clean iOS project, which is also normal. So, let's continue to see if there are any configurations in the app. It took some time and he also found the problem. I'm only good at JS, this should not be difficult for iOS native developers. If you are not good at native development, you can seek help from other native developers.

ysng007 avatar Aug 29 '23 09:08 ysng007

I'm just as good at JS, I don't know about IOS. I ran into this problem because I was using the web side in an RN environment,This problem is fine in the context of RN

jackieZou123 avatar Aug 29 '23 09:08 jackieZou123

make a snack repo I can help u fix this

fukemy avatar Sep 08 '23 05:09 fukemy