i6mi6/react-native-parallax-scroll-view

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

Rodrigocs - 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';
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

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)
backgroundScrollSpeed	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)
renderContentBackground	func	No	This renders the background of the content. Can be used to display cover images for example. (Defaults to a non-visible View)
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
parallaxHeaderContainerStyle	object	No	These styles will be applied to the parallax header view content container
parallaxHeaderStyle	object	No	These styles will be applied to the parallax header view content
backgroundImageStyle	object	No	These styles will be applied to the background image header view content
stickyHeaderStyle	object	No	These styles will be applied to the sticky headerStyle view content
scrollEvent	func	No	Callback to recieve the animated scroll event values

Latest changes

0.20.1

• Added prop to change interpolated Scale Output Value

0.20.0 // Rodrigocs

• Now uses native driver, and tested with React Native 0.46.0
• Adds useNativeDriver to improve performance, but renderScrollComponent must be a Animated component ( ie: Animated.createAnimatedComponent(component))

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 Issues

Events are not passed through to the foreground view if STICKY_HEADER_HEIGHT overlaps

Steps

In ListView Talk.js wrap foreground's Image in a TouchableOpacity like this:

          renderForeground={() => (
            <View key="parallax-header" style={ styles.parallaxHeader }>
              <TouchableOpacity onPress={() => { AlertIOS.alert('Foreground Clicked!') }}>
                <Image style={ styles.avatar } source={{
                    uri: 'https://pbs.twimg.com/profile_images/2694242404/5b0619220a92d391534b0cd89bf5adc1_400x400.jpeg',
                    width: AVATAR_SIZE,
                    height: AVATAR_SIZE
                }}/>
              </TouchableOpacity>  
...

Build and run the modified code, then click on the foreground image, that is, the head in the bubble.
The result is: "Foreground Clicked"

So far, so good.
Now increase STICKY_HEADER_HEIGHT from 70 to 270:

const STICKY_HEADER_HEIGHT = 270;

(By increasing STICKY_HEADER_HEIGHT from 70 to 270 the sticky header are will overlap with the foreground are that renders the TouchableOpacity area.)

Build and run the modified code, then click on the foreground image, that is, the head in the bubble - as before.

EXPECTED

Alert popping up saying "Foreground Clicked!"

ACTUAL

No alert.

Flickering when scrolling down

Hey

I've noticed when scrolling down, a gap appears between the header background and the content. I've made a gif to demonstrate.

Gif

Code is pretty much the non-list example code, with a backgroundColor on content to make the gap more obvious. It was recorded on the simulator, on device (iPhone 6) the issue is still there but not as pronounced.

Maybe this is just a limitation of the animated view trying to keep up with the scrolling - I couldn't figure out how to fix it.

About The number of rows

I tested your ListView exmple.
and I added data more than 40.

like this...
but only 21 rows showed up.

Could you give me some comments.

class Talks extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
}).cloneWithRows([
'Simplicity Matters1',
'Hammock Driven Development2',
'Value of Values3',
'Are We There Yet?4',
'The Language of the System5',
'Design, Composition, and Performance6',
'Clojure core.async7',
'The Functional Database8',
'Deconstructing the Database9',
'Hammock Driven Development10',

            'Simplicity Matters11',
            'Hammock Driven Development12',
            'Value of Values13',
            'Are We There Yet?14',
            'The Language of the System15',
            'Design, Composition, and Performance16',
            'Clojure core.async17',
            'The Functional Database18',
            'Deconstructing the Database19',
            'Hammock Driven Development20',

            'Simplicity Matters21',
            'Hammock Driven Development22',
            'Value of Values23',
            'Are We There Yet?24',
            'The Language of the System25',
            'Design, Composition, and Performance26',
            'Clojure core.async27',
            'The Functional Database28',
            'Deconstructing the Database29',
            'Hammock Driven Development30',

            'Simplicity Matters31',
            'Hammock Driven Development32',
            'Value of Values33',
            'Are We There Yet?34',
            'The Language of the System35',
            'Design, Composition, and Performance36',
            'Clojure core.async37',
            'The Functional Database38',
            'Deconstructing the Database39',
            'Hammock Driven Development40',

            'Simplicity Matters41',
            'Hammock Driven Development42',
            'Value of Values43',
            'Are We There Yet?44',
            'The Language of the System45',
            'Design, Composition, and Performance46',
            'Clojure core.async47',
            'The Functional Database48',
            'Deconstructing the Database49',
            'Hammock Driven Development50',
        ])
    };
}

