wip -- memoizing

example/App.tsx

@@ -9,7 +9,7 @@
 console.disableYellowBox = true;
 
 import React, {useState} from 'react';
-import {SafeAreaView, View} from 'react-native';
+import {SafeAreaView, View, Text} from 'react-native';
 
 import {InlineCards} from './src/inline-cards';
 import {KilterCards} from './src/kilter-cards';
@@ -18,24 +18,49 @@ import {SwipeCards} from './src/swipe-cards';
 import {Stack} from './src/stack';
 import {Tabs} from './src/tabs';
 import {MyPager} from './src/basic-example';
-import {PagerProvider} from '@crowdlinker/react-native-pager';
+import {Pager} 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,
+};
 
 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', justifyContent: 'center'}}>
-        <PagerProvider activeIndex={activeIndex} onChange={onChange}>
-          <KilterCards />
-        </PagerProvider>
+      <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>
     </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,17 +76,6 @@
             </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"
@@ -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/src/shared-components.tsx

@@ -16,6 +16,7 @@ import {
   useInterpolation,
 } from '@crowdlinker/react-native-pager';
 import Animated from 'react-native-reanimated';
+import {ReText} from 'react-native-redash';
 
 const colors = [
   'aquamarine',
@@ -28,10 +29,10 @@ const colors = [
   'salmon',
 ];
 
-function Slide() {
+function Slide({index}: any) {
   // const [count, setCount] = useState(0);
-  const focused = useFocus();
-  const index = useIndex();
+  // const focused = useFocus();
+  // const index = useIndex();
   // const style = useInterpolation({
   //   transform: [
   //     {
@@ -51,9 +52,11 @@ function Slide() {
         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>

src/index.tsx

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