React native Question posted in
The official React Native documentation can be found here.

React native scrollToEnd doesn't seem to be working

The following scrollToEnd leveraging the messagesListRef isn’t working for some reason (There are no errors or warnings either):

import { useState, useRef } from "react";
import {FlatList, View, Text} from "react-native";

export default function FlatlistComponent(){
 const messagesListRef = useRef(null);

  function messageListHandler(msgsRef) {
    return msgsRef.current.scrollToEnd();
  }

return (
   <FlatList
        ref={messagesListRef}
        onLayout={() => {
           messageListHandler(messagesListRef);
        }}
        data={messagesData}
        renderItem={({item, index}) => messagesWrapper}
        keyExtractor={(message) => message.id}
   />
  )
}

I have tried placing the scrollToEnd call within a useEffect and a setTimeOut on separate occasions but neither of the ideas work.

Also, please note that nearly all the other questions and answers regarding similar issues more or less are very old and involve class components and hence deal with this issue differently. I have tried many of the solutions mentioned in them but none of those work. Kindly do not flag the question as duplicate without comparing the provided code with the code in the supposed solution and if it does match, please add a link to the thread in the comments first. Thanks!

Tags:

2

Answers


  1. 0

    I’ve been finding that scrollToEnd doesnt always scroll to the end. It could be that when scrollToEnd gets called the most recent item havent fully rendered but idk. A work for this is to scroll to the height provided from the onContentSizeChange prop (demo):

     <FlatList
  ref={messagesListRef}
  data={messagesData}
  renderItem={({ item, index }) => (
    <MessagesWrapper item={item} index={index} />
  )}
  keyExtractor={(message) => message.id}
  onContentSizeChange={(width, height) => {
    console.log('size change:', height);
    if (shouldScrollToBottom.current)
      messagesListRef.current?.scrollToOffset({ offset: height });
  }}
  ItemSeparatorComponent={() => <View style={styles.separator} />}
  pagingEnabled
  bounces={false}
/>
    Login or Signup to reply.
  2. 0 
    you can create a function to scroll to the end of a FlatList by using the scrollToEnd method
This method will works
 import React, { useRef } from 'react';
    import { View, FlatList, Text, Button } from 'react-native';
    
    const App = () => {
      const flatListRef = useRef(null);
    
      const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
    
      const scrollToEnd = () => {
        flatListRef.current.scrollToEnd({ animated: true });
      };
    
      return (
        <View style={{ flex: 1 }}>
          <FlatList
            ref={flatListRef}
            data={data}
            keyExtractor={(item) => item}
            renderItem={({ item }) => (
              <View style={{ padding: 200, borderBottomWidth: 1, borderBottomColor: '#ccc' }}>
                <Text>{item}</Text>
              </View>
            )}
          />
          <Button title="Scroll to End" onPress={scrollToEnd} />
        </View>
      );
    };
    
    export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search