Request: event for pulldown

I would like to trigger an event when the ScrollView was pulled downward by X amount.

Is this possible now via some undocumented feature?

Fixed header not rendered when renderStickyHeader provided

I have this code:

<ParallaxScrollView
            parallaxHeaderHeight={359}
            stickyHeaderHeight={60}
            renderForeground={this.renderForeground}
            renderBackground={this.renderBackground}
            renderFixedHeader={this.renderFixedHeader}>

and the fixed header rendered as expected.
But when i add this line:
renderStickyHeader={this.renderStickyHeader}
the sticky header rendered but fixed header disappear.

Feature Request: Option to fadeout background

Hello and many thanks for the great plugin. The scrollview I have it implemented it for, has a transparent background making it so that when you scroll up the background is still visible behind the list items. I was wondering if you could add the ability to fadeout the background (same as you have for foreground).
Thanks.

Listview sticky header.

If I used a listview, can i make the header of the listview also stick after the parallax sticky header?

ListView initialListSize and pageSize doesn't work

the listView functions initialListSize and pageSize doesn't work, any idea please ?

[FATAL]: inputRange must be monotonically increasing 0,NaN

I'm using the example code available on the README.md file and obtaining the error provided above, here's the stack-trace.

This points to the block of code in index.js

translateY: interpolate(scrollY, {
    inputRange: [0, p],
    outputRange: [0, -(p / backgroundScrollSpeed)],
    extrapolateRight: 'extend',
    extrapolateLeft: 'clamp'
})

I'm running the latest version of react and react-native and running iOS 9.3 on a simulator.

Just in the event I may have made a mistake and missed it, here's the render code I'm using

render() {
        return <ParallaxScrollView>
                    backgroundColor="blue"
                    contentBackgroundColor="pink"
                    parallaxHeaderHeight={410}
                    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>
    }

ListView renderSectionHeader

First,thanks for react-native-parallax-scroll-view. It really helps me a lot.

I found that renderSectionHeader is not working. I want a fixed header in the listview. Can you give me some suggestion?

