Skip to main content
Version: 1.x

createHeaderMotionScrollable

Factory function for creating reusable Header Motion-aware wrappers around custom scrollable components.

This is the recommended way to integrate third-party scrollables like FlashList or LegendList.

Signature​

function createHeaderMotionScrollable(
  Component: ScrollableComponent,
  options?: CreateHeaderMotionScrollableOptions
): HeaderMotionScrollableComponent;

Options​

OptionTypeDefaultDescription
displayNamestringAuto-generatedComponent name shown in React DevTools.
isComponentAnimatedbooleanfalseSet to true when the component is already animated (skips Animated.createAnimatedComponent).
contentContainerMode'children' | 'renderScrollComponent''renderScrollComponent'How Header Motion injects content offsetting. Use 'children' for ScrollView-like, 'renderScrollComponent' for FlatList-like.

Examples​

FlashList​

import { FlashList } from '@shopify/flash-list';
import { createHeaderMotionScrollable } from 'react-native-header-motion';

const HeaderMotionFlashList = createHeaderMotionScrollable(FlashList, {
  displayName: 'HeaderMotionFlashList',
});

LegendList​

import { AnimatedLegendList } from '@legendapp/list/reanimated';
import { createHeaderMotionScrollable } from 'react-native-header-motion';

const HeaderMotionLegendList = createHeaderMotionScrollable(
  AnimatedLegendList,
  {
    displayName: 'HeaderMotionLegendList',
    isComponentAnimated: true,
  }
);

The returned component accepts all the original component's props plus Header Motion-specific props (scrollId, headerOffsetStrategy, ensureScrollableContentMinHeight, animatedRef).