suffixby/react-native-image-header-scroll-view

ScrollView with an image in header which become a navbar

react-native-image-header-scroll-view

A ScrollView-like component that:

• Has a fixed image header
• Keep the image as a nav bar
• Works on iOS and Android

Installation

$ npm install react-native-image-header-scroll-view --save

Demo

|

Basic Usage

import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';

// Inside of a component's render() method:
render() {
  return (
    <HeaderImageScrollView
      maxHeight={200}
      minHeight={MIN_HEIGHT}
      renderHeader={() => (
        <Image source={require('../assets/NZ.jpg')} style={styles.image} />
      )}
    >
      <View style={{ height: 1000 }}>
        <TriggeringView onHide={() => console.log('text hidden')} >
          <Text>Scroll Me!</Text>
        </TriggeringView>
      </View>
    </HeaderImageScrollView>
  );
}

Usage (API)

All of the properties of ScrollView are supported. Please refer to the ScrollView documentation for more detail.

The HeaderImageScrollView handle also the following props. None is required :

Header

Property	Type	Default	Description
renderHeader	function	Empty view	Function which return the component to use as header. It can return background image for example.
maxHeight	number	80	Max height for the header
minHeight	number	125	Min height for the header (in navbar mode)
minOverlayOpacity	number	0	Opacity of a black overlay on the header before any scroll
maxOverlayOpacity	number	0.3	Opacity of a black overlay on the header when in navbar mode
overlayColor	string	black	Color of the overlay on the header

Foreground

Property	Type	Default	Description
renderForeground	function	Empty view	Function which return the component to use at foreground. The component is render in front of the header and scroll with the ScrollView. It can return a title for example.
renderFixedForeground	function	Empty view	Function which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay.
foregroundParallaxRatio	number	1	Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll
fadeOutForeground	bool	false	If set, add a fade out effect on the foreground when scroll up
renderTouchableFixedForeground	function	Empty view	Same as renderFixedForeground but allow to use touchable in it. Can cause performances issues on Android

TriggeringView

The module also export a TriggeringView component. It is a simple view witch accept callback called when it disappear or appear at the top of the ImageHeaderScrollView

All of the properties of View are supported.

Property	Type	Description
onBeginHidden	function	Called when the component start to be hidden at the top of the scroll view.
onHide	function	Called when the component is not displayed any more after scroll up
onBeginDisplayed	function	Called when the component begin to be displayed again after scroll down
onDisplay	function	Called when the component finished to be displayed again.
onTouchTop	function	Called when the Top of the component touch the Top of the ScrollView. (onDisplay + onBeginHidden)
onTouchBottom	function	Called when the Bottom of the component touch the Top of the ScrollView. (onHide + onBeginDisplayed)

Other open-source modules by the folks at BAM

• generator-rn-toolbox
• react-native-image-resizer
• react-native-numberpicker-dialog
• react-native-animated-picker