Best approach for creating chat bot feature

[katzbe]

Hi everyone,

I’m working on implementing a chat bot feature in my app using react-native-keyboard-controller, and I want to achieve behavior similar to react-native-gifted-chat where the input smoothly sticks to the keyboard when it appears.

Current setup
I currently use something like:

import { useHeaderHeight } from "@react-navigation/elements";
import React, { useRef, useState } from "react";
import {
  FlatList,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

import Message from "../../../components/Message";
import { history } from "../../../components/Message/data";

import styles from "./styles";

import type { MessageProps } from "../../../components/Message/types";
import type { ListRenderItem } from "react-native";

const reversedMessages = [...history].reverse();

const RenderItem: ListRenderItem<MessageProps> = ({ item, index }) => {
  return <Message key={index} {...item} />;
};

function ReanimatedChatFlatList() {
  const [messages, setMessages] = useState(reversedMessages);
  const [text, setText] = useState("");
  const headerHeight = useHeaderHeight();
  const ref = useRef<FlatList>(null);

  const onSendMessage = () => {
    setMessages((prevMessages) => [...prevMessages, { text }]);
  };

  return (
    <>
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={headerHeight}
        style={styles.container}
      >
        <FlatList
          ref={ref}
          contentContainerStyle={styles.contentContainer}
          data={messages}
          initialNumToRender={15}
          renderItem={RenderItem}
          onContentSizeChange={() => ref.current?.scrollToEnd()}
          onLayout={() => ref.current?.scrollToEnd()}
        />
        <View style={styles.inputContainer}>
          <TouchableOpacity onPress={onSendMessage}>
            <Text>Send</Text>
          </TouchableOpacity>
          <TextInput
            style={styles.textInput}
            value={text}
            onChangeText={setText}
          />
        </View>
      </KeyboardAvoidingView>
    </>
  );
}

export default ReanimatedChatFlatList;

Video example of current setup

Problem
I want to get rid of onContentSizeChange, onLayout and use only layout resizing but:

• Using behavior="translate-with-padding" makes layout jump or looks unnatural:
  
• Using behavior="padding" doesn’t affect at all:
  

Desired behavior
I want a behavior similar to GiftedChat:

This is code from their GiftedChat component:

return (
    <GiftedChatContext.Provider value={contextValues}>
      <ActionSheetProvider ref={actionSheetRef}>
        <View
          testID={TEST_ID.WRAPPER}
          style={[stylesCommon.fill, styles.contentContainer]}
          onLayout={onInitialLayoutViewLayout}
        >
          {isInitialized
            ? (
              <Animated.View style={[stylesCommon.fill, isKeyboardInternallyHandled && contentStyleAnim]}>
                {renderMessages}
                {inputToolbarFragment}
              </Animated.View>
            )
            : (
              renderLoading?.()
            )}
        </View>
      </ActionSheetProvider>
    </GiftedChatContext.Provider>
  )
}

So as I understand they use something super custom?

Can you share with me some ideas? How can I implement similar to gifted-chat behavior but without their library.

[katzbe]

@kirillzyusko

[kirillzyusko]

Using behavior="translate-with-padding" makes layout jump or looks unnatural:

Since you are rendering messages from the top that mode will not suit for your purposes, because that mode simply translates the view and then applies padding to reduce container size.

So as I understand they use something super custom?

This is theirs implementation:

  const keyboard = useReanimatedKeyboardAnimation()
  const contentStyleAnim = useAnimatedStyle(
    () => ({
      transform: [
        { translateY: keyboard.height.value - keyboardOffsetBottom.value },
      ],
    }),
    [keyboard, keyboardOffsetBottom]
  )

I don't understand how they calculate keyboardOffsetBottom.value, but anyway it seems like they simply move the content accordingly to keyboard height. It should result in the same behavior that you see with translate-with-padding. The only reason why it doesn't look good in your case is because you have 5-6 messages, but in their example they have a lot of messages that fills all the space of the phone window (so that messages touch the bottom part of the screen).

I honestly don't undestand why behavior="padding" doesn't work here (because it should work, example app works):

Simulator.Screen.Recording.-.iPhone.16.-.2025-07-09.at.10.27.57.mov

Simulator.Screen.Recording.-.iPhone.16.-.2025-07-09.at.10.28.42.mov

If you want to achieve gifted-chat behavior then I think you can simply use KeyboardStickyView component - it should deliver the same behavior as in gifted chat.
KeyboardAvoidingView with behavior="padding" should also work well 🤷‍♂️
translate-with-padding works well only if you have a lot of messages that takes whole height of your screen, or if you render messages from the bottom (aka Telegram style)

Let me know if you have other questions!

[katzbe]

I honestly don't undestand why behavior="padding" doesn't work here (because it should work, example app works):

Initially ReanimatedChatFlatList component from the example has behavior="translate-with-padding" and FlatList inverted and yes it works awesome and it mimics Telegram behaivor where messages fiil from the bottom

But how did you do you example ? As I see in the your first video the messages are at the top?

How can I make WhatsApp style chat where message fill from the top to the bottom )?

[kirillzyusko]

How can I make WhatsApp style chat where message fill from the top to the bottom )?

Use padding mode or write a custom solution 🤷‍♂️

But how did you do you example ? As I see in the your first video the messages are at the top?

Yes, but it's only example app. I was focusing on animation synchronizations, making sure there is no glitches etc. for cases that will be used by many users. A case when you have only few messages is kind of edge case, so developers should handle it themselves, so I didn't think on how to create full-chat-example app. I think I have it in my To Do list and eventually will do it at some point of time 👀

[katzbe]

And I think that "gift-chat" behavior by default also doesn't work as I expected, because It moves even one message up under the header.

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-07-09.at.14.55.06.mp4

This is my dream keyboard behavior )

ScreenRecording_07-09-2025.14-53-21_1.online-video-cutter.com.mp4

ScreenRecording_07-09-2025.14-54-20_1.online-video-cutter.com.mp4

[katzbe]

@kirillzyusko
Sorry to bother you, but could you share the code for your working example? Or did you just use one from the examples folder without making any changes?

[kirillzyusko]

Hey @katzbe

I just replaced translate-with-padding with padding:

import { useHeaderHeight } from "@react-navigation/elements";
import React, { useRef } from "react";
import {
  FlatList,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

import Message from "../../../components/Message";
import { history } from "../../../components/Message/data";

import styles from "./styles";

import type { MessageProps } from "../../../components/Message/types";
import type { ListRenderItem } from "react-native";

const reversedMessages = [...history].reverse();

const RenderItem: ListRenderItem<MessageProps> = ({ item, index }) => {
  return <Message key={index} {...item} />;
};

function ReanimatedChatFlatList() {
  const headerHeight = useHeaderHeight();
  const ref = useRef<FlatList>(null);

  return (
    <>
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={headerHeight}
        style={styles.container}
        testID="flat-list.container"
      >
        <FlatList
          ref={ref}
          inverted
          contentContainerStyle={styles.contentContainer}
          data={reversedMessages}
          initialNumToRender={15}
          renderItem={RenderItem}
          testID="flat-list.chat"
        />
        <TextInput style={styles.textInput} testID="flat-list.input" />
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.fab}
          testID="flat-list.scrollToTop"
          onPress={() => ref.current?.scrollToEnd()}
        >
          <View style={styles.circle}>
            <Text style={styles.icon}>↑</Text>
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    </>
  );
}

export default ReanimatedChatFlatList;

This is how it works:

ScreenRecording_08-11-2025.11-50-23_1.MP4

You should test on a real device, because there performance should be better. If you have any particular question - feel free to ask. Looking at your videos it seems like everything works as expected? The performance may be not the best, but again, you need to test on a real device.

Additionally I remember on Fabric performance was worse, because the layout was calculating every frame and it could lead to junky frames: software-mansion/react-native-reanimated#6854

[kirillzyusko]

Again, on video above everything looks desynchronised, but it happens only if you are using screen recording. Without a screen recording everything is perfectly synchronized (maybe it's iOS 26 bug, before iOS 26 even with screen recording all frames were perfectly synchronized).

Again, feel free to ask any questions about example app :) With code snippet I believe it should be clearer which code I'm testing

[katzbe]

In the code you provided, the FlatList is inverted and has contentContainer: { justifyContent: "flex-end", flexGrow: 1 }. However, when used with a messages state, new messages get added at the top, which isn’t the expected behavior.

After experimenting, I found that the only way to achieve the desired layout is to keep the FlatList inverted, but set:
contentContainer: { justifyContent: "flex-start", flexGrow: 1, transform: [{ scaleY: -1 }] }
and also apply transform: [{ scaleY: -1 }] to each .

So, my conclusion is that using an inverted FlatList is essential if you want the correct padding behavior — probably because, when inverted, the FlatList effectively has unlimited space in the upward direction.

I’m not sure if combining both inverted and transform: scaleY is a good decision ) What do you think?

Look at this:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-11.at.22.04.42.mp4

[kirillzyusko]

@katzbe the case with reversed messages is that they also should be reversed. I sued this code without any styles modifications:

import { useHeaderHeight } from "@react-navigation/elements";
import React, { useRef, useState } from "react";
import {
  FlatList,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  KeyboardAvoidingView,
  KeyboardStickyView,
} from "react-native-keyboard-controller";

import Message from "../../../components/Message";
import { history } from "../../../components/Message/data";

import styles from "./styles";

import type { MessageProps } from "../../../components/Message/types";
import type { ListRenderItem } from "react-native";

const RenderItem: ListRenderItem<MessageProps> = ({ item, index }) => {
  return <Message key={index} {...item} />;
};

function ReanimatedChatFlatList() {
  const [reversedMessages, setMessages] = useState([...history].reverse());
  const [text, setText] = useState("");
  const headerHeight = useHeaderHeight();
  const ref = useRef<FlatList>(null);

  return (
    <>
      <KeyboardAvoidingView
        behavior="padding"
        keyboardVerticalOffset={headerHeight}
        style={styles.container}
        testID="flat-list.container"
      >
        <FlatList
          ref={ref}
          inverted
          contentContainerStyle={styles.contentContainer}
          data={reversedMessages}
          initialNumToRender={15}
          renderItem={RenderItem}
          testID="flat-list.chat"
        />
        <TextInput
          style={styles.textInput}
          testID="flat-list.input"
          onChangeText={(text) => setText(text)}
        />
        <KeyboardStickyView>
          <TouchableOpacity
            activeOpacity={0.8}
            style={styles.fab}
            testID="flat-list.scrollToTop"
            onPress={() =>
              setMessages([{ sender: true, text }, ...reversedMessages])
            }
          >
            <View style={styles.circle}>
              <Text style={styles.icon}>↑</Text>
            </View>
          </TouchableOpacity>
        </KeyboardStickyView>
      </KeyboardAvoidingView>
    </>
  );
}

export default ReanimatedChatFlatList;

Don't pay an attention to a slightly broken layout but the trick is here:

setMessages([{ sender: true, text }, ...reversedMessages]) // <-- add new message as the first one

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-08-12.at.19.19.40.mov

Does it fix your problem? Do you think that I should update example app to include the functionality with updating state (adding new messages) so that it'll be easier for new devs to understand how to build chat-like interfaces?