react-native-sticky-header-new

A sticky header component for React Native that allows you to have a header that remains at the top of the screen while scrolling.

Features

• Animated sticky header that hides when scrolling down.
• Fixed header that adjusts its position based on scroll.
• Easy integration into existing React Native projects.

Installation

To install the package, run:

npm install react-native-sticky-header-new

Usage Example

To use the react-native-sticky-header-new component in your project, follow this example:

import React from "react";
import { View, Text } from "react-native";
import StickyHeader from "react-native-sticky-header-new";

const App = () => {
  const stickyHeaderContent = (
    <View style={{ backgroundColor: "lightblue", padding: 10 }}>
      <Text style={{ fontSize: 20 }}>Sticky Header Content</Text>
    </View>
  );

  const fixedHeaderContent = (
    <View style={{ backgroundColor: "lightgray", padding: 10 }}>
      <Text style={{ fontSize: 20 }}>Fixed Header Content</Text>
    </View>
  );

  return (
    <StickyHeader
      stickyHeaderContent={stickyHeaderContent}
      fixedHeader={fixedHeaderContent}
    >
      <View style={{ padding: 16 }}>
        {Array.from({ length: 50 }).map((_, index) => (
          <Text key={index}>Item {index + 1}</Text>
        ))}
      </View>
    </StickyHeader>
  );
};

export default App;

Props

• stickyHeaderContent (ReactNode): Content to display in the sticky header.
• fixedHeader (ReactNode): Content to display in the fixed header.
• children (ReactNode): Content to display in the scrollable area.

Styles

You can customize the styles of the headers by modifying the styles in the StickyHeader component or by passing your own styles as props.

License

This project is licensed under the MIT License - see the LICENSE file for details.