GithubHelp home page GithubHelp logo

waldyrious / react-native-parallax-scroll-view Goto Github PK

View Code? Open in Web Editor NEW

This project forked from i6mi6/react-native-parallax-scroll-view

0.0 2.0 0.0 10.29 MB

A ScrollView-like component with parallax and sticky header support.

License: ISC License

JavaScript 100.00%

react-native-parallax-scroll-view's Introduction

react-native-parallax-scroll-view

A ScrollView-like component that:

  • Has a parallax header
  • Has an optional sticky header
  • Is composable with any component that expects a ScrollView (e.g. ListView or InfiniteScrollView)
  • Can be nested within other views
  • Works on iOS and Android

Installation

$ npm install react-native-parallax-scroll-view --save

Note: For React Native 0.19.0 and earlier, you'll want to use [email protected]. Version 0.18.0 changes the scrolling API to be compatible with React Native 0.20.0.

Demo

iOS Android

Basic Usage

import ParallaxScrollView from 'react-native-parallax-scroll-view';

// Inside of a component's render() method:
render() {
  return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      renderForeground={() => (
       <View style={{ height: 300, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Hello World!</Text>
        </View>
      )}>
      <View style={{ height: 500 }}>
        <Text>Scroll me</Text>
      </View>
    </ParallaxScrollView>
  );
}

Examples

Please refer to the ListView example provided to see how ParallaxScrollView can be used in combination with ListView.

The Android ListView example shows how you can use PullToRefreshViewAndroid with ParallaxScrollView.

There are more examples in the examples folder.

Usage (API)

All of the properties of ScrollView are supported. Please refer to the ScrollView documentation for more detail.

The ParallaxScrollView component adds a few additional properties, as described below.

Property Type Required Description
backgroundColor string No The color of the header background. Defaults to #000)
backgroundSpeed number No The speed factor that the background moves at relative to the foreground. Defaults to 5.
contentBackgroundColor string No This is the background color of the content. (Defaults to '#fff')
fadeOutForeground bool No If true, the foreground will fade out as the user scrolls up. (Defaults to true)
onChangeHeaderVisibility func No A callback function that is invoked when the parallax header is hidden or shown (as the user is scrolling). Function is called with a boolean value to indicate whether header is visible or not.
parallaxHeaderHeight number Yes This is the height of parallax header.
renderBackground func No This renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using backgroundColor)
renderFixedHeader func No This renders an optional fixed header that will always be visible and fixed to the top of the view (and sticky header). You should set its height and width appropriately.
renderForeground func No This renders the foreground header that moves at same speed as scroll content.
renderScrollComponent func No A function with input props and outputs a ScrollView-like component in which the content is rendered. This is useful if you want to provide your own scrollable component. (See: https://github.com/exponentjs/react-native-scrollable-mixin) (By default, returns a ScrollView with the given props)
renderStickyHeader func No This renders an optional sticky header that will stick to the top of view when parallax header scrolls up.
stickyHeaderHeight number If renderStickyHeader is used If renderStickyHeader is set, then its height must be specified.
contentContainerStyle object No These styles will be applied to the scroll view content container which wraps all of the child views. (same as for ScrollView)

Latest changes

0.19.0

  • Fixes compatibility with React Native 0.27.2
  • Adds contentContainerStyle prop to style scroll container (thanks @alaycock)

0.18.1

  • Fixes error when inspecting the sticky header due to cyclical object structure on style (#23)

0.18.0 (Compatibility with React Native 0.20.0)

  • Breaking: Removes ParallaxScrollView#scrollWithoutAnimationTo since this has been deprecated in React Native. If you used this method previously, use scrollTo instead.
  • Adds ParallaxScrollView#getScrollableNode method, which is required in React Native 0.20.0 for components implementing ScrollView interface.

See full changelog here.

Contributing

I welcome contributions! Please open an issues if you have any feature ideas or find any bugs. I also accept pull requests with open arms. I will go over the issues when I have time. :)

react-native-parallax-scroll-view's People

Contributors

alaycock avatar dmfrancisco avatar generalchaos avatar jaysoo avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.