How to Add Scroll to Bottom Functionality to FlatList in React Native

Everyone knows the importance of FlatList component in react native apps. FlatList helps us to huge amount of data in the most user friendly way. In this blog post, let’s check how to add a scroll to bottom functionality to FlatList.

If you are looking for how to add scroll to top option in flatlist then you may click here.

The FlatList has so many useful props and methods. We should make use of scrollToEnd method. It accepts parameters such as animated.

We have a FlatList and Pressable component In the following react native scroll to bottom example. When the button is pressed we invoke the scrolltoEnd method of FlatList using the useRef hook. Go through the code given below.

import React, {useRef} from 'react';
import {StyleSheet, Pressable, FlatList, Text, View} from 'react-native';

const App = () => {
  const flatlistRef = useRef();
  const data = [
    {
      id: '1',
      title: 'First Item',
    },
    {
      id: '2',
      title: 'Second Item',
    },
    {
      id: '3',
      title: 'Third Item',
    },
    {
      id: '4',
      title: 'Fourth Item',
    },
    {
      id: '5',
      title: 'Fifth Item',
    },
    {
      id: '6',
      title: 'Sixth Item',
    },
    {
      id: '7',
      title: 'Seventh Item',
    },
    {
      id: '8',
      title: 'Eighth Item',
    },
    {
      id: '9',
      title: 'Ninth Item',
    },
    {
      id: '10',
      title: 'Tenth Item',
    },
  ];

  const onPressFunction = () => {
    flatlistRef.current.scrollToEnd({animating: true});
  };
  return (
    <View style={styles.container}>
      <FlatList
        ref={flatlistRef}
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({item}) => <Text style={styles.title}>{item.title}</Text>}
      />
      <Pressable android_ripple style={styles.button} onPress={onPressFunction}>
        <Text style={styles.arrow}>v</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 72,
  },
  button: {
    position: 'absolute',
    width: 50,
    height: 50,
    borderRadius: 50 / 2,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
    right: 30,
    bottom: 30,
  },
  arrow: {
    fontSize: 36,
  },
});

export default App;

Following is the output of this react native tutorial.

That’s it. Thank you for reading!

Leave a Reply

%d bloggers like this: