HomeOur TeamContact

Image header scroll view

By Utkarsh Lubal
Published in UI
May 06, 2023
1 min read
Image header scroll view

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

Introduction

PropertyTypeDefaultDescription
renderHeaderfunctionEmpty viewFunction which return the component to use as header. It can return background image for example.
headerImageImage source Props (object or number)undefinedShortcut for renderHeader={() => <Image source={this.props.headerImage} style={{ height: this.props.maxHeight, width: Dimensions.get('window').width }} />} -example/blob/master/src/Pages/BasicUsage.js#L26)
maxHeightnumber125Max height for the header
minHeightnumber80Min height for the header (in navbar mode)
minOverlayOpacitynumber0Opacity of a black overlay on the header before any scroll
maxOverlayOpacitynumber0.3Opacity of a black overlay on the header when in navbar mode
overlayColorstringblackColor of the overlay on the header
useNativeDriverbooleanfalseUse native driver for the animation for performance improvement. A few props are unsupported at the moment if useNativeDriver=true (onScroll, ScrollComponent, renderTouchableFixedForeground)
headerContainerStyleObjectundefinedOptional styles to be passed to the container of the header component
disableHeaderGrowbooleanundefinedDisable to grow effect on the header

Foreground

PropertyTypeDefaultDescription
renderForegroundfunctionEmpty viewFunction 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.
renderFixedForegroundfunctionEmpty viewFunction which return the component to use as fixed foreground. The component is displayed with the header but not affected by the overlay.
foregroundExtrapolatestringclampOptional prop that allows override extrapolate mode for foreground. Use null to allow extrapolation, which is usefull for using foreground as bottom title
foregroundParallaxRationumber1Ration for parallax effect of foreground when scrolling. If 2, the header goes up two times faster than the scroll
fadeOutForegroundboolfalseIf set, add a fade out effect on the foreground when scroll up
renderTouchableFixedForegroundfunctionEmpty viewSame as renderFixedForeground but allow to use touchable in it.
fixedForegroundContainerStylesObjectundefinedOptional styles to be passed to the container of the fixed foreground component

Mixed

PropertyTypeDefaultDescription
ScrollViewComponentComponentScrollViewThe component to be used for scrolling. Can be any component with an onScroll props (ie. ListView, FlatList, SectionList or ScrollView)
scrollViewBackgroundColorstringwhiteBackground color of the scrollView content

TriggeringView

The module also export a TriggeringView component. It is a spy View you put on the page that will can call various callback during the scroll. It accept callback called when it disappear or appear at the top of the ImageHeaderScrollView.

All of the properties of View are supported.

PropertyTypeDescription
onBeginHiddenfunctionCalled when the component start to be hidden at the top of the scroll view.
onHidefunctionCalled when the component is not displayed any more after scroll up
onBeginDisplayedfunctionCalled when the component begin to be displayed again after scroll down
onDisplayfunctionCalled when the component finished to be displayed again.
onTouchTopfunctionCalled when the Top of the component touch the Top of the ScrollView. (onDisplay + onBeginHidden)
onTouchBottomfunctionCalled when the Bottom of the component touch the Top of the ScrollView. (onHide + onBeginDisplayed)

Installation

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

Example

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image } from 'react-native';
import { ImageHeaderScrollView, TriggeringView } from 'react-native-image-header-scroll-view';

export default function App() {
  const MIN_HEIGHT = 50; // Set the minimum height for the header image

  return (
    <View style={{ flex: 1 }}>
      <ImageHeaderScrollView
        maxHeight={200}
        minHeight={MIN_HEIGHT}
        headerImage={require("./assets/snack-icon.png")}
        renderForeground={() => (
          <View style={styles.header}>
            <TouchableOpacity onPress={() => console.log("tap!!")}>
              <Text style={styles.headerText}>Tap Me!</Text>
            </TouchableOpacity>
          </View>
        )}
      >
        <View style={styles.content}>
          <TriggeringView onHide={() => console.log("text hidden")}>
            <Text style={styles.title}>Welcome to My App</Text>
          </TriggeringView>
          <Text style={styles.paragraph}>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </Text>
          <Text style={styles.paragraph}>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
          </Text>
          <Text style={styles.paragraph}>
            Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          </Text>
        </View>
      </ImageHeaderScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    height: 150,
    justifyContent: "center",
    alignItems: "center"
  },
  headerText: {
    backgroundColor: "transparent",
    color: "#fff",
    fontSize: 24
  },
  content: {
    padding: 20
  },
  title: {
    fontSize: 36,
    fontWeight: "bold",
    marginBottom: 20
  },
  paragraph: {
    fontSize: 18,
    marginBottom: 20
  }
});

Tutorial

Coming Soon…


Previous Article
Image header scroll view fixed image
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Vertical Step indicator
Vertical Step indicator
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media