react-native-sticky-header-footer-scroll-view

A <StickyHeaderFooterScrollView> wrapper that

• Takes a scrollview or listview
• Or any component and make it scrollable
• Takes a header and/or a footer and make them sticky
• Works on iOS and Android

Add it to your project

iOS and Android

yarn add react-native-sticky-header-footer-scroll-view

or

npm install react-native-sticky-header-footer-scroll-view --save

Then:

• Whenever you want to use it within React code you can:

import StickyHeaderFooterScrollView from 'react-native-sticky-header-footer-scroll-view';

Demo

Basic Usage

import StickyHeaderFooterScrollView from 'react-native-sticky-header-footer-scroll-view';

//Inside of a component's render() method:
render() {
  return (
    <StickyHeaderFooterScrollView
      renderStickyHeader={() => (
        <View style={...}>
          <Text>{`I'm a sticky header`}</Text>
        </View>
      )}
      renderStickyFooter={() => (
        <View style={...}>
          <Text>{`I'm a sticky footer`}</Text>
        </View>
      )}
    >
      <View style={{ height: 1200, backgroundColor: '#eee' }}>
        <Text>View made scrollable</Text>
      </View>
    </StickyHeaderFooterScrollView>
  )
}

| Prop | Description | Default | |---|---|---| |renderStickyHeader|A renderable function for the sticky header. |null| |renderStickyFooter|A renderable function for the sticky footer. |null| |additionalHeightReserve|A number of pixels to adjust for height taken out of screen by top or bottom navigation bars. |0| |makeScrollable|Set true to make the component scrollable. (Do not set true if the input is a listview or flatlist) |true| |fitToScreen|Whether to fill in space when children height is shorter than visible height. |true| |contentContainerStyle|Any style prop to pass to the body. |null| |contentBackgroundColor|Background color of the main component. |transparent|

Example

cd example/StickyHeaderFooter

yarn

npm start

react-native run-ios or react-native run-android

Latest changes

2.1.0

• Upgrades to React 16.0.0-beta.5 and RN 0.49.0

2.0.7

• Fixes an issue to work with listview

2.0.4

• Fixes an issue with footer spacer
• Fixes a bug in the example