backgroundSource propTypes should be:

PropTypes.oneOfType([
      PropTypes.shape({
        uri: PropTypes.string,
      }),
      // Opaque type returned by require('./image.jpg')
      PropTypes.number,
    ]),

I'm running into an error when windowHeight is declared below header. React Native throws the following error:

Here's how my code block for rendering looks:

      <ParallaxView
        backgroundSource={{uri: this.state.collection.background_image_url}}
        header={(
          <Text>
            {this.state.collection.title}
          </Text>
          )}
        windowHeight={200}
        >
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderPostCell}
          style={styles.postsListView} />
      </ParallaxView>

If I move windowHeight above header, this issue does not come up.

README.md for this repo currently suggests windowHeight being placed below header, which produces this issue for me.

I've made a PR to update README.md here: #11

when the height of ParallaxView's component is too small, some problem occurs.

How can I prevent the parallax view from covering the status bar?

Hi, I would like to programmatically scroll the scrollView to a specific position with scrollTo. This requires exposing the underlying scrollView. react-native-scrollable-decorator is probably a good way to do this?

I've seen similar issues such as #12 addressing issues with the order of header prop preventing rendering, but it seems this problem is still relevant.

Regardless of where I place it, InteractionManager.runAfterInteractions is never called in the parent component, preventing anything from loading.

<Parallax
  windowHeight={Dimensions.get('window').width * 9/16}
  header={(
    <Text>
      aaa
    </Text>
  )}>
...
</Parallax>

Is this resolved? I'm running RN 0.41.2 and iOS.

Hi there!

Upgraded to RN0.49.3 and getting node_module bugs.

in file React-native-parallax-view/parallaxView.js
I needed to add const PropTypes = require('prop-types')
const createReactClass = require('create-react-class');

Replace React.PropTypes with PropTypes
replace React.createClass with createReactClass

Appreciate any help on this issue.

Thanks!

I followed the steps here to install React Native 0.8.0-rc.

When I do cd react-native-parallax-view; npm install I get the error:

npm WARN peerDependencies The peer dependency react-native included from react-native-parallax-view will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency react-native@>= 0.4 || 0.5.0-rc1 || 0.6.0-rc included from react-native-blur will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 14.3.0
npm ERR! argv "/usr/local/Cellar/iojs/2.3.1/bin/iojs" "/usr/local/bin/npm" "install"
npm ERR! node v2.3.1
npm ERR! npm  v2.7.6
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package react-native does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@>= 0.4 || 0.5.0-rc1 || 0.6.0-rc

npm ERR! Please include the following file with any support request:
npm ERR!     ~/Development/foreign/react-native-parallax-view/npm-debug.log

i.e. react-native-blur-view doesn't depend on 0.8-rc.

The workaround is to remove the dependency on react-native-blur-view for now.

I'm not sure if you get this at all but I get an error when I run npm start after having done a npm install:

$ npm start                                                [2.1.5]

> [email protected] start /Users/fushunpoon/Development/foreign/react-native-parallax-view/example
> ./node_modules/react-native/packager/packager.sh


Could not find dependencies.
Ensure dependencies are installed - run 'npm install' from project root.

What could be causing this?

RN 0.25 deprecates { Component, PropTypes } from 'react-native' and moves them into 'react'.
RN 0.26 kills it completely. :)

Therefore

var React = require('react-native');
var {
    Dimensions,
    StyleSheet,
    View,
    ScrollView,
    Animated,
    } = React;

should be changed to

var React = require('react');
var ReactNative = require('react-native');
var {
    Dimensions,
    StyleSheet,
    View,
    ScrollView,
    Animated,
    } = ReactNative;

Thanks!

In order to make my header smaller I found the contentInset.top property. Though it works when first rendered after scrolling it does not work correctly anymore and you see a gap between the header and the content.

I got a lot of 'Warning: ScrollView doesn't take rejection well - scrolls anyway' in xcode output window.

react 0.5.0

When using the parallax with a NavigatorIOS component, the size of the navigation bar is not taken in consideration, producing the following bug:

Here you have a demo project to reproduce the issue. I'm going to send you a PR with a workaround but I'm still not sure that the solution I got is the right one.

Notice the tiny sliver of image on the right side of this background image. It comes from the "Settings" tab, which has another parallax view in it. It's flowing into my other content (because it's pre-rendered), but I don't want it to.

A simple fix is to apply an overflow: "hidden" style to the entire parallax view.

Happy to submit a pull request, but I want to make sure you think it's a problem worth fixing in Parallax View and not in my tab presenter. I did try preventing the overflow from my tab presenter, but I was unable to contain the overflow that way.

请问如何才能让标题图片显示在导航条下面，向上滑动时不会把导航条遮挡

I have noticed that the performance is not optimal compared to that of a ScrollView. I know re-rendering a view with React is meant to be inexpensive. I wonder if that is still the case with RN?

Hello!

