react-native-sticky-header-scrollview

A React Native (Expo compatible) sticky header ScrollView with customizable header, sticky section, body, and pull-to-refresh. Built using react-native-reanimated.

Installation

# Using npm
npm install react-native-sticky-header-scrollview react-native-reanimated

# Using yarn
yarn add react-native-sticky-header-scrollview react-native-reanimated

Note: If you are using Expo, run expo install react-native-reanimated to ensure compatibility.

Babel Plugin Setup

Add the Reanimated plugin to your babel.config.js:

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

Usage

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { StickyHeaderScrollView } from 'react-native-sticky-header-scrollview';

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // simulate async load
    setTimeout(() => setRefreshing(false), 2000);
  };

  return (
    <StickyHeaderScrollView
      header={
        <View style={styles.header}>
          <Text style={styles.headerText}>My Header</Text>
        </View>
      }
      sticky={
        <View style={styles.sticky}>
          <Text>I'm sticky!</Text>
        </View>
      }
      onRefresh={onRefresh}
      refreshing={refreshing}
      headerStyle={styles.header}
      stickyStyle={styles.sticky}
      bodyStyle={styles.content}
    >
      {Array.from({ length: 30 }).map((_, i) => (
        <Text key={i} style={styles.item}>
          Item {i + 1}
        </Text>
      ))}
    </StickyHeaderScrollView>
  );
}

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#4a90e2',
    padding: 20,
  },
  headerText: {
    color: '#fff',
    fontSize: 18,
  },
  sticky: {
    backgroundColor: '#fff',
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ddd',
  },
  content: {
    padding: 20,
  },
  item: {
    marginBottom: 15,
    fontSize: 16,
  },
});

Props

Development

1. Clone the repo
2. npm install
3. npm run build

License

This project is licensed under the MIT License.