How to hide sticky component on scroll down in ScrollView React Native?

If you want to hide sticky element on scrolling the list down and show the element when scrolling up, then use stickyHeaderHiddenOnScroll=true prop in ScrollView.

It works in this way –

1. When you scroll the list down, i.e. the lower elements are brought upwards, then the sticky element is hidden.
2. If you scroll the list upwards and bring the upper elements into display, then the sticky element is visible.

It works in both Android and iOS apps. Use may use it like this –

<ScrollView
  stickyHeaderIndices={[1]}
  stickyHeaderHiddenOnScroll={true}
>
  ...
</ScrollView>

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={[1]}
       stickyHeaderHiddenOnScroll={true}
      >
        <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>
          <Text>This will stick when scroll up</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,
    borderTopWidth: 1
  },
  text: {
    fontSize: 42,
  },
});

export default App;

Output –

In the above image you can see the the first phone is not showing the sticky element. This is because we are scrolling the list down. But in second phone the sticky element, View 2 is visible and the list is scrolling upwards (Upwards because View 5 is in display now which was not in first phone).

In the code we are setting stickyHeaderHiddenOnScroll={true} at line 10.

Live Demo

Conclusion

The conclusion of this topic is that we can show or hide the sticky element based on the direction of scroll. We need to use stickyHeaderHiddenOnScroll={true} prop on ScrollView component and also fulfil the requirements of Sticky headers.