React-native-parallax-scroll-view-sadooghi NPM

Info

Updated 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-sadooghi';
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-sadooghi

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

Demo

iOS	Android

Basic Usage

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

// 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.

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 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)
`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)
`outputScaleValue`	`number`	No	The value for the scale interpolation output value, default `5`

Latest changes

Contributing

@infinitebrahmanuniverse/nolb-react-native-pa @everything-registry/sub-chunk-2586 @zalastax/nolb-react-native-pa

1.0.0

6 years ago