oblador / react-native-parallax Goto Github PK

I made example from your page and Im getting error:

Do these work together? The parallax effect appears to stop working when i add parallax within the renderRow method.

in some examples I see styles.scrollView but the implementation does not appear

Hi, somehow using this as a row:

  <Parallax.ScrollView>
    <Parallax.Image
      style={{ height: 200 }}
      overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
      source={{ uri: 'http://lorempixel.com/400/200/?' + movie.id }}
    />
  </Parallax.ScrollView>

does not seem to work. Any ideas how to use the parallax with a list?

After upgrade with "react": "16.0.0-alpha.12", "react-native": "0.47.1", the example is running, however no parallax effects could be seen

How to make a unique key?

          <Parallax.Image
              onPress={Actions.About}
              style={styles.image}
              overlayStyle={styles.overlay}
              source={{ uri: 'http://shawellnessclinic.com/shamagazine/wp-content/uploads/SHA-Yoga-Class-021-720x481.jpg' }}
              parallaxFactor={PARALLAX_FACTOR}>
              <Text style={styles.title}>О НАС</Text>
          </Parallax.Image>
          <Parallax.Image
              onPress={Actions.Eco}
              style={styles.image}
              overlayStyle={styles.overlay}
              source={{ uri: 'http://shawellnessclinic.com/shamagazine/wp-content/uploads/SHA-Yoga-Class-021-720x481.jpg' }}
              parallaxFactor={PARALLAX_FACTOR}>
              <Text style={styles.title}>ЭКОПРОЕКТЫ</Text>
          </Parallax.Image>
      </Parallax.ScrollView>```

Hi, I was trying to run the basic example:

var Parallax = require('react-native-parallax');

var ParallaxView = React.createClass({
  render: function() {
    return (
      <Parallax.ScrollView>
        <Parallax.Image
          style={{ height: 200 }}
          overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
          source={{ uri: 'http://loremflickr.com/640/480' }}
        >
          <Text>This is optional overlay content</Text>
        </Parallax.Image>
      </Parallax.ScrollView>
    );
  },
});

got this error:

but this Example is OK.

Use React-Native 0.13.1

I have a warning:

"Warning: cloneWithProps(...) is deprecated. Please use React.cloneElement instead."

Hey, i'm facing this issue when implementing your package the very same way as said in the examples folder but i'm also seeing the warning below. How do i fix it since it IS setting the ref?

Warning: ParallaxScrollViewComposition:refis not a prop. Trying to access it will result inundefinedbeing returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

That's the code i'm implementing. Pasted whole document in this link and a screenshot (to simplify) below:

Warning:

Code:

I appreciate your time, thank you!

i am getting this error when i require this library in my componenet

I tried to open demo and I have got this error:

Doesn't matter what Im function im adding into <Parallax.ScrollView onScroll={() => {}}> with every row image height becoming less and less

<Parallax.ScrollView
    style={styles.scrollView}
    onScroll={() => console.log(123)}
>
          {DATA.map((story, i) => (
            <Parallax.Image
              onPress={() => this.goToArticle(story)}
              key={i}
              style={styles.image}
              overlayStyle={styles.overlay}
              source={{ uri: IMAGE_URI_PREFIX }}
              parallaxFactor={PARALLAX_FACTOR}
            >
              <Text style={styles.title}>{story.title}</Text>
            </Parallax.Image>
          ))}
          </Parallax.ScrollView>

var IMAGE_WIDTH = Dimensions.get('window').width;
var IMAGE_HEIGHT = IMAGE_WIDTH / 2;

But if Im removing onScroll everything becoming perfect

I'm getting the following error and no images are appearing:

index.ios.bundle:22968Warning: ParallaxScrollViewComposition:refis not a prop. Trying to access it will result inundefinedbeing returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Using

    "react": "15.1.0",
    "react-native": "0.28.0",

What does it mean??

I've tried a few style tweaks but can't figure it out (quite new to RN) - how would you vertically-align the images to the top, rather than centered as they are by default?

Hello ,
Is it possible to have the parallax.image inside another element that is inside the parallax.scrollview ,
I have been trying to do this, but to no avail.
I would appreciate your help .

Im trying to use the library, but parallax is not showing in my example.

Im using a listview

<ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                style={Styles.listView}
                />

And in in the renderRow method, I have this

<Parallax.Image
                    parallaxFactor={PARALLAX_FACTOR}
                    style={{ height: 90 }}
                    scrollY={this.state.parallaxScrollY}
                    source={{ uri: "http://loremflickr.com/1200/990/" + SECTIONS[random].keyword}}
                    >
                    <View style={Styles.container}>
                      .........
                    </View>
                </Parallax.Image>

The effect Im getting is this. No movement, just showed it misplaced, like the parallax was just applied without scrolling.

Any help?
Thanks!

Is it possible to make infinite scroll for paralax?

Because ScrollView is child of ListView im trying to do

<Parallax.ScrollView
style={styles.scrollView}
imageNestLevel={3}
onEndReached={this.onEndReached}>

But onEachReached not giving any callback. Thank you for help

Just curious.. I'm happy to put the time in. Thought I'd ask first if you thought it was a none-starter.

Hello,
I am trying to run the simple Usage example on the first page, but I got this error:
You must specify exactly one property per transform object. Passed properties: {"translateY":0"extrapolate":"clamp"}

I got this error when I tried to run the full example too. And I just can't seem to resolve it.

If you have time please assist me !
Version:
react-native-cli: 2.0.1
react-native: 0.42.3
Code:

import React from 'react';
import {
  Text
} from 'react-native';

import Parallax from 'react-native-parallax';

const Example = React.createClass({
    render() {
    return (
      <Parallax.ScrollView>
        <Parallax.Image
          style={{ height: 200 }}
          overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
          source={require('../assets/mainImages/2.png')}
        >
          <Text>This is optional overlay content</Text>
        </Parallax.Image>
      </Parallax.ScrollView>
    );
  },
});
Export default Example;

Thank you !

sometimes the area between parallax images show, especially in the simulator. And sometimes frames are lost and it "catches" while scrolling. Are there any known performance tweaks we can make or should be aware of? I'm trying to get it buttery smooth--it has potential, but it's not quite there yet. I'm hoping I'm simply missing something.

Lately I've been doing a lot of performance testing with Perf.start/stop etc. React Native Parallax takes the most rendering time. That's especially weird for me given I do almost nothing dynamic with it. It just loads static images from the device once and has shouldComponentUpdate always returning false.

After looking at the code, it seems the handleLayout function being called for every row may be the culprit. Have you experienced the same?

I'm thinking of solving it by passing in the width and height of each row manually, and then as far as the pageY, I assume I can calculate that by knowing the index of the row and then multiply that by the height of each row. What do you think? Would this provide significant performance benefits?

Any plans to port this to ES6?

I want to create something like the native ios app screen, but with a background that moves along with the overlaying content, but independent in terms of how much it scrolls.