rewrite internals to simplify animated index logic

example/App.tsx

@@ -9,7 +9,7 @@
 console.disableYellowBox = true;
 
 import React, {useState} from 'react';
-import {SafeAreaView, View, Text} from 'react-native';
+import {SafeAreaView, View} from 'react-native';
 
 import {InlineCards} from './src/inline-cards';
 import {KilterCards} from './src/kilter-cards';
@@ -18,49 +18,25 @@ import {SwipeCards} from './src/swipe-cards';
 import {Stack} from './src/stack';
 import {Tabs} from './src/tabs';
 import {MyPager} from './src/basic-example';
-import {Pager} from '@crowdlinker/react-native-pager';
+import {PagerProvider} from '@crowdlinker/react-native-pager';
 import {ContainerStyle} from './src/panhandler-width';
-import {Slide} from './src/shared-components';
-
-const stackConfig: any = {
-  transform: [
-    {
-      scale: {
-        inputRange: [-1, 0, 1],
-        outputRange: [0.95, 1, 0.95],
-      },
-    },
-  ],
-
-  zIndex: offset => offset,
-};
+import {VerticalPager} from './src/vertical';
 
 const App = () => {
   const [activeIndex, setActiveIndex] = useState(1);
 
   function onChange(nextIndex: number) {
-    console.log({nextIndex});
+    // console.log({nextIndex});
     setActiveIndex(nextIndex);
   }
 
   return (
     <SafeAreaView style={{flex: 1}}>
-      <View style={{flex: 1, backgroundColor: 'white'}}>
-        <Pager
-          pageInterpolation={stackConfig}
-          // clamp={{prev: 0.4, next: 1}}
-          // clampDrag={{next: 0}}
-          activeIndex={activeIndex}
-          onChange={onChange}>
-          <Slide index={0} />
-          <Slide index={1} />
-          <Slide index={2} />
-          <Slide index={3} />
-          <Slide index={4} />
-          <Slide index={5} />
-        </Pager>
-
-        <Text>{`Active index: ${activeIndex}`}</Text>
+      <View
+        style={{flex: 1, backgroundColor: 'white', justifyContent: 'center'}}>
+        <PagerProvider activeIndex={activeIndex} onChange={onChange}>
+          <MyPager />
+        </PagerProvider>
       </View>
     </SafeAreaView>
   );

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

@@ -78,7 +78,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

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/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

@@ -16,7 +16,6 @@ import {
   useInterpolation,
 } from '@crowdlinker/react-native-pager';
 import Animated from 'react-native-reanimated';
-import {ReText} from 'react-native-redash';
 
 const colors = [
   'aquamarine',
@@ -29,10 +28,10 @@ const colors = [
   'salmon',
 ];
 
-function Slide({index}: any) {
+function Slide() {
   // const [count, setCount] = useState(0);
-  // const focused = useFocus();
-  // const index = useIndex();
+  const focused = useFocus();
+  const index = useIndex();
   // const style = useInterpolation({
   //   transform: [
   //     {
@@ -52,11 +51,9 @@ function Slide({index}: any) {
         alignItems: 'center',
         borderRadius: 10,
         marginHorizontal: 5,
-        borderWidth: 1,
         backgroundColor: colors[index % colors.length],
       }}>
       <Text>{`Screen: ${index}`}</Text>
-      {/* <ReText text={animatedValue} /> */}
       {/* <Text>{`Focused: ${focused}`}</Text> */}
       {/* <TextInput placeholder="Test Update" />
       <Text>{`Count: ${count}`}</Text>

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};

src/index.tsx

@@ -1,3 +1,3 @@
-export * from './pager-2';
+export * from './pager';
 export * from './pagination';
 export { interpolateWithConfig } from './util';