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
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}
/>
);
}
}