How to Stick a single component at top of ScrollView in React Native?

React Native ScrollView provides stickyHeaderIndices prop which is used to stick components at the top.

This prop accepts an array of indices of children components of ScrollView, starting from 0. It works in both Android and iOS phones. In this article we will focus on sticking single item only.

It is used like this –

<ScrollView
  stickyHeaderIndices={[0]}
>
  ...
</ScrollView>

In the above snippet we are passing [0] as the value of stickyHeaderIndices prop. This means that the element at position 0 will stick to the top of the scrollview when the list surpass it’s position.

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]}
      >
        <View style={[styles.textView, {marginTop: 40}]}>
          <Text style={styles.text}>View 1</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>
        </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>
        </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 the above image you can see that View 1 is the first child of the list. The first phone shows that it’s not stick to the top yet because the list is not scrolled. But as we start scrolling, View 1 stick to the top, as shown in second phone. Why View 1 is sticked? Because we are setting index 0 in stickyHeaderIndices prop.

In the code we are setting stickyHeaderIndices={[0]} at line 9

Live Demo

Conclusion

If you want to stick a single child element at the top of ScrollView, you need to pass it’s index in stickyHeaderIndices prop. It accepts an array of indices and works in Android as well as iOS.