React-native-scroll-header NPM

react-native-scroll-header

Animated Header with Image & ScrollView

Installation

npm install react-native-scroll-header

examples/src

npm.io

Usage

import { HeaderScrollView } from 'react-native-scroll-header';

// ...
const _renderHeaderContent = () => (
  <View style={styles.headerContent}>{/*child here*/}</View>
);

const _renderScrollHeader = () => {
  return <View style={styles.renderHeader}>{/*child here*/}</View>;
};
//...
<HeaderScrollView
  renderImageItem={_renderHeaderContent}
  image={{
    uri: headerImage,
  }}
  renderHeader={_renderScrollHeader}
>
  //...
</HeaderScrollView>;

Props

Prop	Type	Required	Description
image	`image` or `uri`	true	image to render over header
imageStyle	image style object	false	style object for image
containerStyle	image style object	false	style object for render header container
renderImageItem	function	false	render item over header image
renderHeader	function	false	render header over scrollview with animated sticky behavior