feature: single-stack component

example/App.tsx

@@ -18,6 +18,7 @@ import {SwipeCards} from './src/swipe-cards';
 import {Stack} from './src/stack';
 import {Tabs} from './src/tabs';
 import {MyPager} from './src/basic-example';
+import {SingleStackExample} from './src/single-stack-example';
 import {PagerProvider} from '@crowdlinker/react-native-pager';
 
 const App = () => {
@@ -32,7 +33,7 @@ const App = () => {
     <View style={{flex: 1, backgroundColor: 'white'}}>
       <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
         <PagerProvider activeIndex={activeIndex} onChange={onChange}>
-          <MyPager />
+          <SingleStackExample />
         </PagerProvider>
       </SafeAreaView>
     </View>

example/src/single-stack-example.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {View} from 'react-native';
+import {SingleStack, usePager} from '@crowdlinker/react-native-pager';
+import {Slide, NavigationButtons} from './shared-components';
+
+const rootConfig = {
+  transform: [
+    {
+      scale: {
+        inputRange: [-1, 0, 1],
+        outputRange: [1.1, 1, 1.1],
+      },
+    },
+  ],
+};
+
+const pageConfig = {
+  transform: [
+    {
+      scale: {
+        inputRange: [-1, 0, 1],
+        outputRange: [0.9, 1, 0.9],
+      },
+    },
+  ],
+};
+
+function SingleStackExample() {
+  const [activeIndex, onChange] = usePager();
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center'}}>
+      <SingleStack
+        style={{
+          width: 200,
+          height: 200,
+          alignSelf: 'center',
+          padding: 5,
+        }}
+        rootIndex={2}
+        rootInterpolation={rootConfig}
+        pageInterpolation={pageConfig}
+        activeIndex={activeIndex}
+        onChange={onChange}>
+        <Slide i={0} />
+        <Slide i={1} />
+        <Slide i={2} />
+        <Slide i={3} />
+        <Slide i={4} />
+      </SingleStack>
+
+      <NavigationButtons activeIndex={activeIndex} onChange={onChange} />
+    </View>
+  );
+}
+
+export {SingleStackExample};

src/index.tsx

@@ -1,2 +1,3 @@
-export * from './pager';
+export { Pager, PagerProvider, usePager } from './pager';
 export * from './pagination';
+export * from './single-stack';

src/pager.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-native-gesture-handler';
 import { memoize, mapConfigToStyle } from './util';
 
-type SpringConfig = {
+export type SpringConfig = {
   damping: Animated.Adaptable<number>;
   mass: Animated.Adaptable<number>;
   stiffness: Animated.Adaptable<number>;
@@ -42,7 +42,7 @@ interface InterpolationConfig {
 }
 
 type iInterpolationFn = (
-  offset: Animated.Value<number>
+  offset: Animated.Node<number>
 ) => Animated.Node<number>;
 
 interface iInterpolationConfig extends InterpolationConfig {
@@ -684,4 +684,4 @@ function usePager(): iPagerContext {
   return context;
 }
 
-export { Pager, PagerProvider, usePager };
+export { Pager, PagerProvider, usePager, PagerContext };