Merge pull request #12 from CrowdLinker/develop

Develop

.gitignore

@@ -6,4 +6,5 @@ node_modules
 .rts2_cache_esm
 .rts2_cache_umd
 dist
-todo.txt
+todo.txt
+coverage

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

example/App.tsx

@@ -20,6 +20,7 @@ import {Tabs} from './src/tabs';
 import {MyPager} from './src/basic-example';
 import {PagerProvider} from '@crowdlinker/react-native-pager';
 import {ContainerStyle} from './src/panhandler-width';
+import {VerticalPager} from './src/vertical';
 
 const App = () => {
   const [activeIndex, setActiveIndex] = useState(1);
@@ -34,7 +35,7 @@ const App = () => {
       <View
         style={{flex: 1, backgroundColor: 'white', justifyContent: 'center'}}>
         <PagerProvider activeIndex={activeIndex} onChange={onChange}>
-          <KilterCards />
+          <VerticalPager />
         </PagerProvider>
       </View>
     </SafeAreaView>

example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme

@@ -55,6 +55,15 @@
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       shouldUseLaunchSchemeArgsEnv = "YES">
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "example.app"
+            BlueprintName = "example"
+            ReferencedContainer = "container:example.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
       <Testables>
          <TestableReference
             skipped = "NO">
@@ -67,20 +76,9 @@
             </BuildableReference>
          </TestableReference>
       </Testables>
-      <MacroExpansion>
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "example.app"
-            BlueprintName = "example"
-            ReferencedContainer = "container:example.xcodeproj">
-         </BuildableReference>
-      </MacroExpansion>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
@@ -99,8 +97,6 @@
             ReferencedContainer = "container:example.xcodeproj">
          </BuildableReference>
       </BuildableProductRunnable>
-      <AdditionalOptions>
-      </AdditionalOptions>
    </LaunchAction>
    <ProfileAction
       buildConfiguration = "Release"

example/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,5 +1,15 @@
 {
   "images": [
+    {
+      "idiom": "iphone",
+      "size": "20x20",
+      "scale": "2x"
+    },
+    {
+      "idiom": "iphone",
+      "size": "20x20",
+      "scale": "3x"
+    },
     {
       "idiom": "iphone",
       "size": "29x29",
@@ -29,6 +39,11 @@
       "idiom": "iphone",
       "size": "60x60",
       "scale": "3x"
+    },
+    {
+      "idiom": "ios-marketing",
+      "size": "1024x1024",
+      "scale": "1x"
     }
   ],
   "info": {

example/ios/exampleTests/exampleTests.m

@@ -40,11 +40,15 @@ - (void)testRendersWelcomeScreen
   BOOL foundElement = NO;
 
   __block NSString *redboxError = nil;
+  #ifdef DEBUG
+
   RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
     if (level >= RCTLogLevelError) {
       redboxError = message;
     }
   });
+
+  #endif
 
   while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
     [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
@@ -58,7 +62,11 @@ - (void)testRendersWelcomeScreen
     }];
   }
 
+  #ifdef DEBUG
+
   RCTSetLogFunction(RCTDefaultLogFunction);
+
+  #endif
 
   XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
   XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);

example/src/basic-example.tsx

