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

Keyboard hides part of input toolbar #2491

Open
Jankaz2 opened this issue Apr 2, 2024 · 1 comment
Open

Keyboard hides part of input toolbar #2491

Jankaz2 opened this issue Apr 2, 2024 · 1 comment

Comments

@Jankaz2
Copy link

Jankaz2 commented Apr 2, 2024

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) =>
<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) => }
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, nextProps: MessageProps) => {
return props.currentMessage?.showTranslation != nextProps.currentMessage?.showTranslation
}}
/>


`

[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
@fukemy
Copy link

fukemy commented Apr 3, 2024

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

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

No branches or pull requests

2 participants