React Native Parallax View screenshot

React Native Parallax View

Updated: 16 Sep 2016
1292 Stars

Parallax view for vertical scrollview/listviews with a header image and header content

Categories

Overview

The react-native-parallax-view is a library that provides a parallax view for vertical scrollview with a header image and header content. It allows you to create dynamic and visually appealing scrollable views with background images and overlaid content.

Features

  • BackgroundSource: Required prop for providing the image source to be displayed as the background.
  • Header: Optional prop for rendering additional content on top of the image with animated opacity while scrolling.
  • WindowHeight: Optional prop to set the resting height of the header image or hide the background if set to 0.
  • ScrollableViewStyle: Optional prop to customize the style of the scrollable view on top of the background.
  • ScrollViewProps: Allows you to pass additional props to the internal ScrollView component.

Installation

To install the react-native-parallax-view library, you can follow these steps:

  1. Run npm install react-native-parallax-view --save in your project directory.
  2. Import the ParallaxView component in your code: import ParallaxView from 'react-native-parallax-view';
  3. You can now use the ParallaxView component in your React Native application.

Summary

The react-native-parallax-view library is a useful tool for creating visually appealing parallax views in your React Native applications. With features like customizable background images, overlaid content, and scrolling effects, it provides a flexible solution for implementing dynamic scrollable views. By following the installation guide and utilizing the available props, users can enhance the user experience and design of their mobile applications.