The start of messages does not appear when the keyboard is active

[ayrtonlima7]

I've tried tinkering with various parts of the message list configuration but haven't found a solution

`import { useCallback, useEffect, useState } from 'react'
import { Bubble, GiftedChat, IMessage } from 'react-native-gifted-chat'
import { COLORS, spacing } from '@/constants'
import { ActivityIndicator } from 'react-native'
import { ChatbotInputComponent } from '@/components/chatbot-input-component/ChatbotInputComponent'

export const ChatBot = () => {
const [messages, setMessages] = useState<IMessage[]>([])
const [text, setText] = useState('')

const customBubble = (props: any) => {
    return (
        <Bubble
            {...props}
            wrapperStyle={{
                left: {
                    paddingVertical: spacing.xxxl * 2,
                    backgroundColor: COLORS.BG_TAB_COLOR
                },
                right: {
                    paddingVertical: spacing.xxxl * 2,
                    backgroundColor: COLORS.BUTTON_COLOR
                }
            }}
            textStyle={{
                right: {
                    color: COLORS.GLOBAL_COLOR
                },
                left: {
                    color: COLORS.GLOBAL_COLOR
                }
            }}
        />
    )
}

useEffect(() => {
    setMessages([
        {
            _id: 1,
            text: 'Hi!, how can I help you?',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'bot'
            }
        },
        {
            _id: 2,
            text: 'Hi!, how can I help you?',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'bot'
            }
        },
        {
            _id: 3,
            text: 'Hi!, how can I help you?',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'bot'
            }
        }
    ])
}, [])

const onSend = useCallback(() => {
    if (text.trim().length === 0) return
    const newMessage = {
        _id: Math.random().toString(),
        text: text,
        createdAt: new Date(),
        user: {
            _id: 1
        }
    }
    setMessages(previousMessages => GiftedChat.append(previousMessages, [newMessage]))
    setText('')
}, [text])

return (
    <GiftedChat
        renderLoading={() => <ActivityIndicator size={'large'} color={COLORS.GLOBAL_COLOR} />}
        renderTime={() => null}
        messages={messages}
        user={{
            _id: 1
        }}
        renderBubble={customBubble}
        renderAvatar={null}
        renderInputToolbar={() => {
            return (
                <ChatbotInputComponent
                    onPress={onSend}
                    value={text}
                    onSubmitEditing={onSend}
                    onChangeText={setText}
                />
            )
        }}
    />
)

}
`

teste.mp4

[xiongxiongjiang]

+1

[brentlecomte-itp]

Same here

[chiefchief]

the same

[cloudworkpro-sean]

+1