New Powerful Machines

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

    2.1.3 • Public • Published

    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

    Install

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

    DownloadsWeekly Downloads

    89

    Version

    2.1.3

    License

    MIT

    Last publish

    Collaborators

    • roycclu