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

Keyboard hides part of input toolbar

Open Jankaz2 opened this issue 1 year ago • 2 comments

Issue Description

Hi, the keyboard hides part of the input toolbar like in the photo image

Steps to Reproduce / Code Snippets

My code

` const renderCustomInputToolbar = (props: InputToolbarProps<IMessage>) => <InputToolbar {...props} containerStyle={{paddingVertical: 2, flexDirection: 'column-reverse', backgroundColor: colorScheme === 'dark' ? '#35383F' : '#fff'}} accessoryStyle={{height: 'auto'}} />

const renderAccessory = () => {
    if (answerPropositionsShown && answerPropositions && answerPropositions.length > 0) {
        return <AnswerPropositionsMessageBar
            hideAnswerPropositions={hideAnswerPropositions}
            answerPropositions={answerPropositions}
            onSelectText={handleSelectText}
        />
    }
}

const renderTranslationMessageView = (props: BubbleProps<IMessage>) =>
    <MessageWithTranslation props={props}/>

const renderMessageBox = (props: MessageProps<IMessage>) =>
    <MessageBox {...props} toggleTranslation={toggleTranslation}/>

const renderBubble = (props: BubbleProps<IMessage>) =>
    <ChatBubble
        bubbleProps={props}
    />

const renderComposer = (props: ComposerProps) =>
    <Composer
        textInputStyle={{color: colorScheme === 'light' ? 'black' : 'white'}}
        disableComposer={isFetchingMessagesLoading || isRefetchingMessages || isCreatingMessage}
        placeholder={t('common.typeAMessage')}
        // @ts-ignore
        composerHeight='auto'
        multiline
        {...props}
    />

<View style={{height: '100%', backgroundColor: colorScheme === 'dark' ? '#171717' : '#fff'}}> <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}} keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0} > <GiftedChat messages={storedMessages ?? []} onSend={handleSend} user={{_id: kindeId}} renderSend={(props) => <SendBtn sendProps={props}/>} isTyping={isCreatingMessage} keyboardShouldPersistTaps="never" messagesContainerStyle={{height: '93%'}} infiniteScroll renderAvatar={null} text={selectedText} renderInputToolbar={renderCustomInputToolbar} renderAccessory={renderAccessory} renderCustomView={renderTranslationMessageView} isKeyboardInternallyHandled={false} onInputTextChanged={setSelectedText} renderMessage={renderMessageBox} renderBubble={renderBubble} renderComposer={renderComposer} onLongPress={() => {}} shouldUpdateMessage={(props: MessageProps<IMessage>, nextProps: MessageProps<IMessage>) => { return props.currentMessage?.showTranslation != nextProps.currentMessage?.showTranslation }} /> </KeyboardAvoidingView> </View> `

[FILL THIS OUT]

Additional Information

  • React Native version: 0.73.4
  • react-native-gifted-chat version: ^2.4.0
  • Platform(s) (iOS, Android, or both?): iOS (haven't tested on Android)
  • TypeScript version: ^5.3.3

Jankaz2 avatar Apr 02 '24 20:04 Jankaz2

try to find the issues that contain query like: "gap", "keyboard space"...

fukemy avatar Apr 03 '24 15:04 fukemy

use bottomOffset

anniewey avatar Jul 18 '24 07:07 anniewey