How to Stick component at footer in ScrollView in React Native?

In the previous articles, we saw how we can stick elements to the header of the scrollview. Here we will see how to stick to the footer.

We will require two props of <ScrollView> component –

• stickyHeaderIndices – To indicate the indices of the children elements that we want to stick.
• invertStickyHeaders – A boolean value to decide if we want to stick the elements to the footer.

These two props are used like this –

<ScrollView
  stickyHeaderIndices={[6]}
  invertStickyHeaders={true}
>
  ...
</ScrollView>

According to above snippet, the element at index 6 will stick at the footer.

Code Example

import React from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView, StatusBar, View } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
       style={styles.scrollView}
       stickyHeaderIndices={[6]}
       invertStickyHeaders={true}
      >
        <View style={[styles.textView, {marginTop: 40}]}>
          <Text style={styles.text}>View 1</Text>
          <Text>This will stick</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 2</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 3</Text>
          <Text>This will stick too</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 4</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 5</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 6</Text>
          <Text>This will stick after View 5 scrolled out of screen</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 7</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 8</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 9</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 10</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 11</Text>
        </View>
        <View style={styles.textView}>
          <Text style={styles.text}>View 12</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: StatusBar.currentHeight,
  },
  scrollView: {
    backgroundColor: 'pink',
    marginHorizontal: 20,
  },
  textView: {
    padding: 10,
    marginVertical: 10,
    backgroundColor: '#FFF000',
    borderBottomWidth: 1,
    borderTopWidth: 1
  },
  text: {
    fontSize: 42,
  },
});

export default App;

Output –

In the above image you can see that the View 7 is stuck to the bottom of the list. And the space of View 7 in the list, is now showing empty.

In the code we are setting stickyHeaderIndices={[6]} at line 9 and invertStickyHeaders={true} at line 10.

Live Demo

Conclusion

To stick elements at the footer of the ScrollView, we need to use stickyHeaderIndices and invertStickyHeaders props. The first one is used for declaring the elements to stick and the stick functionality as well. The second prop inverts the stick direction and put element at the footer.