React-native-sticky-header-footer-scroll-view NPM

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

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

npm.io

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`