Initial commit.

.gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Joel Arvidsson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

ParallaxImage.js

@@ -0,0 +1,117 @@
+/**
+ * @providesModule ParallaxImage
+ */
+'use strict';
+
+var _ = require('lodash');
+var React = require('react-native');
+var {
+  View,
+  Animated,
+  StyleSheet,
+  Dimensions,
+} = React;
+
+var flattenStyle = require('react-native/Libraries/StyleSheet/flattenStyle');
+var StyleSheetPropType = require('react-native/Libraries/StyleSheet/StyleSheetPropType');
+var ViewStylePropTypes = require('react-native/Libraries/Components/View/ViewStylePropTypes');
+var ImageStylePropTypes = require('react-native/Libraries/Image/ImageStylePropTypes');
+
+var WINDOW_HEIGHT = Dimensions.get('window').height;
+
+var ParallaxImage = React.createClass({
+  propTypes: {
+    scrollY:        React.PropTypes.object.isRequired,
+    parallaxFactor: React.PropTypes.number,
+    overlayStyle:   StyleSheetPropType(ViewStylePropTypes),
+  },
+
+  getDefaultProps: function() {
+    return {
+      parallaxFactor: 0.2,
+    };
+  },
+
+  getInitialState: function() {
+    return {
+      offset: 0,
+      height: 0,
+      width:  0,
+    };
+  },
+
+  // Needed to be able to wrap the image with a Touchable*
+  setNativeProps: function(nativeProps) {
+    this._root.setNativeProps(nativeProps);
+  },
+
+  // Measure again since onLayout event won't pass the offset
+  handleLayout: function(event) {
+    this._root.measure(this.handleMeasure);
+  },
+
+  handleMeasure: function(ox, oy, width, height, px, py) {
+    this.setState({
+      offset: py,
+      height,
+      width,
+    });
+  },
+
+  render: function() {
+    var { offset, width, height } = this.state;
+    var { scrollY, parallaxFactor } = this.props;
+    var parallaxPadding = height * parallaxFactor;
+
+    var imageStyle = _.pick(flattenStyle(this.props.style), Object.keys(ImageStylePropTypes));
+    imageStyle.height = height + parallaxPadding * 2;
+    imageStyle.width = width;
+    if(scrollY) {
+      imageStyle.transform = [
+        {
+          translateY:   scrollY.interpolate({
+          inputRange:   [offset - height, offset + WINDOW_HEIGHT + height],
+          outputRange:  [parallaxPadding * -1, parallaxPadding]}),
+          extrapolate:  'clamp',
+        },
+      ];
+    } else {
+      imageStyle.transform = [
+        { translateY: parallaxPadding * -1 },
+      ];
+    }
+    var props = _.omit(this.props, 'style', 'children', 'scrollY', 'parallaxFactor');
+    return (
+      <View
+        ref={component => this._root = component}
+        style={[this.props.style, styles.container]}
+        onLayout={this.handleLayout}
+      >
+        <Animated.Image
+          {...props}
+          style={imageStyle}
+        />
+        <View style={[styles.overlay, this.props.overlayStyle]}>
+          {this.props.children}
+        </View>
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  overlay: {
+    flex: 1,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+module.exports = ParallaxImage;

ParallaxMixin.js

@@ -0,0 +1,24 @@
+/**
+ * @providesModule ParallaxMixin
+ */
+'use strict';
+
+var React = require('react-native');
+var {
+  Animated,
+} = React;
+
+var ParallaxMixin = {
+  componentWillMount: function() {
+    this.images = [];
+    var scrollY = new Animated.Value(0);
+    this.setState({
+      parallaxScrollY: scrollY,
+    });
+    this.onParallaxScroll = Animated.event(
+      [{nativeEvent: {contentOffset: {y: scrollY}}}]
+    );
+  },
+};
+
+module.exports = ParallaxMixin;

index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ParallaxImage = require('./ParallaxImage');
+var ParallaxMixin = require('./ParallaxMixin');
+
+module.exports = {
+  Image: ParallaxImage,
+  Mixin: ParallaxMixin,
+};

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-native-parallax",
+  "version": "0.1.0",
+  "description": "Parallax effects for React Native using Animated API",
+  "main": "index.js",
+  "scripts": {
+    "test": "flow check"
+  },
+  "keywords": [
+    "react-native",
+    "react-component",
+    "react-native-component",
+    "react",
+    "mobile",
+    "ios",
+    "ui",
+    "parallax",
+    "image"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://oblador@github.com/oblador/react-native-parallax.git"
+  },
+  "author": "Joel Arvidsson <joel@oblador.se>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/oblador/react-native-parallax/issues"
+  },
+  "homepage": "https://github.com/oblador/react-native-parallax",
+  "peerDependencies": {
+    "react-native": ">=0.8.0 || 0.8.0-rc || 0.8.0-rc.2"
+  },
+  "dependencies": {
+    "lodash": "^3.8.0"
+  }
+}