react-native-parallax-header-image

1.0.6 • Public • Published

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

Dependencies (0)

    Dev Dependencies (4)

    Package Sidebar

    Install

    npm i react-native-parallax-header-image

    Weekly Downloads

    8

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    46.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • codiant-technology