How to add scroll to top to a FlatList in ReactNative app

How to add scroll to top to a FlatList in ReactNative app:

Scroll to top is a convenient way to show users to scroll to the top of a list. We can add one floating action button to the bottom-right corner of the list, clicking on which the user will scroll to the top. Or, we can add this functionality to the bottom tab of the current screen.

Most popular application has this feature.

We can easily configure FlatList to scroll to top or even scroll to a specific row. In this post, we will learn how to add scroll to top functionality in React Native Flatlists.

scrollToIndex() method of FlatList:

This method can be used to scroll to an item at a specific index in FlatList. It is defined as below:

scrollToIndex(params)

Where, we can have the following values in params:

animated: It is a boolean value. Default is true. It defines the list should do animation while scrolling or not.
index: It is the index to scroll the list.
viewOffset: This number value is a fixed number of pixels to offset the final position.
viewPosition: This is another number value , 0 will place the index value at top, 1 at the bottom and 0.5 will centered in the middle.

We can use this method to scroll a FlatList to the top.

React Native program:

import React, { useRef } from 'react';

import { Button, SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [...Array(100).keys()].map(item => {
  return { title: 'Hello World !! Id: ' + item, id: item }
})

const ListItem = ({ title }) => (
  <View style={styles.listItem}>
    <Text style={styles.listTitle}>{title}</Text>
  </View>
);

const App = () => {
  const flatList = useRef();

  const moveToTop = () => flatList.current.scrollToIndex({ index: 0 });

  const renderItem = ({ item }) => (
    <ListItem title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        ref={flatList}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
      <Button
        title="Press me"
        onPress={moveToTop}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  listItem: {
    padding: 5,
    alignItems: 'center',
    marginVertical: 5
  },
  listTitle: {
    fontSize: 20,
  },
});

export default App;

Here,

We have one Button below the FlatList component. We are loading 100 random data to the list.
moveToTop is a function that will move the FlatList to top. We are using scrollToIndex here. This is called if we click on the button.
flatList variable is holding the ref of the FlatList

If you run this program, it will give one output as like below:

You can scroll to the bottom of the list and if you click on the Press Me button, it will move the list to the top.

CodeVsColor

How to add scroll to top to a FlatList in ReactNative app