I first must say that your parallax view works amazing and we have been using it in our project to great success. Im currently trying to expand the parallax view to also include videos and other components as we are in need of a component that can animate with layoutanimation and then be used as a parallax view. Ive gotten it to work quite well and would gladly share the code if requested. I struggle though with some hickups in performance and had some questions how your parallaxview works so much better.

So my questions is as following:

• why is the scrollresponder mixin used? Im not using it as react-native doesnt really have the need to?
• Im using purely an Animated.View instead of Animated.Image. Is this perhaps a bottle neck in performance?

Thanks again for the awesome component!

It would be great to have a Footer prop that allows for a parallax footer, revealed behind the scrollview or listview.

not working in android device (android 6.0).

rn vesion 0.38

No any error but is not working，This plugin is what need to rely on，No effect is related to animation

When I put content inside a "view" it will display, but not when my content is in a "ListView". Are there any plans to support the same style control but with a ListView for the body? @lelandrichardson

How can I use this LinearGradient component on the image?

I use react-native-parallax-view inside of a form-sheet presented modal view on iPad. This means that while the viewport area is 540pt wide, the screen actually is much wider.

At present, the image's width is given by width: screen.width, which is far too wide. this makes the image appear too 'zoomed in' and basically it has the wrong aspect ratio.

Thanks

Hi!

I have an issue on Android - basically i want to archive this (SO):

It is working on iOS, but on Android the absolute positioned view (B) is clipped. Can you provide an example how to solve this on Android?
I already tried combinations of zIndex and elevation, but unfortunately not successful.

Thanks!

It would be neat to be able to add custom styles to the window. Ie. one might want to remove or alter the bottom shadow.

Would be useful if the require isn't used until it is needed, so if you decide to enable blur it will require it and throw an error but you can otherwise use it without blur.

Getting this error when trying to run the app on an Android Virtual Device.

The package.json looks like this:
{ "name": "ZiliunApp", "version": "0.0.1", "private": true, "scripts": { "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { "react": "^16.0.0", "react-native": "^0.17.0", "react-native-parallax-view": "^2.0.6" } }

The error's coming from ParallaxView.js:25
Error Screen Link

sometimes header does not show. is invisible. Do you know this problem?

You hardcoded the backgroundColor #2e2f31 on the image component. I have a case where the image is being loaded async, which means the backgroundColor sometimes appear before the image is loaded.

Can you supply a style prop for the image component, so one can set custom styles there?

Thanks.

Hello. Is there a way to detect a click on the paralax image ?

Hey @lelandrichardson. Great project! But the last commit is almost 1.5 years old and some people have tried to submit PRs to get the project moving. Maybe you could add some of these people as contributors so the project can continue to live?

Anyone wants to step in to merge some PRs?
@fatuhoku
@patoroco
@alvaromb
@gabrielbull
@parndt
@florianeckerstorfer
@BigPun86
@dejakob
@LIGNAT
@nbolender
@roscioli

A drag and drop Component is nested inside the ParallaxScrollView.

How to ensure that the sliding of ParallaxScrollView is not triggered when dragging internal drag components

The readme mentions that this is for listviews as well as scrollviews, I was kinda curious about how this would work. If you nest the listview inside the parallax-view then onEndReached doesn't fire. If you change the scrollview to a listview in the source code then the header no longer shows up properly.

Is there something really obvious I'm missing?

when i pulled down background image did not get bigger

If you try passing refreshControl={...} (see https://facebook.github.io/react-native/docs/refreshcontrol.html), the entire scroll view is broken (cannot scroll, nothing is rendered).

Coming from css I'm used to be able to use background-position to specify an anchorpoint for the cropping that happens when you use resize mode cover.

In this component the image gets cropped at center center position. Is there a way to change this, for example to left center?

in ParallaxView.js
var screen = require('Dimensions').get('window');
should replaced with
var screen = Dimensions.get('window'); and add Dimensions inside react required objects

react-native version ^0.14.2

• found a pull-request: #22

        <ParallaxView
          backgroundSource={null}
          windowHeight={43}
          header={(
            <View style={styles.header}>
              <View style={styles.headSearch}>
                <TextInput
                  style={styles.searchTextInput}
                  placeholder="검색"
                  placeholderTextColor="#C2C2C2"
                  underlineColorAndroid='transparent'
                />
                <Ionicons style={styles.searchIcon} name="md-search" size={20} color="#C2C2C2"/>
              </View>
              <View style={styles.headFilter}>
                <TouchableOpacity>
                  <Image style={styles.filterIcon} source={require('../assets/images/ic_filter.png')}/>
                </TouchableOpacity>
              </View>
            </View>
          )}
          scrollableViewStyle={{ backgroundColor: 'red' }}
        >

But I've got error.

What's the matter?

Thing to changing is one it is backgroundSource require('image!backgroundImage') -> null.
I don't need backgroundSource and it's just white.
but before to change is error too.

And I tried to remove backgroundSource, but it's a same error (Cannot read 'number').