@@ -18,9 +18,7 @@ function MyPager() {
         {`Number of screens: ${children.length}`}
       </Text>
 
-      <Pager activeIndex={activeIndex} onChange={onChange}>
-        {children}
-      </Pager>
+      <Pager>{children}</Pager>
 
       <NavigationButtons activeIndex={activeIndex} onChange={onChange} />
     </View>

example/src/kilter-cards.tsx

@@ -2,6 +2,9 @@ import React, {useState} from 'react';
 import {Pager, iPageInterpolation} from '@crowdlinker/react-native-pager';
 import {Slide, NavigationButtons} from './shared-components';
 import {View} from 'react-native';
+import Animated from 'react-native-reanimated';
+
+const {multiply, floor} = Animated;
 
 const kilterCardsConfig: iPageInterpolation = {
   transform: [
@@ -28,14 +31,16 @@ const kilterCardsConfig: iPageInterpolation = {
     },
   ],
 
+  zIndex: (offset: Animated.Node<number>) => multiply(floor(offset), -1),
+
   opacity: {
     inputRange: [-2, -1, 0, 1, 2, 3, 4],
     outputRange: [0, 0, 1, 1, 1, 0, 0],
   },
 };
 
 function KilterCards() {
-  const [activeIndex, onChange] = useState(2);
+  const [activeIndex, onChange] = useState(3);
 
   return (
     <View>
@@ -44,7 +49,7 @@ function KilterCards() {
         onChange={onChange}
         clamp={{next: 0}}
         threshold={0.3}
-        adjacentChildOffset={5}
+        adjacentChildOffset={3}
         style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
         pageInterpolation={kilterCardsConfig}>
         {Array.from({length: activeIndex + 3}, (_, i) => (

example/src/shared-components.tsx

@@ -54,7 +54,7 @@ function Slide() {
         backgroundColor: colors[index % colors.length],
       }}>
       <Text>{`Screen: ${index}`}</Text>
-      {/* <Text>{`Focused: ${focused}`}</Text> */}
+      <Text>{`Focused: ${focused}`}</Text>
       {/* <TextInput placeholder="Test Update" />
       <Text>{`Count: ${count}`}</Text>
       <Button title="Inc" onPress={() => setCount(count + 1)} /> */}

example/src/stack.tsx

@@ -31,7 +31,7 @@ function Stack() {
           enabled: activeIndex !== 0,
         }}
         onChange={onChange}
-        clamp={{prev: 0.4}}
+        clamp={{prev: 0.7}}
         clampDrag={{next: 0}}
         adjacentChildOffset={4}
         containerStyle={{height: 200}}

example/src/stacked-cards.tsx

@@ -2,6 +2,9 @@ import React, {useState} from 'react';
 import {Pager, iPageInterpolation} from '@crowdlinker/react-native-pager';
 import {Slide, NavigationButtons} from './shared-components';
 import {View} from 'react-native';
+import Animated from 'react-native-reanimated';
+
+const {multiply, floor} = Animated;
 
 const stackedCardsConfig: iPageInterpolation = {
   transform: [
@@ -16,6 +19,13 @@ const stackedCardsConfig: iPageInterpolation = {
       },
     },
   ],
+
+  opacity: {
+    inputRange: [-1, 0, 1, 2, 3],
+    outputRange: [1, 1, 1, 1, 0],
+  },
+
+  zIndex: offset => multiply(floor(offset), -1),
 };
 
 function StackedCards() {
@@ -28,7 +38,7 @@ function StackedCards() {
         onChange={onChange}
         clamp={{next: 0}}
         threshold={0.3}
-        adjacentChildOffset={3}
+        adjacentChildOffset={5}
         style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
         pageInterpolation={stackedCardsConfig}>
         {Array.from({length: activeIndex + 3}, (_, i) => (

example/src/vertical.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from 'react';
+import {Pager, iPageInterpolation} from '@crowdlinker/react-native-pager';
+import {Slide, NavigationButtons} from './shared-components';
+import {View} from 'react-native';
+import Animated from 'react-native-reanimated';
+
+const {multiply, floor} = Animated;
+
+const verticalConfig: iPageInterpolation = {
+  transform: [
+    {
+      scale: {
+        inputRange: [-1, 0, 1],
+        outputRange: [0.8, 1, 0.9],
+      },
+    },
+  ],
+
+  opacity: {
+    inputRange: [-1, 0, 1, 2, 3],
+    outputRange: [1, 1, 1, 1, 0],
+  },
+
+  zIndex: offset => multiply(floor(offset), -1),
+};
+
+function VerticalPager() {
+  const [activeIndex, onChange] = useState(2);
+
+  return (
+    <View>
+      <Pager
+        type="vertical"
+        activeIndex={activeIndex}
+        onChange={onChange}
+        style={{height: 200, width: 200, alignSelf: 'center', padding: 10}}
+        pageInterpolation={verticalConfig}>
+        {Array.from({length: activeIndex + 3}, (_, i) => (
+          <Slide key={i} />
+        ))}
+      </Pager>
+      <NavigationButtons activeIndex={activeIndex} onChange={onChange} />
+    </View>
+  );
+}
+
+export {VerticalPager};

mock.js

@@ -0,0 +1,65 @@
+jest.mock('react-native-reanimated', () => {
+  const React = require('react');
+
+  const View = require('react-native/Libraries/Components/View/View');
+  const mock = require('react-native-reanimated/mock');
+
+  mock.default.Value = function() {
+    return {
+      setValue: function() {},
+    };
+  };
+
+  function MockView(props) {
+    React.useEffect(() => {
+      props.onLayout &&
+        props.onLayout({
+          nativeEvent: { layout: { width: 100, height: 100 } },
+        });
+    }, []);
+
+    return React.createElement(View, props, props.children);
+  }
+
+  mock.default.View = MockView;
+
+  mock.default.useCode = function() {};
+
+  return mock;
+});
+
+jest.mock('react-native-gesture-handler', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  const TouchableOpacity = require('react-native/Libraries/Components/Touchable/TouchableOpacity');
+  return {
+    Swipeable: View,
+    DrawerLayout: View,
+    State: {},
+    ScrollView: View,
+    Slider: View,
+    Switch: View,
+    TextInput: View,
+    ToolbarAndroid: View,
+    ViewPagerAndroid: View,
+    DrawerLayoutAndroid: View,
+    WebView: View,
+    NativeViewGestureHandler: View,
+    TapGestureHandler: View,
+    FlingGestureHandler: View,
+    ForceTouchGestureHandler: View,
+    LongPressGestureHandler: View,
+    PanGestureHandler: View,
+    PinchGestureHandler: View,
+    RotationGestureHandler: View,
+    /* Buttons */
+    RawButton: View,
+    BaseButton: View,
+    RectButton: View,
+    BorderlessButton: View,
+    TouchableOpacity: TouchableOpacity,
+    /* Other */
+    FlatList: View,
+    gestureHandlerRootHOC: jest.fn(),
+    Directions: {},
+  };
+});