https://github.com/vinicarra/react-native-scrollable-header

Just scroll. Just collapse the header. Just works.
https://github.com/vinicarra/react-native-scrollable-header

header react-native reactjs

Last synced: 9 months ago
JSON representation

Just scroll. Just collapse the header. Just works.

• Host: GitHub
• URL: https://github.com/vinicarra/react-native-scrollable-header
• Owner: vinicarra
• Created: 2018-07-21T13:46:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-31T13:45:25.000Z (almost 8 years ago)
• Last Synced: 2025-01-09T11:13:01.879Z (over 1 year ago)
• Topics: header, react-native, reactjs
• Language: JavaScript
• Size: 5.74 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Scrollable Header

[![npm version](https://badge.fury.io/js/survey-monkey-streams.svg)](//npmjs.com/package/react-native-scrollable-header)

Simple but useful. I've always wanted to use this kind of header in my projects and I've tried many solutions available but most of them had issues with the core feature: the header. Based on that, I've created this EXTREME basic header that JUST scrolls the header: that's all. It's simple so anyone can read this code and make changes if needed (hopefully you don't need).

## Instalation

> npm install react-native-scrollable-header --save

## Demo

![Demo](https://i.giphy.com/media/w7waGojMm5ggjYxccv/giphy.webp)

## Example

~~~~

import RNScrollable from 'react-native-scrollable-header';

export default class App extends Component {

  renderExpanded = () => (

    

      

        Expanded Header

      

    

  );

  renderCollapsed = () => (

    

      

        Collapsed Header

      

    

  );

  render() {

    return (

       {content}}

        collapsedHeader={this.renderCollapsed}

        expandedHeader={this.renderExpanded}

        collapsedHeight={60}

        expandedHeight={200}

      />

    );

  }

}

~~~~

## Documentation

| Props                | Description                                      | Example                    | Required |

|----------------------|--------------------------------------------------|----------------------------|----------|

| content              | Renders the content of the page                  | Content       | Yes      |

| collapsedHeader      | Renders the collapsed header                     |  | Yes      |

| expandedHeader       | Renders the expanded header (full)               |  | Yes      |

| collapsedHeight      | Collapsed header height                          | 60                         | Yes      |

| expandedHeight       | Expanded header height                           | 200                        | Yes      |

| containerStyle       | The style for the whole screen                   |                            | No       |

| scrollContainerStyle | The style for ScrollView's contentContainerStyle |                            | No       |

| headerContainerStyle | The style for the top most header view           |                            | No       |