<ListView
ref="ListView"
style={styles.container}
dataSource={ this.state.dataSource }
renderRow={(rowData) => (
<View key={rowData} style={ styles.row }>
<Text style={ styles.rowText }>
{ rowData }


)}
renderSectionHeader={this.renderHeader}
enableEmptySections={true}

            renderScrollComponent={props => (
                <ParallaxScrollView
                    onScroll={onScroll}

                    headerBackgroundColor="#FFFFFF"
                    stickyHeaderHeight={ STICKY_HEADER_HEIGHT }
                    parallaxHeaderHeight={ PARALLAX_HEADER_HEIGHT }
                    backgroundSpeed={10}
                    backgroundColor="white"
                   .....

package.json: Dependency to react-native missing, examples don't compile

Problem

The examples imply react-native in ./node_modules:

The properties of React.xcodeproj show the path:

But package.json is missing and entry for react-native

Suggested fix

Add this declaration to package.json:

  "devDependencies": {
    "react-native": "0.21.0"
  }

I recommend "nailing" the version, here: use 0.21.0 instead of ^0.21.0. You never know whether 0.22.0 will break your project, or not.

JSON.stringify cannot serialize cyclic structures.

Steps

• Build and run the ListView example
• Activate Inspector
• Click into the upper half of the header (i.e. on the word "World")

OnScroll, RefreshControl and onEndReached of nested ListView not working

Same issue as #20.

My problem is the following, I have my parallax view, and inside it I have a Tab Bar, this Tab Bar is composed by 4 tabs, each scenes of each tabs contains a ListView with an InfiniteScrollView, the problem is when I reach the end the onLoadMoreAsync function isn't called, I try to pass the onScoll function thought all child, but I stil have the problem.
I also try to run the RefreshControl of my ListView, but it also not working.
Because of the position of my TabBar and it's content I can't put my ParallaxView as a ScrollComponent.

Any idea ? :)

List view and other components flickers when scrolled up

This is an observation that I came across while testing on the phone.

When I scroll up till the end(when I reach the bottom of list view), all components of the app flicker or drag.

Recorded a video for more clarity.

seems method ‘renderFixedHeader’ doesn't work

Views return by method ‘renderFixedHeader’ can't be seen ,I can't find the reason..

ListView Background color

Hey !

How can I change the background color of the ListView when we have only a few elements?

In fact, I would like to change the White and the Grey to another color.

ListView doesn't take full available height per default

Hey, first of all, thanks for an awesome component!

I have a problem regarding using it with a ListView: even when I specify a flex:1 on my ListView, the height doesn't stretch to the bottom of the page :

In red here: my ListView, that I wish would take the full available height below.

Is there a way to do so?

Cheers!

Fade out image

On the example:

To make it more "Android" like, is there any way to make this fade out into the colour of the header rather than instantly change to the base color?

'Reveal all' while scrolling before expansion happens

Just an idea I had -- Lets say you had a square image in renderBackground, and the phone is 300 wide. Then let's say you set parallaxHeaderHeight to height * 0.8 (so that it doesnt take up so much room).

It would be cool if, as you scroll down, the parallax would uncover the remaining 0.2 left of the image before 'widening' or becoming elastic. It would allow taller images to be used, so that the user can still see all the content if they want to, but it doesnt take up so much space on the initial page render.

Any idea how I might achieve this? 🍻

Modify foreground and background behaviours

I would so much appreciate, if somebody can explain on fingers:

1. How to manipulate the background so that when you pull the view down, it doesnt resize the image but instead lets you bounce with the image itself, instead of sticking to the content.

2. How to manipulate the foreground so that when you scroll up the content goes on top of the foreground content(foreground gets behind the content), instead of the content going with the foreground image to top.

If possible to explain how to do it, with refs, or props or which practise is the best? Maybe great tutorial (apart from the facebook react-native resource pages), or could you please give simple working example, manipulating with scroll view, passing props to it, accessing children, doing animation on scroll.

I would really appreciate it, thank a lot in advance.

renderBackground Image does not fill height of parallaxHeaderHeight before scrolling

Hey!

Thanks for this great react native component!

I have tested it on a simple news reader app that shows an article heading, title and HTML body. The parallax effect works fine but upon loading the background image does not fill the complete height of the header. I did not find this in the issues yet. And I wonder if there is a workaround for it. I have tried with different heights of the image and header.. no luck.

This also happens with the nested example.

Here is a GIF of my test, where you see it happen two times.

http://gfycat.com/FirstMeatyBunny

And the code for the render function (contains the HTMLView component)

    render () {
        return (
            <ParallaxScrollView
                parallaxHeaderHeight={300}
                renderBackground={() => <Image source={{ uri: this.props.post.thumbnail_images.medium_large.url, width: window.width, height: 300 }}/>}                
                >
                <View style={styles.header}>
                <Text style={styles.headerText}>
                    {this.props.post.title}
                </Text>
                </View>
              <View style={styles.loremBody}>
                <HTMLView
                    value={this.props.post.content}
                    onLinkPress={(url) => console.log('navigating to: ', url)}
                    stylesheet={styles}/>                
                <TouchableOpacity onPress={ () => {this._scrollView.scrollTo(0, 0);}}>
                  <Text style={{color: '#00A7FF'}}>
                    Scroll to top
                  </Text>
                </TouchableOpacity>
              </View>            
            </ParallaxScrollView>
        );
    }

Fade in sticky header

I was wondering that it will be great to have an option to fade in the sticky header. Or maybe do a totally abstract way for the animations.

In my use case I'm having a background which is full height and I'd like it to decrease the height as I scroll up and become a sticky header which will be for example only 200px high. Currently it looks a bit weird because I fade out my background and the sticky header has the opacity of 1 all the time, so the animation doesn't feel smooth.

decrease the height of the overall scroll view

Even if I don't have anything inside the parallaxscrollview, there is still a lot of white space that's scrollable, how can i change the height size of the overall parallaxscrollview?

Events are not passed through to the background view

Steps

In ListView Talk.js wrap background's Image in a TouchableOpacity like this:

          renderBackground={() => (
            <View key="background">
              <TouchableOpacity onPress={() => { AlertIOS.alert('Clicked!') }}>
                <Image source={{uri: 'https://i.ytimg.com/vi/P-NZei5ANaQ/maxresdefault.jpg',
                              width: window.width,
                              height: PARALLAX_HEADER_HEIGHT}}/>
              </TouchableOpacity>  
...

Build and run the modified code, then click on the background image.

EXPECTED

Alert popping up saying "Clicked!"

ACTUAL

No alert.

Section headers not sticky

Hello,
i have a problem with sticky section headers of my ListView. When used in combination with ParallaxScrollView they don't stick to the top (e.g. under the fixed header), but scroll away with the ScrollView. Does anyone have encountered the same problem? Any solution?
Thanks ;-)

onEndReached not getting called for ListView

Hey,

I'm using a ParallaxScrollView inside the renderScrollComponent of the ListView on ReactNative-Android . I've implemented onEndReached on the ListView to make sure more items are fetched as soon as the item list is about to end. But as soon as I add ParallaxScrollView in the renderScrollComponent, it renders only the first fold of items and never queries for more items. Can somebody help on this? I'm currently using React Native 0.30.0.
@jaysoo

Material design animation

Hello, Great Component!,

I was wondering if it is possible to get this animation of material design with this component:

https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B6Okdz75tqQsRVpzZG0zZGVNSXM/patterns-scrolling-techniques_flex_space_overlap_xhdpi_003.webm

Option to disable scroll acceleration?

Are you guys open to adding this. I love this parallax so much but I don't like how it upsets the expected tactile feedback of dragging.

I could attempt to add it, if you guys are open to it.

Cannot render more than on parallax scroll view in a view.

ListView example broken (onScroll)

Not sure if this is due to React Native 0.24 or not, but in the ListView example https://github.com/jaysoo/react-native-parallax-scroll-view/blob/master/examples/ListView/Talks.js#L55

This line should be onScroll={props.OnScroll} otherwise the underlying ListView will not receive proper scroll events and will not be able to update or render new rows when scrolling big lists down.

We can't detect press on the image

When I click on the image in the parallaxview nothing is detected, why ?

We can not use https://github.com/oblador/react-native-lightbox with parallax and its really bad.. :(

Background does not resize when width change (e.g rotate phone)

How to auto resize background view/image on width change (when changing between landscape/portrait mode)?

Steps to reproduce (tested only on android):

• Run listview example on protrait mode.
• Then rotate phone

sticky header rendered after ListView content (clipping)

If you have an absolutely positioned FAB Button in my ListView content that overlays the parallax foreground using negative absolute positioning. This works fine. However, when I add a sticky header, the FAB Button gets clipped by the sticky header. This suggests to me that it is rendered after the ListView content.

I'm not sure if this is required for the working of the parallax effect, but if it is not, I would recommend rendering it before the ListView content so this edge case doesn't occur.

Skicky ToolbarAndroid

Really like your component. I use it with ToolbarAndroid component. I've change animating opacity to transparent of background color to get my toolbar actually visible (title, buttons etc), but still have 3 questions:

1. How can I make elevation of my toolbar? Is it possible? Tried add it when it fully visible, but can't get it work.
2. I wanna it fully visible before I scroll out parallax background view.
3. Sticky but not fixed. How can I get it hide when scroll down, and shows up when I scroll up? But it should not hide when it still in parallax background (like it in the play market does).

Growth of ContentHeight limited when used inside a ListView

When the ParallaxScrollView is used as the ScrollComponent inside a ListView the content height (scrollable area) doesn't seem to grow beyond 1525 pixels, regardless of the size of the datasource.

Debugging the code it appears that the passed in children, wrapped in _wrapChildren is limited to 50 items (as an array of [undefined,[50],undefined]). The limit of the children seems to be related to the pageSize of the parent ListView.

Scrollable tab as content

Hi,

Really like the component! I'm trying to implement a sticky header that simply contains the navigation bar, which works fine. However, the scrollable content contains ScrollableTabView (react-native-scrollable-tab-view. I have two problems that perhaps you may have a suggestion for:

1. The scrollable tabs need to stick the top. If the page is longer than the screen, they basically scroll out of view
2. I need to scroll on the parallax ScrollView when it's still visible, but transparently switch to the scrollview in the tab when it is not. Now, the scrolling depends on where you put your finger. I tried locking scrolling on the child ScrollViews, also, to try prevent scrolling the ScrollableTabView out of sight, but this didn't work.

Any suggestions?

set parallaxHeaderHeight to adjust dynamically from content rendered inside

Any option to do that?

OnScroll, RefreshControl and onEndReached of nested ListView not working

Hi,
I'm trying to nest the following component inside the ParallaxScrollView:

                <ListView
                ref="listview"
                key={"postList"}
                dataSource={this.state.dataSource}
                renderSectionHeader={this.renderSectionHeader}
                renderRow={this.renderArticle}
                renderFooter={(this.state.connError === false) ? this.renderFooter : this.renderErrorView}
                scrollEnabled={this.state.scrollEnabled}
                onScroll={this.onScroll}
                onEndReached={this.onEndReached}
                refreshControl={
                    <RefreshControl
                    refreshing={this.state.isRefreshing}
                    onRefresh={this.onRefresh}
                    colors={['#f7913d', '#f7913d', '#f7913d']}
                    progressBackgroundColor={'#fff'}
                    />}
                    />

OnScroll, onEndReached and RefreshControl are not working.
I Also noticed that scroll properties are not changing by setting the OnScroll function on the ParallaxScrollView:

    onScroll = () => {
        console.log(this.refs.listview.scrollProperties);
        if (this.refs.listview.scrollProperties.offset + this.refs.listview.scrollProperties.visibleLength >= this.refs.listview.scrollProperties.contentLength){
            // this.onEndReached();
        }
    };

I also noticed the this.refs.ParallaxView.state is not updated at the OnScroll event, so I have no idea what is the new offset and what is the new scrollY values of the state.
Any ideas?

removeClippedSubviews not working

Coll project.

Tried to use it with ListView. removeClippedSubviews={true} has no effect. Important setting for performance improvement.

renderFixedHeader changing state in this method take much time

     renderFixedHeader={() => (
          <View key="fixed-header" style={styles.fixedSection}>
            <Text style={[styles.fixedSectionText,{borderColor: '#ccc',borderBottomWidth: 5}]}
            onPress={() => this.addToZig()}>
            {this.state.follow ? 'ADD TO ZIGLIST' : 'REMOVE FROM ZIGLIST'}

            </Text>
          </View>
        )}

Changing this.state.follow take more than 3,4 seconds to appear change

Smaller PARALLAX_HEADER_HEIGHT causing extra spacing when scrolling down

Updated PARALLAX_HEADER_HEIGHT in the example to 200, and when scrolling down, there's an increasing gap between the list items and parallax image. Anything above 350 seems fine.

renderForeground isn't displayed (RN 0.18.1)

Hello @jaysoo!

I'm trying to use your component for a RN project. I was going crazy with everything working BUT the renderForeground method, so I simply tried copy/pasting your example with listView, and this is what I've got :

I haven't changed anything in your code. My best guess is that it's related to 0.18.1, since the code is unaltered.

Could you please enlighten me on this issue?
Have a great day

Touch events not passed to Background component.

I'm attempting to use the Background component to render a Slidebox containing multiple images. The reason that I'm using the Background is because it resizes with the Parallax bounce.

Touch events are not passed to the Background component however.

Can we use this for a navbar?

Is there a way to use this with a navbar, or to relay events somehow?
My navbar is react-native-router-flux's and I'd like this effect to update the navbar's title, but those are separate components, if you're not familiar the tree would look like:

<App>
<Navbar/>
<Scene>
  ... here's where i can use this component ...
</Scene>
</App>

ListView flex grid not working

If we'd like to use the parallax scroll view as a grid, a basic example can be seen at this SO question, the style is not applied.
I believe the flex style applied to ListView somehow gets overwritten by the parallax view. This is a simplified setup:

<ListView
  ref="ListView"
  contentContainerStyle={styles.list}
  dataSource={this.state.dataSource}
  renderRow={this.renderCategories}
  renderScrollComponent={props => (
<ParallaxScrollView
    ...

On the stylesheet:

list: {
  flexDirection: 'row',
  flexWrap: 'wrap'
},
item: {
  fontSize: 18,
  margin: 5,
  width: 100
}

Is this a bug? How could we get a flex grid working within the render row of the parallax view?
Thank you.

It's backgroundScrollSpeed not backgroundSpeed

The README defines the prop as "backgroundSpeed", but looking in the source code the prop is defined as "backgroundScrollSpeed"

Sticky/Fixed header background color and opacity?

Is there a way to change the background color of the sticky and fixed headers? Was going through the props, but didn't really see an option for it.

Back button

I have one common case that I would like to do. When the the header is invisible I would still like to show just the left arrow (back button) similar to the twitter client. The common case is if you arrived at this view and you can still go back to the previous view on the nav stack.

Warning : Failed propType: Invalid prop `colors[0]`

Hi,

I tried the list view example listed in the examples folder. Here is the code I have tried.

I am getting the following warning. Please help resolve this.

What am I doing wrong? It's the exact same code I am using in my project.

Getting tween warning during install

I'm getting the following warning with I run:

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

Warning:

npm WARN EPEERINVALID [email protected] requires a peer of react-dom@^0.14.2 but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of react@>=0.14 but none was installed.