Flatlist content flicker when 2-3 message

[sandeepsuthar]

Describe the bug
Creating chat screen with KeyboardAvoidingView and it's working fine with large data but if user has 2-3 messages then flicker content.

Code snippet
`
const ChatListView = (props: Props) => {
const { messages, onSendMessage } = props;
const headerHeight = useHeaderHeight();
const { bottom } = useSafeAreaInsets()
const ref = useRef(null);

return (
<>
<KeyboardAvoidingView
behavior={'translate-with-padding'}
keyboardVerticalOffset={headerHeight}
style={styles.container}
testID="flat-list.container"
>
{
messages.length > 0 ?

:
}


</>
);
}
`
Repo for reproducing
You can test example given by team with 2-3 messages only.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-05-21.at.21.53.28.mp4

Smartphone (please complete the following information):

• Desktop OS: [MacOS 15.1.1]
• Device: [e.g. iPhone13]
• OS: [e.g. iOS 18.4.1]
• RN version: [e.g. 0.73.6]
• RN architecture: [paper/fabric]
• JS engine: [Hermes]
• Library version: [e.g. 1.17.2]

[kirillzyusko]

Hey @sandeepsuthar

I think it's kind of expected. The translate-with-padding works in this way - we move everything by applying translate, and when keyboard finish its animation we apply padding so that container gets resized.

It perfectly works if you have messages that begins from the bottom of ScrollView (aka Telegram style).

If you want to place messages in the top of ScrollView (aka WhatsApp style), then you should use a different mode (like padding).

Also you can write conditional code, i. e. if you have 10+ messages (so that messages touch the bottom of ScrollView) or if ScrollView content can be scrollable), then use translate-with-padding.

Otherwise fallback to padding.

Do you think that documentation should be somehow changed to indicate that limitation?

[sandeepsuthar]

@kirillzyusko I am using padding and working fine with SectionList with inverted props. I need section header like Today and Yesterday but due to inverted mode it's showing from bottom. Alternatively using section footer view but that is not sticky, please suggest any solution that has sticky date for section and also start content from bottom like inverted.

[kirillzyusko]

I added a new component KeyboardChatScrollView and published beta release 1.21.0-beta.3 that has this component. Using KeyboardAvoidingView is fundamentally wrong for chat interfaces, so for chat-apps it's better to use a specialized KeyboardChatScrollView component designed for specific functionality.

Documentation can be found here and here.

I'll close this issue. Feel free to test this component and report any new issues that you discover 🙌