react-native-sticky-header-scrollview/README.md

A React Native Expo compatible sticky header scrollview with customizable header, sticky section, body, and pull-to-refresh. Built with Reanimated.

# 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

```bash
# 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`:

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

## Usage

```tsx
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

| Name           | Type               | Description                                               |
| -------------- | ------------------ | --------------------------------------------------------- |
| `header`       | `React.ReactNode`  | Component rendered at the top, which scrolls away.        |
| `sticky`       | `React.ReactNode`  | Component that sticks to the top after scrolling past.    |
| `children`     | `React.ReactNode`  | Main scrollable content.                                  |
| `headerStyle`  | `StyleProp<ViewStyle>` | Style for the header container.                      |
| `stickyStyle`  | `StyleProp<ViewStyle>` | Style for the sticky container.                      |
| `bodyStyle`    | `StyleProp<ViewStyle>` | Style for the content container.                    |
| `onRefresh`    | `() => void`       | Callback for pull-to-refresh.                            |
| `refreshing`   | `boolean`          | Pull-to-refresh loading state.                           |

## Development

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

## License

This project is licensed under the MIT License.