1.0.6 • Published 3 years ago

react-native-parallax-header-image v1.0.6

Weekly downloads
91
License
MIT
Repository
github
Last release
3 years ago

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:

PropDescriptionDefault
headerImageValid image source of local or network imagedefaultHeaderImage
leftImageValid image source of local or network imagedefaultLeftImage
renderHeaderAny React ComponentdefaultHeader