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

    Install

    npm i react-native-parallax-header-image

    DownloadsWeekly Downloads

    1

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    46.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • codiant-technology