DOCSEARCHbyAlgolia
Submit Docs

react-native-header

website·Indexed 31 days ago

https://react-native-header.codeherence.com

A library for React Native that provides navigation components and headers with native animation performance. It includes specialized components that extend FlatList, SectionList, ScrollView, and Shopify's FlashList and MasonryFlashList to add header support, as well as utility components like ScalingView and FadingView.

Tokens
5.9K
Snippets
11
Records
47
Agent score
43%

What's inside react-native-header

  1. Overview of SectionList with Headers component

    This component extends the standard React Native SectionList to provide integrated support for animated headers. It inherits all standard SectionList props and introduces specific props for managing a small header (rendered above the list) and a large header (rendered as the ListHeaderComponent).

  2. Overview of ScrollView with Headers

    This component extends the standard React Native ScrollView (specifically using Animated.ScrollView internally) to provide built-in support for headers. It allows for a fixed header to be rendered above the scroll view and a large header to be rendered as the first child of the scroll view, enabling native-like iOS header animations.

  3. Overview of MasonryFlashList with Headers

    The MasonryFlashList component in this library extends Shopify's MasonryFlashList to add support for integrated headers. It relies on HeaderComponent and LargeHeaderComponent props to manage animations and built-in features. The HeaderComponent is rendered above the list, while the LargeHeaderComponent is rendered as the ListHeaderComponent of the MasonryFlashList.

    Requirement: This component is only available in react-native-header version 0.14.x or higher.

  4. Overview of React Native Header features

    React Native Header is designed for easy installation and integration into React Native projects. It is built for extensibility, allowing developers to create and use custom header components. To ensure native animation performance, the library is powered by Reanimated.

  5. Overview of FlashList with Headers component

    The FlashList with Headers component extends Shopify's FlashList to add support for headers exported from the react-native-header library. It relies on HeaderComponent (rendered above the list) and LargeHeaderComponent (rendered as the ListHeaderComponent) to enable the library's built-in animations and features. This component is available in react-native-header version 0.9.x and above.

  6. Overview of FlatList with Headers component

    This component extends the standard React Native FlatList (specifically using Animated.FlatList internally) to provide integrated support for animated headers. It relies on two primary props: HeaderComponent (rendered above the list) and LargeHeaderComponent (rendered as the ListHeaderComponent). Using these specific props ensures that the library's built-in animations and features function correctly.

  8. Control child opacity and touch events with FadingView

    The FadingView component is a convenience wrapper that controls the opacity of its children using a Reanimated Shared Value. It can also automatically disable pointer events (touch events) for its children when the opacity falls below a specified threshold, preventing accidental interactions with nearly invisible elements.

  9. Set up FlashList for web platforms

    To use FlashList on the web, you must first complete the web support setup for react-native-reanimated, as the library depends on it. Additionally, ensure you are using a version of FlashList that is verified for web compatibility by checking the official FlashList documentation or performing a separate web compatibility test.

  10. Verify dependency compatibility for react-native-header

    Ensure your project meets the minimum version requirements for react-native-header and its dependencies.

    react-native-headerreact-nativereact-native-reanimatedreact-native-safe-area-context@shopify/flash-listreact-native-worklets
    0.6.x>= 0.65>= 2.11.0>= 4.1.0N/AN/A
    0.7.x>= 0.65>= 2.0.0>= 4.1.0N/AN/A
    0.8.x>= 0.65>= 2.0.0>= 4.1.0N/AN/A
    >= 0.9.x>= 0.65>= 2.0.0>= 4.1.0>= 3.2.0N/A
    >= 1.0.0>= 0.81>= 4.0.0>= 4.1.0>= 3.2.0^0.5.1

  12. Install pre-requisite libraries for react-native-header

    Before installing react-native-header, you must have the following libraries set up in your project:

    • react-native-reanimated
    • react-native-safe-area-context
    • @shopify/flash-list (Required specifically if using FlashListWithHeaders or MasonryFlashListWithHeaders components).