react-native-parallax-header-image

react-native-parallax-header-image

It provides a parallax header view with an input and elegant image animation.

Getting Started

To install it follow these instrucions:

Installation

npm i react-native-parallax-header-image

Or

yarn add react-native-parallax-header-image

Example

import React from "react";
import ParallaxHeader from "react-native-parallax-header-image";
import List from "./List"; // your list component

const ParallaxHeaderDemo = () => {
  return (
    <ParallaxHeader
      headerImage={{
        uri:
          "https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg",
      }}
      leftImage={{
        uri:
          "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
      }}
      renderHeader={() => {
        return <Text>{`Hello`}</Text>;
      }}
    >
      <List />
    </ParallaxHeader>
  );
};

export default ParallaxHeaderDemo;

install dev dependencies:

Prop	Description	Default
headerImage	Valid image source of local or network image	defaultHeaderImage
leftImage	Valid image source of local or network image	defaultLeftImage
renderHeader	Any React Component	defaultHeader