How to Stick multiple components to the top of ScrollView in React Native?

In the last article we saw how to stick single element to the top of scrollview. In this one we will see how to extend that functionality and support multiple child elements.

ScrollView prop stickyHeaderIndices can accept an array of indices of those elements that you want to stick to the top.

<ScrollView
  // Child elements at index 0, 2, and 5
  // will stick to the top, one at a time
  stickyHeaderIndices={[0, 2, 5]}
>
  ...
</ScrollView>

It works in this way –

• First we list the indices of elements that we want to stick to the top.
• Then, the element which is most recent and has already scrolled from view, sticks to the top.
• If another element from list of indices come near to the top then it replaces the previous element.

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={[0, 2, 5]}
      >
        <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
  },
  text: {
    fontSize: 42,
  },
});

export default App;

Output –

In this image we can see 4 frames –

• The first frame is showing list from beginning and no header or item is stuck at the top.
• In second frame View 1 is stuck and all other views are scrolling.
• Third frame shows that View 1 is replaced by View 3 and not View 3 sticks to the top. This happened because View 3 is also in the list of indices ([0, 2, 5]) and when it reaches the top, it became the most recent view in the scroll.
• Similarly, in fourth frame, I am showing the transition of sticky headers. You can see how View 3 is sliding up to get replaced by View 6.

In the code we are setting the indices array, stickyHeaderIndices={[0, 2, 5]} in line 7.

Live Demo

Conclusion

In conclusion, we can add multiple items to the stickyHeaderIndices prop because it accepts the array of indices of child elements. The index starts from 0 to (total children -1). Each element replaces other headers depending on recency.