rnp

react-native-parallax-scroll-view-new

new version of react-native-parallax-scroll-view

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

ISC

Type Definitions

Tree-Shakeable

No?

Readme

Info

new version of react-native-parallax-scroll-view I published this because the height for the page was much longer than it needed to be.

Animated Driver

This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by default it has Animated.ScrollView

Example

import ParallaxScrollView from 'react-native-parallax-scroll-view-new';
import CustomScrollView from 'custom-scroll-view'

const AnimatedCustomScrollView = Animated.createAnimatedComponent(CustomScrollView)

render() {
  return (
    <ParallaxScrollView
      backgroundColor="blue"
      contentBackgroundColor="pink"
      parallaxHeaderHeight={300}
      // renderScrollComponent={() => <Animated.View />}
      renderScrollComponent={() => <AnimatedCustomScrollView />}
      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>
  );
}

react-native-parallax-scroll-view-new

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-new --save

Demo

iOSAndroid

Basic Usage

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

// 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>
  );
}

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.

PropertyTypeRequiredDescription
backgroundColorstringNoThe color of the header background. Defaults to #000)
backgroundSpeednumberNoThe speed factor that the background moves at relative to the foreground. Defaults to 5.
contentBackgroundColorstringNoThis is the background color of the content. (Defaults to '#fff')
fadeOutForegroundboolNoIf true, the foreground will fade out as the user scrolls up. (Defaults to true)
onChangeHeaderVisibilityfuncNoA 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.
parallaxHeaderHeightnumberYesThis is the height of parallax header.
renderBackgroundfuncNoThis renders the background of the parallax header. Can be used to display cover images for example. (Defaults to an opaque background using backgroundColor)
renderFixedHeaderfuncNoThis 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.
renderForegroundfuncNoThis renders the foreground header that moves at same speed as scroll content.
renderScrollComponentfuncNoA function with input props and outputs an Animated.ScrollView-like component in which the content is rendered. This is useful if you want to provide your own scrollable component, remember however to make it an Animated component. (See: https://github.com/exponentjs/react-native-scrollable-mixin) (By default, returns a Animated.ScrollView with the given props)
renderStickyHeaderfuncNoThis renders an optional sticky header that will stick to the top of view when parallax header scrolls up.
stickyHeaderHeightnumberIf renderStickyHeader is usedIf renderStickyHeader is set, then its height must be specified.
contentContainerStyleobjectNoThese styles will be applied to the scroll view content container which wraps all of the child views. (same as for ScrollView)
outputScaleValuenumberNoThe value for the scale interpolation output value, default 5

Latest changes

Contributing

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial