Keyboard hides part of input toolbar
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<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
try to find the issues that contain query like: "gap", "keyboard space"...
use bottomOffset