Added scrollview

InterfaceKit · Nov 15, 2017 · 6ac5b11 · 6ac5b11
1 parent c54262a
commit 6ac5b11
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 40 deletions.
diff --git a/ios/RNIKInteractiveImageLibrary.h b/ios/RNIKInteractiveImageLibrary.h
@@ -9,4 +9,3 @@
 @property (nonatomic) double motionLastYaw;
 
 @end
-
diff --git a/ios/RNIKInteractiveImageLibrary.m b/ios/RNIKInteractiveImageLibrary.m
@@ -29,18 +29,14 @@ - (id)init {
 }
 
 RCT_EXPORT_METHOD(startYawUpdates) {
-    if ([self.motionManager isDeviceMotionActive]) {
+    if ([self.motionManager isDeviceMotionAvailable]) {
         // To avoid using more CPU than necessary we use
         // `CMAttitudeReferenceFrameXArbitraryZVertical`
         [self.motionManager startDeviceMotionUpdatesUsingReferenceFrame:CMAttitudeReferenceFrameXArbitraryZVertical
                                                                 toQueue:[NSOperationQueue mainQueue]
                                                             withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) {
                                                                 [self motionRefresh];
-        }];
-    } else {
-        [self.motionManager startDeviceMotionUpdatesToQueue:[NSOperationQueue mainQueue] withHandler:^(CMDeviceMotion * _Nullable motion, NSError * _Nullable error) {
-            [self motionRefresh];
-        }];
+                                                            }];
     }
 }
 
@@ -63,13 +59,18 @@ - (void)motionRefresh {
     k = p / (p + r);
     x = x + k*(yaw - x);
     p = (1 - k)*p;
-    self.motionLastYaw = x;
-    [self sendEventWithName:@"MotionManager"
-                       body:@{@"yaw": [NSNumber numberWithDouble:self.motionLastYaw]}];
+
+    float difference = x - self.motionLastYaw;
+    if (!(difference > -0.005 && difference < 0.005)) {
+        self.motionLastYaw = x;
+        [self sendEventWithName:@"MotionManager"
+                           body:@{@"yaw": [NSNumber numberWithDouble:self.motionLastYaw]}];
+    }
 }
 
 RCT_EXPORT_METHOD(stopYawUpdates) {
     [self.motionManager stopDeviceMotionUpdates];
 }
 
 @end
+
diff --git a/lib/ImagePaner.js b/lib/ImagePaner.js
@@ -3,6 +3,7 @@
 import React from 'react'
 import {
   Animated,
+  StatusBar,
   Dimensions,
   NativeModules,
   NativeEventEmitter
@@ -15,6 +16,7 @@ const motionManagerEmitter = new NativeEventEmitter(RNIKInteractiveImageLibrary)
 import type { ImageMeasurements } from './Utils'
 
 type Props = {
+  source: Animated.Image.source,
   imageWidth: ?number,
   imageHeight: ?number
 }
@@ -28,6 +30,7 @@ class ImagePaner extends React.Component<Props, State> {
   _scroll: Animated.ScrollView
   _imageOpacity: Animated.Value
   _x: Animated.Value
+  _isScrolling: boolean
 
   static defaultProps = {
     imageWidth: 1129,
@@ -45,8 +48,10 @@ class ImagePaner extends React.Component<Props, State> {
     })
     this.state = { measurements }
     this._listener = null
+    this._scroll = null
     this._imageOpacity = new Animated.Value(0)
-    this._x = new Animated.Value(-measurements.x)
+    this._x = new Animated.Value(0)
+    this._isScrolling = false
   }
 
   componentWillMount() {
@@ -77,58 +82,98 @@ class ImagePaner extends React.Component<Props, State> {
     this._listener.remove()
   }
 
+  _onLoad = () => {
+    Animated.timing(this._imageOpacity, {
+      toValue: 1,
+      duration: 250
+    }).start()
+  }
+
   _onYawUpdate = (motion: { yaw: number }) => {
-    const displacement: number = this._x.__getValue() + motion.yaw
-    console.log('Displacement', displacement, this._x.__getValue(), motion.yaw)
-    this._scroll.scrollTo({
-      x: displacement,
-      y: -this.state.measurements.y,
-      animated: false
-    })
+    this._x.setValue(motion.yaw)
   }
 
   _handleRef = (ref: any) => {
     if (ref) {
-      ref &&
-        ref.getNode().scrollTo({
-          x: -this.state.measurements.x,
-          y: -this.state.measurements.y,
-          animated: false
-        })
       this._scroll = ref.getNode()
-      Animated.timing(this._imageOpacity, {
-        toValue: 1,
-        duration: 250
-      }).start()
     }
   }
 
+  _onScroll = (e: any) => {
+    // this._x.setValue(e.nativeEvent.contentOffset.x)
+    // console.log('scroll', e.nativeEvent.contentOffset.x)
+  }
+
+  _scrollBegin = () => {
+    this._isScrolling = true
+    // console.log('Scroll Begin', this._isScrolling)
+  }
+
+  _scrollEnd = () => {
+    this._isScrolling = false
+    // console.log('Scroll End', this._isScrolling)
+  }
+
   render() {
     return (
       <Animated.ScrollView
-        ref={this._handleRef}
         horizontal={true}
+        bounces={true}
         style={{
           width: Dimensions.get('window').width,
-          height: Dimensions.get('window').height
+          height: Dimensions.get('window').height,
+          backgroundColor: 'black'
         }}
-        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { x: this._x } } }],
-          { useNativeDriver: true }
-        )}
-        scrollEventThrottle={16}
+        onScroll={this._onScroll}
       >
+        <StatusBar animated={true} hidden={true} />
         <Animated.Image
-          source={{
-            uri:
-              'https://vacacional-demo.s3.amazonaws.com/vacacional-001/property/finca/201706/pexels-photo-279607.jpg'
-          }}
+          source={this.props.source}
+          onLoad={this._onLoad}
           style={{
+            position: 'absolute',
             width: this.state.measurements.width,
             height: this.state.measurements.height,
-            opacity: this._imageOpacity
+            opacity: this._imageOpacity,
+            transform: [
+              {
+                translateX: this._x.interpolate({
+                  inputRange: [-Math.PI / 7, 0, Math.PI / 7],
+                  outputRange: [
+                    0,
+                    this.state.measurements.x,
+                    -(this.state.measurements.width + this.state.measurements.x)
+                  ],
+                  extrapolate: 'clamp'
+                })
+              }
+            ]
           }}
         />
+        {/*<Animated.ScrollView
+          ref={this._handleRef}
+          horizontal={true}
+          bounces={false}
+          style={{
+            position: 'absolute',
+            width: Dimensions.get('window').width,
+            height: Dimensions.get('window').height,
+            backgroundColor: 'transparent'
+          }}
+          alwaysBounceHorizontal={false}
+          onScroll={this._onScroll}
+          scrollEventThrottle={1}
+          onMomentumScrollBegin={this._scrollBegin}
+          onMomentumScrollEnd={this._scrollEnd}
+        >
+          <Animated.View
+            style={{
+              width: this.state.measurements.width,
+              height: this.state.measurements.height,
+              backgroundColor: 'transparent'
+            }}
+          />
+          </Animated.ScrollView>*/}
       </Animated.ScrollView>
     )
   }