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

Example

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

export default class App extends Component {

  renderExpanded = () => (
    <View style={{ flex: 1, backgroundColor: 'pink', padding: 20, justifyContent: 'center' }}>
      <Text style={{ fontWeight: 'bold', fontSize: 22, alignSelf: 'center' }}>
        Expanded Header
      </Text>
    </View>
  );

  renderCollapsed = () => (
    <View style={{ flex: 1, backgroundColor: 'red', padding: 10, justifyContent: 'center' }}>
      <Text style={{ fontWeight: 'bold', fontSize: 14, alignSelf: 'center' }}>
        Collapsed Header
      </Text>
    </View>
  );


  render() {
    return (
      <RNScrollable 
        content={() => <Text>{content}</Text>}
        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 | <View style={{flex: 1}} /> | Yes | | expandedHeader | Renders the expanded header (full) | <View style={{flex: 1}} /> | 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 |