ScrollView with an image in Header which Becomes a Navbar

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

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}
      headerImage={require("../../assets/NZ.jpg")}
      renderForeground={() => (
        <View style={{ height: 150, justifyContent: "center", alignItems: "center" }} >
          <TouchableOpacity onPress={() => console.log("tap!!")}>
            <Text style={{ backgroundColor: "transparent" }}>Tap Me!</Text>
          </TouchableOpacity>
        </View>
      )}
    >
      <View style={{ height: 1000 }}>
        <TriggeringView onHide={() => console.log("text hidden")}>
          <Text>Scroll Me!</Text>
        </TriggeringView>
      </View>
    </HeaderImageScrollView>
  );
}

Result :

You can find examples in a dedicated repository.

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

Foreground

Mixed

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. You can see an exemple in the dedicated repository.

All of the properties of View are supported.

FAQ

How to remove the black image overlay

Just set the maxOverlayOpacity to 0.

<HeaderImageScrollView
  minOverlayOpacity={0}
  maxOverlayOpacity={0}
  {/* ... */}
/>

How to remove the image zomming on scroll down

You have two solutions :

1. You can use the disableHeaderGrow props. It will keep the ios elastic scroll effect.
2. You can also use the bounces={false} props from the scroll view.

Results :

Contributing

All contributions are welcomed, that might be either adding new features, doing some refaco of the exisiting code or fixing bugs.

How to contribute

1. Fork the project & clone locally. Follow the initial setup here.
2. Create a branch, naming it either a feature or bug: git checkout -b feature/that-new-feature or bug/fixing-that-bug
3. Code and commit your changes. Write a good commit message. Best would be to use git commitizen
4. Test your changes in the example repository
5. Push to the branch: git push origin feature/that-new-feature
6. Create a pull request for your branch

Other open-source modules by the folks at BAM

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

Download Details:

Author: bamlab

Live Demo: https://github.com/bamlab/react-native-image-header-scroll-view-example/blob/master/src/Pages/TvShow.js

GitHub: https://github.com/bamlab/react-native-image-header-scroll-view

#react-native #programming