https://github.com/oblador/react-native-parallax

Parallax effects for React Native using Animated API
https://github.com/oblador/react-native-parallax

Last synced: 6 days ago
JSON representation

Parallax effects for React Native using Animated API

• Host: GitHub
• URL: https://github.com/oblador/react-native-parallax
• Owner: oblador
• License: mit
• Created: 2015-07-26T15:57:27.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-08-20T07:29:31.000Z (over 4 years ago)
• Last Synced: 2024-05-01T22:45:53.459Z (8 months ago)
• Language: JavaScript
• Size: 111 KB
• Stars: 578
• Watchers: 15
• Forks: 79
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-parallax ★479 - Parallax effects for React Native using Animated API (Components / UI)
• awesome-react-native-ui - react-native-parallax ★281 - Parallax effects for React Native using Animated API (Components / UI)
• awesome-reactnative-ui - react-native-parallax - 33c3-11e5-9a5a-8695642c6ee7.gif)| (Others)
• awesome-react-native - react-native-parallax ★479 - Parallax effects for React Native using Animated API (Components / UI)
• awesome-reactnative-ui - react-native-parallax - 33c3-11e5-9a5a-8695642c6ee7.gif)| (Others)
• awesome-react-native - react-native-parallax
• awesome-react-native - react-native-parallax ★479 - Parallax effects for React Native using Animated API (Components / UI)
• ReactNativeMaterials - react-native-parallax
• awesome-react-native - react-native-parallax ★479 - Parallax effects for React Native using Animated API (Components / UI)

README

        
# react-native-parallax

**NOTE: This module requires React Native 0.8+**

## Installation

```

npm install --save react-native-parallax

```

## Usage

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

```js

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

var ParallaxView = React.createClass({

  render: function() {

    return (

      

        

          This is optional overlay content

        

      

    );

  },

});

```

## `Parallax.ScrollView` Properties

Any [`ScrollView` property](http://facebook.github.io/react-native/docs/scrollview.html) and the following:

| Prop | Description | Default |

|---|---|---|

|**`scrollViewComponent`**|What underlying component to compose around, must be `ScrollView` compatible. |`ScrollView`|

## `Parallax.Image` Properties

Any [`Image` property](http://facebook.github.io/react-native/docs/image.html) 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

![Demo](https://cloud.githubusercontent.com/assets/378279/8894786/81b493f8-33c3-11e5-9a5a-8695642c6ee7.gif)

## Example 

Check full example in the `Example` folder. 

## License

[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson