react-native-scroll-view-parallax

NOTE: This module requires React Native 0.8+

Installation

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

Usage

Note: Parallax.Image elements must be direct descendants of Parallax.ScrollView

import Parallax from 'react-native-scroll-view-parallax'

export default class App extends Component {
  render () {
    return (
      <Parallax.ScrollView style={styles.container}>
          <Parallax.Image
            style={styles.image}
            overlayStyle={styles.overlay}
            source={{ uri: 'http://loremflickr.com/640/480' }}
            parallaxFactor={0.5}
          >
            <Text>This is optional overlay content</Text>
          </Parallax.Image>
        ))}
      </Parallax.ScrollView>
    )
  }
}

Parallax.ScrollView Properties

Any ScrollView property and the following:

| Prop | Description | Default | |---|---|---| |scrollViewComponent|What underlying component to compose around, must be ScrollView compatible. |ScrollView|

Parallax.Image Properties

Any Image property and the following:

| Prop | Description | Default | |---|---|---| |onPress|Fired when element is tapped.|None| |imageStyle|Optional image style, width and height styles are set automatically.|None| |overlayStyle|Optional overlay style, might be useful if you want a shaded background for better readability. |None| |parallaxFactor|The speed of the parallax effect. Larger values require taller images or they will be zoomed in. |0.2|

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson