react-native-scrollable-header v1.0.5

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