How to scroll to the bottom in FlashList component? React Native

July 16, 2023

How to scroll to the bottom in FlashList component? React Native? For example when screen opens it automaticity reach to end of the List?

import React from 'react';
import { FlashList} from '@shopify/flash-list';

const MyComponent = ({route}) => {

   const { chat } = route.params;

  return (
    <FlatList
      data={chat}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
    />
  );
};

>Solution :

If you would like to automatically scroll to the bottom of your FlatList in React Native when your screen opens, you could use a combination of the ref prop and the scrollToEnd method.

import React, { useEffect, useRef } from 'react';
import { FlatList } from 'react-native';

const MyComponent = ({route}) => {
  const { chat } = route.params;

  const flatListRef = useRef(); // Create a ref object

  // The function renderItem() and keyExtractor() need to be defined for the FlatList
  const renderItem = ({ item }) => (
    // Your component for rendering each item
  );

  const keyExtractor = (item, index) => index.toString();

  useEffect(() => {
    setTimeout(() => {
      flatListRef.current.scrollToEnd(); // Scroll to the end of the list
    }, 0); // Use 0 for instant scroll
  }, []); // Only run once when the component mounts

  return (
    <FlatList
      ref={flatListRef} 
      data={chat}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
    />
  );
};