We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
Hi, the keyboard hides part of the input toolbar like in the photo
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]
The text was updated successfully, but these errors were encountered:
try to find the issues that contain query like: "gap", "keyboard space"...
Sorry, something went wrong.
use bottomOffset
bottomOffset
No branches or pull requests
Issue Description
Hi, the keyboard hides part of the input toolbar like in the photo
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'}}
/>
<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
The text was updated successfully, but these errors were encountered: