# How to scroll to bottom or first message programatically on the react native group channel fragment

**URL:** <https://community.sendbird.com/t/how-to-scroll-to-bottom-or-first-message-programatically-on-the-react-native-group-channel-fragment/10806>\
**Category:** React Native\
**Tags:** group-channel, react-native\
**Created:** [March 18, 2025, 10:35am UTC](https://community.sendbird.com/t/how-to-scroll-to-bottom-or-first-message-programatically-on-the-react-native-group-channel-fragment/10806 "2025-03-18T10:35:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Albert\_Alises](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/albert_alises/32/5798_2.png) [@Albert\_Alises](https://community.sendbird.com/u/Albert_Alises)\
**Post date:** [March 18, 2025, 10:35am UTC](https://community.sendbird.com/t/how-to-scroll-to-bottom-or-first-message-programatically-on-the-react-native-group-channel-fragment/10806/1 "2025-03-18T10:35:40Z")

</div>

**[Problem/Question]**  
Hello, I’m having issues trying to programatically **scroll to the bottom of the messages flat list** on the React Native UIKit, [the functionality seems to exist on the native Android UIkit?](https://sendbird.com/docs/chat/uikit/v3/android-view/ref/-sendbird-u-i-kit/com.sendbird.uikit.modules.components/-open-channel-message-list-component/scroll-to-bottom.html), I’m using a Group channel fragment like:

```auto
import {
  createGroupChannelFragment,
  GroupChannelProps,
  useSendbirdChat,
} from "@sendbird/uikit-react-native";

  const GroupChannelFragment = useMemo(() => createGroupChannelFragment({}), []);

<GroupChannelFragment
      channel={channel}
      enableTypingIndicator
      flatListProps={{
        bounces: true,
        keyExtractor: messageIdExtractor,
        showsVerticalScrollIndicator: false,
      }}
    />

```

My problem is that I want to have a button somewhere or a function that **programatically scrolls to the bottom of the flat list of messages** , so essentially having some scrollToFirst or scrollToBottom method on the group channel that I could use to achieve that programatically… how could I do it?

I’ve tried somehow getting ahold of the internal flat list using a reference and scrolling to the bottom of it… but that does not work, and typescript complains that ref is not a flat list property…

```auto
 flatListProps={{
        // @ts-expect-error we're passing the ref to the FlatList
        ref: flatListRef,
        bounces: true,
        keyExtractor: messageIdExtractor,
        showsVerticalScrollIndicator: false,
        style: styles.messageList,
        onContentSizeChange: () => {
            setTimeout(() => {
              flatListRef.current?.scrollToEnd({ animated: true });
            }, 300);
        },
      }}

```

* * *

// If problem, please fill out the below. If question, please delete.  
**[UIKit Version]**  
` "@sendbird/uikit-react-native": "^3.8.6",`

**[Current impact]**  
I have a custom typing indicator and I want that when it appears (I place it on a custom render message) for the flat list to scroll automatically to the buttom.

---

<div class="post-metadata">

**Author:** ![Abdul\_Wahab\_Asif](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/abdul_wahab_asif/32/6030_2.png) [@Abdul\_Wahab\_Asif](https://community.sendbird.com/u/Abdul_Wahab_Asif)\
**Post date:** [January 13, 2026, 7:57am UTC](https://community.sendbird.com/t/how-to-scroll-to-bottom-or-first-message-programatically-on-the-react-native-group-channel-fragment/10806/2 "2026-01-13T07:57:06Z")

</div>

Hey, @Albert_Alises Hope you are doing well. Were you able to find the solution? facing same issue.