Merge pull request #7 from zachgibson/feature/allow-background-and-foreground-component-injection

API 1.0.0

Author: zachgibson

.eslintrc.json

@@ -24,6 +24,7 @@
     "react-native/no-color-literals": 0,
     "class-property/class-property-semicolon": 2,
     "prefer-class-properties/prefer-class-properties": 2,
-    "react/require-default-props": 0
+    "react/require-default-props": 0,
+    "max-len": ["error", 80]
   }
 }

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+examples

README.md

@@ -14,87 +14,88 @@ __Features__
 ![Vevo Demo](https://user-images.githubusercontent.com/10658888/30244668-66164c3a-9588-11e7-9cfa-c0c5dc29090c.gif)  
 ![Lightbox Demo](https://user-images.githubusercontent.com/10658888/30244669-68924b4e-9588-11e7-9426-b081953115fc.gif)
 
-## Installation
+## Examples
+Check out the GIF examples above via [Expo](https://expo.io/@zachgibson/ParallaxSwiperExample). Or clone this repo and:
 ```shell
-$ yarn add react-native-parallax-swiper
+$ cd examples/ParallaxSwiperExample
+$ npm install
+$ react-native link
+$ react-native run-ios
 ```
 
+## Installation
+```shell
+$ npm install react-native-parallax-swiper --save
+```
 
 ## Usage
 ```javascript
-import ParallaxSwiper from 'react-native-parallax-swiper';
+import { ParallaxSwiper, ParallaxSwiperPage } from 'react-native-parallax-swiper';
 ```
 
 ```javascript
 constructor() {
   super();
-  
+
   this.myCustomAnimatedValue = new Animated.Value(0);
 }
 ```
 
 ```javascript
 <ParallaxSwiper
-  parallaxStrength={80}
-  animatedScrollValue={this.myCustomAnimatedValue}
+  speed={0.25}
+  animatedValue={this.myCustomAnimatedValue}
   dividerWidth={8}
   dividerColor="black"
   backgroundColor="#fff"
   onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
 >
-  <Animated.View
-    style={{
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: this.myCustomAnimatedValue.interpolate({
-        inputRange: [0, deviceWidth * 0.25],
-        outputRange: [1, 0]
-      })
-    }}
-    backgroundImage={`https://source.unsplash.com/user/erondu/${deviceHeight + 1}x${deviceWidth + 1}`}
-  >
-    <Text>Parallaxing is rad</Text>
-  </Animated.View>
-  <View
-    style={{
-      flex: 1,
-      alignItems: "center",
-      justifyContent: "center"
-    }}
-    backgroundImage={`https://source.unsplash.com/user/erondu/${deviceHeight}x${deviceWidth}`}
-  >
-    <Text>Parallaxing is too rad</Text>
-  </View>
+  <ParallaxSwiperPage
+    BackgroundComponent={<FireVideoComponent />}
+    ForegroundComponent={<SickUI />}
+  />
+  <ParallaxSwiperPage
+    BackgroundComponent={<FireVideoComponent />}
+    ForegroundComponent={<SickUI />}
+  />
+  <ParallaxSwiperPage
+    BackgroundComponent={<FireVideoComponent />}
+    ForegroundComponent={<SickUI />}
+  />
 </ParallaxSwiper>
 ```
 
-## Props
+## ParallaxSwiper Props
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| __`parallaxStrength`__ | _Number_ | `80` | This number determines how slow parallax’ing element moves. Lower number yields a subtler parallax effect, higher number increases parallax effect. |
+| __`speed`__ | _Number_ | `0.25` | This number determines how fast `BackgroundComponent` moves. Set to 0 for no movement at all, set to 1 and background will move as fast as the scroll. |
 | __`dividerWidth`__ | _Number_ | `8` | The width of the divider between each page. (horizontal only) |
 | __`dividerColor`__ | _String_ | `black` | Color of divider. |
-| __`backgroundImage`__ | _String_ | `N/A` | The image source. If used this becomes the background image that parallaxes. (remote URL only for now) |
-| __`backgroundImageResizeMode`__ | _String_ | `cover` | Determines how to resize the image. |
-| __`backgroundColor`__ | _String_ | `black` | The main view’s background color. |
+| __`backgroundColor`__ | _String_ | `black` | ParallaxSwiper’s background color. |
 | __`scrollToIndex`__ | _Function_ | 0 | Scrolls to index with a smooth animation. If used onComponentDidMount scroll is immediate with no animation. |
-| __`onMomentumScrollEnd`__ | _Function_ | `N/A` | Called when ScrollView stops scrolling and is passed the current page index. |
-| __`animatedScrollValue`__ | _Animated.Value_ | `0` | Optionally pass a new instance of Animated.Value to this prop to have access to the animated scroll value to animate your own components. |
-| __`children`__ | _ReactComponents_ | `N/A` | JSX to inject into the page. |
-| __`vertical`__ | _Boolean_ | `false` | When true, ParallaxSwiper’s children are arranged vertically in a column instead of horizontally in a row. For now only iOS supports this, but there is work to implement vertical paging on Android. |
+| __`onMomentumScrollEnd`__ | _Function_ | `N/A` | Fired when ScrollView stops scrolling and is passed the current page index. |
+| __`animatedValue`__ | _Number (Animated.Value)_ | `0` | Optionally pass a new instance of Animated.Value to  access the animated value outside of ParallaxSwiper. |
+| __`vertical`__ | _Boolean_ | `false` | When true, ParallaxSwiper’s children are arranged vertically in a column instead of horizontally in a row. For now only iOS supports this. |
 | __`showsHorizontalScrollIndicator`__ | _Boolean_ | `false` | When true, shows a horizontal scroll indicator. The default value is false. |
 | __`showsVerticalScrollIndicator`__ | _Boolean_ | `false` | When true, shows a vertical scroll indicator. The default value is false. |
+| __`children`__ | _React component (ParallaxSwiperPage)_ | `N/A` | Each top-level ParallaxSwiperPage child. |
+
+## ParallaxSwiperPage Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| __`BackgroundComponent`__ | _React element_ | `N/A` | This component will render in the background of the page and will be animated based on scroll. |
+| __`ForegroundComponent`__ | _React element_ | `N/A` | This component will render in the foreground of the page. |
 
 ## TODO
-- [ ] Create Expo demos
-- [ ] Create examples
+- [x] Create Expo demos
+- [x] Create examples
 - [x] Expose current index
 - [x] Support scrollToIndex
 - [x] Fix Android
 - [x] Expose Animated.Value for animation outside of ParallaxSwiper
 - [ ] Add drag effects e.g. zoom, blur, darken
 - [ ] Expose rest of [ScrollView](http://facebook.github.io/react-native/releases/0.47/docs/scrollview.html#scrollview) props
+- [ ] Use FlatList instead of ScrollView
 
 ## Why another parallax component? 😒
 This component is inspired by an iOS pattern that no react-native-parallax-whatever previously delivered. It emulates this pattern by using the [ScrollView](http://facebook.github.io/react-native/releases/0.48/docs/scrollview.html) component which has features like velocity, paging, and platform specific easing curves; It also has optional dividers to split up each page. You can see this pattern in apps like [iOS Camera Roll](https://goo.gl/GY3bFQ), [Twitter Moments](https://goo.gl/CvzCQA), [Kylie Jenner’s app](https://goo.gl/yDB69S), [Vevo’s app](https://goo.gl/FMSSeF), and more.

examples/ParallaxSwiperExample/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/ParallaxSwiperExample/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/ParallaxSwiperExample/.flowconfig

@@ -0,0 +1,48 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.56.0

examples/ParallaxSwiperExample/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/ParallaxSwiperExample/.gitignore

@@ -0,0 +1,53 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots

examples/ParallaxSwiperExample/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/ParallaxSwiperExample/App.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  ScrollView,
+  StatusBar,
+} from 'react-native';
+
+import { SafeAreaView, StackNavigator } from 'react-navigation';
+import { Typography } from 'react-native-typography';
+
+import Twitter from './screens/Twitter';
+import Vevo from './screens/Vevo';
+
+const ExampleRoutes = {
+  Twitter: {
+    name: 'Twitter Moments',
+    description: 'Re-creation of Twitter’s Moments feature.',
+    screen: Twitter,
+  },
+  Vevo: {
+    name: 'Vevo',
+    description: 'Re-creation of the old Vevo app.',
+    screen: Vevo,
+  },
+};
+
+class MainScreen extends Component {
+  componentDidMount() {
+    StatusBar.setHidden(true, 'none');
+  }
+
+  render() {
+    const { navigation } = this.props;
+
+    return (
+      <ScrollView stickyHeaderIndices={[0]} style={styles.scrollView}>
+        <View style={styles.navBar}>
+          <Typography
+            iOSTextStyle="title1"
+            androidTextStyle="headline"
+            style={{ color: '#BFBFBF' }}
+          >
+            ParallaxSwiper Demos
+          </Typography>
+        </View>
+        {Object.keys(ExampleRoutes).map((routeName, i) =>
+          (<TouchableOpacity
+            key={routeName}
+            onPress={() => {
+              const { path, params, screen } = ExampleRoutes[routeName];
+              const { router } = screen;
+              const action =
+                path && router.getActionForPathAndParams(path, params);
+              navigation.navigate(routeName, {}, action);
+            }}
+          >
+            <SafeAreaView
+              style={[
+                styles.itemContainer,
+                { borderTopWidth: i === 0 ? StyleSheet.hairlineWidth : 0 },
+              ]}
+              forceInset={{ vertical: 'never' }}
+            >
+              <View style={styles.item}>
+                <Typography
+                  iOSTextStyle="callout"
+                  androidTextStyle="body2"
+                  style={{ color: '#BFBFBF' }}
+                >
+                  {ExampleRoutes[routeName].name}
+                </Typography>
+                <Typography
+                  iOSTextStyle="caption1"
+                  androidTextStyle="caption"
+                  style={{ color: '#777' }}
+                >
+                  {ExampleRoutes[routeName].description}
+                </Typography>
+              </View>
+            </SafeAreaView>
+          </TouchableOpacity>),
+        )}
+      </ScrollView>
+    );
+  }
+}
+const AppNavigator = StackNavigator(
+  {
+    ...ExampleRoutes,
+    Index: {
+      screen: MainScreen,
+    },
+  },
+  {
+    initialRouteName: 'Index',
+    headerMode: 'none',
+    mode: 'modal',
+  },
+);
+
+export default () => <AppNavigator />;
+
+const styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: 'black',
+  },
+  navBar: {
+    paddingTop: 32,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    backgroundColor: 'black',
+  },
+  item: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  itemContainer: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: '#222',
+    backgroundColor: '#111',
+  },
+});