diff --git a/.gitignore b/.gitignore
index e505689..442e7a9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,5 @@ node_modules
 .rts2_cache_esm
 .rts2_cache_umd
 dist
-todo.txt
\ No newline at end of file
+todo.txt
+coverage
\ No newline at end of file
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..f842b77
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};
diff --git a/example/App.tsx b/example/App.tsx
index 15f4c73..36c9306 100644
--- a/example/App.tsx
+++ b/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>
diff --git a/example/ios/example.xcodeproj/project.pbxproj b/example/ios/example.xcodeproj/project.pbxproj
index 1edbff0..59bbc39 100644
--- a/example/ios/example.xcodeproj/project.pbxproj
+++ b/example/ios/example.xcodeproj/project.pbxproj
@@ -8,16 +8,10 @@
 
 /* Begin PBXBuildFile section */
 		00E356F31AD99517003FC87E /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; };
-		11D260E457736DAC92D89439 /* libPods-example-tvOSTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CFF809717AA2CEDF7155800D /* libPods-example-tvOSTests.a */; };
 		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
-		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
-		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		2DCD954D1E0B4F2C00145EB5 /* exampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* exampleTests.m */; };
-		8725D952B3862126F48D0E2E /* libPods-example-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5B42AF3230FA0C8448D27AF9 /* libPods-example-tvOS.a */; };
 		875DAE3FC0AAC0DDCEFCEE76 /* libPods-exampleTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 7DE004CFC5D7C94AAA1D4CC8 /* libPods-exampleTests.a */; };
 		E50328FBA66D51ABC9044376 /* libPods-example.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 734CE017E4D11139A39F475B /* libPods-example.a */; };
 /* End PBXBuildFile section */
@@ -30,13 +24,6 @@
 			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
 			remoteInfo = example;
 		};
-		2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {
-			isa = PBXContainerItemProxy;
-			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
-			proxyType = 1;
-			remoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;
-			remoteInfo = "example-tvOS";
-		};
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
@@ -51,8 +38,6 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = example/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = example/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = example/main.m; sourceTree = "<group>"; };
-		2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "example-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
-		2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "example-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		466F3A040231D85B4B4ED00F /* Pods-example-tvOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOS.release.xcconfig"; path = "Target Support Files/Pods-example-tvOS/Pods-example-tvOS.release.xcconfig"; sourceTree = "<group>"; };
 		532B1EF3A55127953EA1FE8A /* Pods-example-tvOSTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-example-tvOSTests.debug.xcconfig"; path = "Target Support Files/Pods-example-tvOSTests/Pods-example-tvOSTests.debug.xcconfig"; sourceTree = "<group>"; };
 		5B42AF3230FA0C8448D27AF9 /* libPods-example-tvOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-example-tvOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -86,22 +71,6 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4781E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				8725D952B3862126F48D0E2E /* libPods-example-tvOS.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				11D260E457736DAC92D89439 /* libPods-example-tvOSTests.a in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
@@ -161,7 +130,6 @@
 				708FBAF9C6D205F0633E216C /* Pods-exampleTests.debug.xcconfig */,
 				F7F8A42F3ABC22EE717273AA /* Pods-exampleTests.release.xcconfig */,
 			);
-			name = Pods;
 			path = Pods;
 			sourceTree = "<group>";
 		};
@@ -192,8 +160,6 @@
 			children = (
 				13B07F961A680F5B00A75B9A /* example.app */,
 				00E356EE1AD99517003FC87E /* exampleTests.xctest */,
-				2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */,
-				2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -240,45 +206,6 @@
 			productReference = 13B07F961A680F5B00A75B9A /* example.app */;
 			productType = "com.apple.product-type.application";
 		};
-		2D02E47A1E0B4A5D006451C7 /* example-tvOS */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOS" */;
-			buildPhases = (
-				3FB0AAD2B54C9CEDE8307673 /* [CP] Check Pods Manifest.lock */,
-				FD10A7F122414F3F0027D42C /* Start Packager */,
-				2D02E4771E0B4A5D006451C7 /* Sources */,
-				2D02E4781E0B4A5D006451C7 /* Frameworks */,
-				2D02E4791E0B4A5D006451C7 /* Resources */,
-				2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = "example-tvOS";
-			productName = "example-tvOS";
-			productReference = 2D02E47B1E0B4A5D006451C7 /* example-tvOS.app */;
-			productType = "com.apple.product-type.application";
-		};
-		2D02E48F1E0B4A5D006451C7 /* example-tvOSTests */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOSTests" */;
-			buildPhases = (
-				CFF59ED859E523D41F4E04F0 /* [CP] Check Pods Manifest.lock */,
-				2D02E48C1E0B4A5D006451C7 /* Sources */,
-				2D02E48D1E0B4A5D006451C7 /* Frameworks */,
-				2D02E48E1E0B4A5D006451C7 /* Resources */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-				2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,
-			);
-			name = "example-tvOSTests";
-			productName = "example-tvOSTests";
-			productReference = 2D02E4901E0B4A5D006451C7 /* example-tvOSTests.xctest */;
-			productType = "com.apple.product-type.bundle.unit-test";
-		};
 /* End PBXNativeTarget section */
 
 /* Begin PBXProject section */
@@ -290,16 +217,11 @@
 				TargetAttributes = {
 					00E356ED1AD99517003FC87E = {
 						CreatedOnToolsVersion = 6.2;
+						DevelopmentTeam = 7DK33WZYS5;
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
-					2D02E47A1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						ProvisioningStyle = Automatic;
-					};
-					2D02E48F1E0B4A5D006451C7 = {
-						CreatedOnToolsVersion = 8.2.1;
-						ProvisioningStyle = Automatic;
-						TestTargetID = 2D02E47A1E0B4A5D006451C7;
+					13B07F861A680F5B00A75B9A = {
+						DevelopmentTeam = 7DK33WZYS5;
 					};
 				};
 			};
@@ -308,6 +230,7 @@
 			developmentRegion = English;
 			hasScannedForEncodings = 0;
 			knownRegions = (
+				English,
 				en,
 				Base,
 			);
@@ -318,8 +241,6 @@
 			targets = (
 				13B07F861A680F5B00A75B9A /* example */,
 				00E356ED1AD99517003FC87E /* exampleTests */,
-				2D02E47A1E0B4A5D006451C7 /* example-tvOS */,
-				2D02E48F1E0B4A5D006451C7 /* example-tvOSTests */,
 			);
 		};
 /* End PBXProject section */
@@ -341,21 +262,6 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4791E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48E1E0B4A5D006451C7 /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXResourcesBuildPhase section */
 
 /* Begin PBXShellScriptBuildPhase section */
@@ -373,42 +279,6 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
-		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "Bundle React Native Code And Images";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
-		};
-		3FB0AAD2B54C9CEDE8307673 /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-example-tvOS-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
 		702BE342796AE0FF5F6E1960 /* [CP] Check Pods Manifest.lock */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -453,28 +323,6 @@
 			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
 			showEnvVarsInLog = 0;
 		};
-		CFF59ED859E523D41F4E04F0 /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-example-tvOSTests-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
 		FD10A7F022414F080027D42C /* Start Packager */ = {
 			isa = PBXShellScriptBuildPhase;
 			buildActionMask = 2147483647;
@@ -494,25 +342,6 @@
 			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
 			showEnvVarsInLog = 0;
 		};
-		FD10A7F122414F3F0027D42C /* Start Packager */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputFileListPaths = (
-			);
-			inputPaths = (
-			);
-			name = "Start Packager";
-			outputFileListPaths = (
-			);
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
-			showEnvVarsInLog = 0;
-		};
 /* End PBXShellScriptBuildPhase section */
 
 /* Begin PBXSourcesBuildPhase section */
@@ -533,23 +362,6 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		2D02E4771E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
-				2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-		2D02E48C1E0B4A5D006451C7 /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				2DCD954D1E0B4F2C00145EB5 /* exampleTests.m in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
 /* End PBXSourcesBuildPhase section */
 
 /* Begin PBXTargetDependency section */
@@ -558,11 +370,6 @@
 			target = 13B07F861A680F5B00A75B9A /* example */;
 			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
 		};
-		2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {
-			isa = PBXTargetDependency;
-			target = 2D02E47A1E0B4A5D006451C7 /* example-tvOS */;
-			targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
-		};
 /* End PBXTargetDependency section */
 
 /* Begin PBXVariantGroup section */
@@ -583,6 +390,7 @@
 			baseConfigurationReference = 708FBAF9C6D205F0633E216C /* Pods-exampleTests.debug.xcconfig */;
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
+				DEVELOPMENT_TEAM = 7DK33WZYS5;
 				GCC_PREPROCESSOR_DEFINITIONS = (
 					"DEBUG=1",
 					"$(inherited)",
@@ -607,6 +415,7 @@
 			buildSettings = {
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
+				DEVELOPMENT_TEAM = 7DK33WZYS5;
 				INFOPLIST_FILE = exampleTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -628,6 +437,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
+				DEVELOPMENT_TEAM = 7DK33WZYS5;
 				INFOPLIST_FILE = example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
@@ -647,6 +457,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CURRENT_PROJECT_VERSION = 1;
+				DEVELOPMENT_TEAM = 7DK33WZYS5;
 				INFOPLIST_FILE = example/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_LDFLAGS = (
@@ -660,116 +471,6 @@
 			};
 			name = Release;
 		};
-		2D02E4971E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = AAF21A135CF25EFDDFA72D03 /* Pods-example-tvOS.debug.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "example-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Debug;
-		};
-		2D02E4981E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 466F3A040231D85B4B4ED00F /* Pods-example-tvOS.release.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
-				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "example-tvOS/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOS";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TARGETED_DEVICE_FAMILY = 3;
-				TVOS_DEPLOYMENT_TARGET = 9.2;
-			};
-			name = Release;
-		};
-		2D02E4991E0B4A5E006451C7 /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = 532B1EF3A55127953EA1FE8A /* Pods-example-tvOSTests.debug.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				ENABLE_TESTABILITY = YES;
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "example-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Debug;
-		};
-		2D02E49A1E0B4A5E006451C7 /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = F1C1D9BBC06AAE84000246C0 /* Pods-example-tvOSTests.release.xcconfig */;
-			buildSettings = {
-				BUNDLE_LOADER = "$(TEST_HOST)";
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				GCC_NO_COMMON_BLOCKS = YES;
-				INFOPLIST_FILE = "example-tvOSTests/Info.plist";
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-ObjC",
-					"-lc++",
-				);
-				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.example-tvOSTests";
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SDKROOT = appletvos;
-				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
-				TVOS_DEPLOYMENT_TARGET = 10.1;
-			};
-			name = Release;
-		};
 		83CBBA201A601CBA00E9B192 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
@@ -890,24 +591,6 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
-		2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOS" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4971E0B4A5E006451C7 /* Debug */,
-				2D02E4981E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "example-tvOSTests" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				2D02E4991E0B4A5E006451C7 /* Debug */,
-				2D02E49A1E0B4A5E006451C7 /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
 		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "example" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (
diff --git a/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme b/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme
index 1cef262..ebc4dc0 100644
--- a/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme
+++ b/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"
diff --git a/example/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist b/example/ios/example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
new file mode 100644
index 0000000..18d9810
--- /dev/null
+++ b/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>
diff --git a/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json b/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json
index 48e64ae..d25ce24 100644
--- a/example/ios/example/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/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": {
diff --git a/example/ios/exampleTests/exampleTests.m b/example/ios/exampleTests/exampleTests.m
index 97fa8b0..cca6539 100644
--- a/example/ios/exampleTests/exampleTests.m
+++ b/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);
diff --git a/example/src/basic-example.tsx b/example/src/basic-example.tsx
index 6fb6c6f..09a9338 100644
--- a/example/src/basic-example.tsx
+++ b/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>
diff --git a/example/src/kilter-cards.tsx b/example/src/kilter-cards.tsx
index 3b2d24c..571053a 100644
--- a/example/src/kilter-cards.tsx
+++ b/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,6 +31,8 @@ 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],
@@ -35,7 +40,7 @@ const kilterCardsConfig: iPageInterpolation = {
 };
 
 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) => (
diff --git a/example/src/shared-components.tsx b/example/src/shared-components.tsx
index 4f668a2..44f2a77 100644
--- a/example/src/shared-components.tsx
+++ b/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)} /> */}
diff --git a/example/src/stack.tsx b/example/src/stack.tsx
index 22c536c..844e547 100644
--- a/example/src/stack.tsx
+++ b/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}}
diff --git a/example/src/stacked-cards.tsx b/example/src/stacked-cards.tsx
index ee8c71c..9f9762b 100644
--- a/example/src/stacked-cards.tsx
+++ b/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) => (
diff --git a/example/src/vertical.tsx b/example/src/vertical.tsx
new file mode 100644
index 0000000..e30f37a
--- /dev/null
+++ b/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};
diff --git a/mock.js b/mock.js
new file mode 100644
index 0000000..9c5f10b
--- /dev/null
+++ b/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: {},
+  };
+});
diff --git a/package.json b/package.json
index 47d897a..9849e7c 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@crowdlinker/react-native-pager",
-  "version": "0.1.16",
+  "version": "0.1.18-beta.1",
   "main": "dist/index.js",
   "module": "dist/pager.esm.js",
   "typings": "dist/index.d.ts",
   "author": "andrew smith",
   "files": [
-    "dist"
+    "dist",
+    "mock.js"
   ],
   "repository": {
     "type": "git",
@@ -38,18 +39,25 @@
     "trailingComma": "es5"
   },
   "devDependencies": {
+    "@testing-library/jest-native": "^3.0.2",
+    "@testing-library/react-native": "^4.1.0",
     "@types/jest": "^24.0.18",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-native": "^0.60.11",
+    "babel-plugin-module-resolver": "^3.2.0",
     "husky": "^3.0.5",
+    "metro-react-native-babel-preset": "^0.56.3",
     "prettier": "^1.18.2",
+    "pretty-format": "^24.9.0",
     "pretty-quick": "^1.11.1",
-    "react": "^16.9.0",
+    "react": "^16.11.0",
     "react-dom": "^16.9.0",
     "react-native": "^0.60.5",
     "react-native-gesture-handler": "^1.4.1",
     "react-native-reanimated": "^1.3.0",
+    "react-test-renderer": "^16.11.0",
+    "ts-jest": "^24.1.0",
     "tsdx": "^0.9.1",
     "tslib": "^1.10.0",
     "typescript": "^3.6.2"
@@ -71,5 +79,21 @@
     "tabs",
     "react-native-tabs",
     "react-tabs"
-  ]
+  ],
+  "jest": {
+    "preset": "@testing-library/react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(react-native|react-native-screens|react-native-reanimated|react-native-gesture-handler)/)"
+    ],
+    "setupFilesAfterEnv": [
+      "./test/setup.ts",
+      "@testing-library/react-native/cleanup-after-each"
+    ],
+    "transform": {
+      "^.+\\.(t)sx?$": "ts-jest"
+    }
+  }
 }
diff --git a/src/pager.tsx b/src/pager.tsx
index 45da341..f8ec235 100644
--- a/src/pager.tsx
+++ b/src/pager.tsx
@@ -4,7 +4,6 @@ import React, {
   createContext,
   useContext,
   useEffect,
-  memo,
 } from 'react';
 import { StyleSheet, LayoutChangeEvent, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
@@ -13,7 +12,6 @@ import {
   State,
   PanGestureHandlerProperties,
 } from 'react-native-gesture-handler';
-import { memoize, interpolateWithConfig } from './util';
 
 export type SpringConfig = {
   damping: Animated.Adaptable<number>;
@@ -61,6 +59,9 @@ export interface iPageInterpolation {
 
 const VERTICAL = 1;
 const HORIZONTAL = 2;
+const UNSET = -1;
+const TRUE = 1;
+const FALSE = 0;
 
 const {
   event,
@@ -70,36 +71,28 @@ const {
   cond,
   eq,
   add,
-  or,
   stopClock,
   Clock,
   set,
   clockRunning,
-  spring,
-  startClock,
   multiply,
-  neq,
   sub,
   call,
   max,
   min,
   greaterThan,
   abs,
-  lessThan,
   ceil,
+  interpolate,
+  concat,
+  neq,
+  and,
+  startClock,
+  spring,
   // @ts-ignore
   debug,
 } = Animated;
 
-const DEFAULT_SPRING_CONFIG = {
-  stiffness: 1000,
-  damping: 500,
-  mass: 3,
-  overshootClamping: false,
-  restDisplacementThreshold: 0.01,
-  restSpeedThreshold: 0.01,
-};
-
 export interface iPager {
   activeIndex?: number;
   onChange?: (nextIndex: number) => void;
@@ -129,98 +122,65 @@ export interface iPager {
 }
 const REALLY_BIG_NUMBER = 1000000000;
 
+// at its core, this component converts an activeIndex integer value to an Animated.Value
+// this animated value represents all intermediate values of a pager, e.g when a user is dragging, the index
+// value might be anything between 1 -> 2 as they are moving. when a gesture is completed, it figures out
+// the next activeIndex, snaps to it and passes it back. it also handles snapping to different indices when the activeIndex
+// prop changes.
+
+// all styles and positioning of child screens can be computed from this one value, based on a childs index and
+// any style config props passed to the Pager.
+
+// pretty much all other props passed to the Pager are configurations for different behaviours of what is described above
+
 function Pager({
   activeIndex: parentActiveIndex,
   onChange: parentOnChange,
   initialIndex = 0,
   children,
-  springConfig = DEFAULT_SPRING_CONFIG,
+  springConfig,
   panProps = {},
   pageSize = 1,
   threshold = 0.1,
   minIndex = 0,
   maxIndex: parentMax,
   adjacentChildOffset = 10,
-  animatedValue,
   style,
   containerStyle,
   type = 'horizontal',
   pageInterpolation,
-  clamp = {
-    prev: REALLY_BIG_NUMBER,
-    next: REALLY_BIG_NUMBER,
-  },
-  clampDrag = {
-    prev: REALLY_BIG_NUMBER,
-    next: REALLY_BIG_NUMBER,
-  },
-  animatedIndex: parentAnimatedIndex,
+  clamp = {},
+  clampDrag = {},
+  animatedValue,
 }: iPager) {
   const context = useContext(PagerContext);
 
-  // register these props if they exist -- they can be shared with other
-  // components to keep the translation values in sync
-
-  // prioritize direct prop, then context, then internal value
-  // memoize these so they don't get reset on rerenders
-  const _animatedValue =
-    animatedValue !== undefined
-      ? animatedValue
-      : context
-      ? context[2]
-      : new Value(0);
-
-  const translationValue = memoize(_animatedValue);
-
-  const _animatedIndex =
-    parentAnimatedIndex !== undefined
-      ? parentAnimatedIndex
-      : context
-      ? context[3]
-      : new Value(0);
-
-  const animatedIndex = memoize(_animatedIndex);
+  const isControlled = parentActiveIndex !== undefined;
 
   const [_activeIndex, _onChange] = useState(initialIndex);
 
-  // assign activeIndex and onChange correctly based on controlled / uncontrolled
-  // configurations
-
-  // prioritize direct prop over context, and context over internal state
-  const isControlled = parentActiveIndex !== undefined;
-
   const activeIndex = isControlled
-    ? parentActiveIndex
+    ? (parentActiveIndex as number)
     : context
-    ? context[0]
-    : (_activeIndex as any);
-
-  const onChange = isControlled
-    ? parentOnChange
-    : context
-    ? context[1]
-    : (_onChange as any);
+    ? (context[0] as number)
+    : (_activeIndex as number);
 
   const numberOfScreens = Children.count(children);
 
-  // maxIndex might change over time, but computations using this value are memoized
-  // so it should be saved and updated as an Animated.Value accordingly
-  const maxIndexValue =
+  const maxIndex =
     parentMax === undefined
       ? Math.ceil((numberOfScreens - 1) / pageSize)
       : parentMax;
 
-  const maxIndex = memoize(new Value(maxIndexValue));
-
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      maxIndex.setValue(maxIndexValue);
-    });
-  }, [maxIndexValue]);
+  const onChange = isControlled
+    ? (parentOnChange as any)
+    : context
+    ? (context[1] as any)
+    : (_onChange as any);
 
   const dragX = memoize(new Value(0));
   const dragY = memoize(new Value(0));
-  const gestureState = memoize(new Value(-1));
+  const gestureState = memoize(new Value(0));
 
   const handleGesture = memoize(
     event(
@@ -251,228 +211,161 @@ function Pager({
     )
   );
 
-  const [width, setWidth] = useState(0);
-  const [height, setHeight] = useState(0);
-
-  const dimension = memoize(new Value(0));
-
-  function handleLayout({ nativeEvent: { layout } }: LayoutChangeEvent) {
-    layout.width !== width && setWidth(layout.width);
-    layout.height !== height && setHeight(layout.height);
+  let initialWidth = UNSET;
+  if (style && style.width) {
+    if (typeof style.width === 'number') {
+      initialWidth = style.width;
+    }
   }
 
-  const TYPE = type === 'vertical' ? VERTICAL : HORIZONTAL;
+  let initialHeight = UNSET;
+  if (style && style.height) {
+    if (typeof style.height === 'number') {
+      initialHeight = style.height;
+    }
+  }
 
-  Animated.useCode(
-    cond(
-      // dimension already set to last layout
-      or(eq(dimension, width), eq(dimension, height)),
-      [],
-      [
-        cond(eq(TYPE, VERTICAL), set(dimension, height), set(dimension, width)),
-        set(translationValue, multiply(activeIndex, dimension, -1)),
-      ]
-    ),
-    [width, height]
-  );
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
 
-  // assign variables based on vertical / horizontal configurations
+  // assign references based on vertical / horizontal configurations
+  const dimension = memoize(new Value(0));
   const targetDimension = type === 'vertical' ? 'height' : 'width';
-  const translateValue = type === 'vertical' ? 'translateY' : 'translateX';
-  const dragValue = type === 'vertical' ? dragY : dragX;
-
-  // compute the total size of a page to determine how far to snap
-  const page = memoize(multiply(dimension, pageSize));
+  const targetTransform = type === 'vertical' ? 'translateY' : 'translateX';
+  const delta = type === 'vertical' ? dragY : dragX;
 
-  // only need one clock
-  const clock = memoize(new Clock());
+  const layoutDimension = type === 'vertical' ? height : width;
 
-  const runSpring = memoize((nextIndex: Animated.Node<number>) => {
-    const state = {
-      finished: new Value(0),
-      velocity: new Value(0),
-      position: new Value(0),
-      time: new Value(0),
-    };
+  // `totalDimension` on the container view is required for android layouts to work properly
+  // otherwise translations move the panHandler off of the screen
+  // set the total width of the container view to the sum width of all the screens
+  const totalDimension = multiply(dimension, numberOfScreens);
 
-    const config = {
-      ...DEFAULT_SPRING_CONFIG,
-      ...springConfig,
-      toValue: new Value(0),
-    };
+  function handleLayout({ nativeEvent: { layout } }: LayoutChangeEvent) {
+    layout.width !== width && setWidth(layout.width);
+    layout.height !== height && setHeight(layout.height);
+  }
 
-    const nextPosition = multiply(nextIndex, page, -1);
+  const TYPE = type === 'vertical' ? VERTICAL : HORIZONTAL;
 
-    return block([
-      cond(
-        clockRunning(clock),
-        [
-          set(state.position, translationValue),
-          set(state.finished, 0),
-          // only set the toValue when needed
-          // this block runs a lot, hopefully this helps with performance
-          cond(
-            neq(config.toValue, nextPosition),
-            set(config.toValue, nextPosition)
-          ),
-
-          set(animatedIndex, divide(state.position, max(dimension, 1), -1)),
-        ],
-        [
-          set(state.position, translationValue),
-          set(state.finished, 0),
-          set(state.time, 0),
-          set(state.velocity, 0),
-          set(config.toValue, nextPosition),
-          startClock(clock),
-        ]
-      ),
-      spring(clock, state, config),
-      cond(state.finished, [stopClock(clock), set(state.time, 0)]),
-      state.position,
-    ]);
-  });
+  // props that might change over time should be reactive:
+  const animatedThreshold = useAnimatedValue(threshold);
+  const clampDragPrev = useAnimatedValue(clampDrag.prev, REALLY_BIG_NUMBER);
+  const clampDragNext = useAnimatedValue(clampDrag.next, REALLY_BIG_NUMBER);
+  const animatedMaxIndex = useAnimatedValue(maxIndex);
+  const animatedMinIndex = useAnimatedValue(minIndex);
+
+  // set the initial position - priority to direct prop over context, and context over uncontrolled
+  const _position = memoize(new Value(activeIndex));
+  const position = animatedValue
+    ? animatedValue
+    : context
+    ? context[2]
+    : _position;
 
-  // most important parts of the following function:
-  // `swiping` is used to determine how the activeIndex changed
-  //  if an index change occurs and the state is swiping, its safe to say
-  //  it occured by user action, and not an external / parent activeIndex prop change
-  const swiping = memoize(new Value(0));
+  // pan event values to track
   const dragStart = memoize(new Value(0));
+  const swiping = memoize(new Value(FALSE));
+  const nextIndex = memoize(new Value(activeIndex));
+  const animatedActiveIndex = memoize(new Value(activeIndex));
+  const change = memoize(sub(animatedActiveIndex, position));
+  const absChange = memoize(abs(change));
+  const shouldTransition = memoize(greaterThan(absChange, animatedThreshold));
+  const indexChange = memoize(new Value(0));
+
+  // clamp drag values between the configured clamp props
+  // e.g prev => 0.5, next => 0.5 means change can only be between [-0.5, 0.5]
+  // minMax order is reversed because next is negative in translation values
+  const clampedDelta = memoize(
+    min(
+      max(divide(delta, dimension), multiply(clampDragNext, -1)),
+      clampDragPrev
+    )
+  );
 
-  // position is a different name for the current index registered with the <Pager />
-  // it does not necessarily reflect the activeIndex in all states
-  const position = memoize(new Value(activeIndex));
-
-  // `nextPosition` is computed every frame (could be optimized probably)
-  // and the value is used on release to snap to a given index offset
-  // updating this value will trigger the spring to snap when the user releases or
-  // if the activeIndex prop changes
-  const nextPosition = memoize(new Value(0));
+  const clock = memoize(new Clock());
 
-  // Animated.useCode doesn't seem to fire in time to update the nextPosition
-  // value to trigger transitions, not sure why but this works for now
+  // snap focus to activeIndex when it updates
   useEffect(() => {
-    if (activeIndex >= minIndex && activeIndex <= maxIndexValue) {
-      requestAnimationFrame(() => {
-        nextPosition.setValue(activeIndex);
-      });
+    if (activeIndex >= minIndex && activeIndex <= maxIndex) {
+      nextIndex.setValue(activeIndex);
     }
-  }, [activeIndex, maxIndexValue, minIndex]);
-
-  // compute the next snap point - it could be multiply screens depending
-  // on how far the user has dragged and what pageSize value is
-  const clampedDragPrev =
-    clampDrag.prev !== undefined ? clampDrag.prev : REALLY_BIG_NUMBER;
-
-  const clampedDragNext =
-    clampDrag.next !== undefined ? clampDrag.next : REALLY_BIG_NUMBER;
-
-  // clamps the drag value between previous and next values
-  // this defaults to a really large amount so there is no real clamping
-  // but it can be use to prevent the user from swiping in a certain direction
-  // e.g clampDragNext value of 0 means the user cannot swipe to the next screen
-  // at all
-  const clampedDragValue = memoize(
-    max(min(clampedDragPrev, dragValue), multiply(clampedDragNext, -1))
-  );
-
-  const percentDragged = memoize(divide(clampedDragValue, dimension));
-
-  // use pageSize to determine how many screens the user has dragged
-  // the default is 100% of a page
-  const numberOfPagesDragged = memoize(
-    ceil(divide(abs(percentDragged), pageSize))
-  );
-
-  // next and previous indices based on how far the user has dragged, accounting
-  // for the potential of dragging past the min/max index values of the <Pager />
-  const nextIndex = memoize(min(add(position, numberOfPagesDragged), maxIndex));
-  const prevIndex = memoize(max(sub(position, numberOfPagesDragged), minIndex));
+  }, [activeIndex, minIndex, maxIndex]);
 
-  // if shouldTransition evaluates to true, it will snap to either previous or next
-  // depending on the direction of the drag
-  const shouldTransition = memoize(greaterThan(abs(percentDragged), threshold));
-
-  const translation = memoize(
+  // animatedIndex represents pager position with an animated value
+  // this value is used to compute the transformations of the container screen
+  // its also used to compute the offsets of child screens, and any other consumers
+  const animatedIndex = memoize(
     block([
       cond(
         eq(gestureState, State.ACTIVE),
         [
           cond(clockRunning(clock), stopClock(clock)),
-          cond(swiping, 0, set(dragStart, translationValue)),
-          set(swiping, 1),
-          set(
-            nextPosition,
-            cond(
-              shouldTransition,
-              [cond(lessThan(percentDragged, 0), nextIndex, prevIndex)],
-              position
-            )
-          ),
-          // `animatedIndex` is updated here to track index changes as an animated value
-          // this means it can have intermediate values (e.g 1.23) which is an easier value
-          // for other components (e.g Pagination) to consume
-          set(
-            animatedIndex,
-            divide(add(clampedDragValue, dragStart), max(dimension, 1), -1)
-          ),
-          set(translationValue, add(clampedDragValue, dragStart)),
-        ],
+          // captures the initial drag value on first drag event
+          cond(swiping, 0, [set(dragStart, position), set(swiping, TRUE)]),
 
-        // on release or index change, the following runs:
-
-        // if the position has changed then alert the active onChange callback
-        // its better to use it in this block rather than Animated.onChange,
-        // as it seems to fire mid block and start other blocks, causing the potential
-        // for a loop of updates to activeIndex on rapid index changes that the component
-        // can't resolve
-
-        // note that the onChange callback only needs to be updated if a user was swiping,
-        // otherwise it must have come from a controlled prop, in which case that
-        // component already knows the activeIndex
-        // this prevents another potential rerender from an incorrect increment / decrement
+          set(position, sub(dragStart, clampedDelta)),
+        ],
         [
-          cond(neq(position, nextPosition), [
-            set(position, nextPosition),
-            cond(
-              swiping,
-              call([position], ([nextIndex]) => onChange(nextIndex))
-            ),
+          // on release -- figure out if the index needs to change, and what index it should change to
+          cond(swiping, [
+            set(swiping, FALSE),
+            cond(shouldTransition, [
+              // rounds index change if pan gesture greater than just one screen
+              set(indexChange, ceil(absChange)),
+              // nextIndex set to the next snap point
+              set(
+                nextIndex,
+                cond(
+                  greaterThan(change, 0),
+                  min(
+                    max(
+                      sub(animatedActiveIndex, indexChange),
+                      animatedMinIndex
+                    ),
+                    animatedMaxIndex
+                  ),
+                  min(
+                    max(
+                      add(animatedActiveIndex, indexChange),
+                      animatedMinIndex
+                    ),
+                    animatedMaxIndex
+                  )
+                )
+              ),
+              // update w/ value that will be snapped to
+              call([nextIndex], ([nextIndex]) => onChange(nextIndex)),
+            ]),
           ]),
-          set(swiping, 0),
-          set(translationValue, runSpring(position)),
-          translationValue,
+
+          // set animatedActiveIndex for next swipe event
+          set(animatedActiveIndex, nextIndex),
+          set(position, runSpring(clock, position, nextIndex, springConfig)),
         ]
       ),
+      position,
     ])
   );
 
-  // compute the minimum and maximum distance from the active screen window
-  // these are min-maxed in <Page /> to enable control of their positioning
-
-  // inverse used here to make the mental math a little less complex
-  // since screens are positioned starting from 0 to totalDimension
-  // and translation values are 0 to -totalDimension
-  const inverseTranslate = memoize(multiply(translation, -1));
-
-  // the max distance a screen can have from the active window should be
-  // the max number of possible screens that the pager will render (numberOfScreens)
-  // hence that is the default value when undefined
-  const clampPrevValue =
-    clamp.prev !== undefined ? clamp.prev : numberOfScreens;
-  const clampNextValue =
-    clamp.next !== undefined ? clamp.next : numberOfScreens;
-
-  // determine how far offset previous / next screens can possibly be
-  // this will clamp them on either side of the active window if a value
-  // is specified
-  const clampPrev = memoize(
-    sub(inverseTranslate, multiply(dimension, clampPrevValue))
+  const clampPrevValue = useAnimatedValue(clamp.prev, numberOfScreens);
+  const clampNextValue = useAnimatedValue(clamp.next, numberOfScreens);
+
+  // stop child screens from translating beyond the bounds set by clamp props:
+  const minimum = memoize(
+    multiply(sub(animatedIndex, clampPrevValue), dimension)
   );
 
-  const clampNext = memoize(
-    add(inverseTranslate, multiply(dimension, clampNextValue))
+  const maximum = memoize(
+    multiply(add(animatedIndex, clampNextValue), dimension)
+  );
+
+  const animatedPageSize = useAnimatedValue(pageSize);
+
+  // container offset -- this is the window of focus for active screens
+  // it shifts around based on the animatedIndex value
+  const containerTranslation = memoize(
+    multiply(animatedIndex, dimension, animatedPageSize, -1)
   );
 
   // slice the children that are rendered by the <Pager />
@@ -491,11 +384,6 @@ function Pager({
         )
       : children;
 
-  // `totalDimension` on the container view is required for android layouts to work properly
-  // otherwise translations move the panHandler off of the screen
-  // set the total width of the container view to the sum width of all the screens
-  const totalDimension = memoize(multiply(dimension, numberOfScreens));
-
   // grabbing the height property from the style prop if there is no container style, this reduces
   // the chances of messing up the layout with containerStyle configurations
   // can be overridden by the prop itself, but its likely that this is what is intended most of the time
@@ -503,12 +391,69 @@ function Pager({
   const defaultContainerStyle =
     style && style.height ? { height: style.height } : undefined;
 
+  function renderChildren() {
+    // waiting for initial layout - except when testing
+    if (width === UNSET) {
+      return null;
+    }
+
+    return adjacentChildren.map((child: any, i) => {
+      // use map instead of React.Children because we want to track
+      // the keys of these children by there index
+      // React.Children shifts these key values intelligently, but it
+      // causes issues with the memoized values in <Page /> components
+      let index = i;
+
+      if (adjacentChildOffset !== undefined) {
+        index =
+          activeIndex <= adjacentChildOffset
+            ? i
+            : activeIndex - adjacentChildOffset + i;
+      }
+
+      return (
+        <IndexProvider index={index} key={index}>
+          <FocusProvider focused={index === activeIndex}>
+            <Page
+              index={index}
+              animatedIndex={animatedIndex}
+              minimum={minimum}
+              maximum={maximum}
+              dimension={dimension}
+              targetTransform={targetTransform}
+              targetDimension={targetDimension}
+              pageInterpolation={pageInterpolation}
+            >
+              {child}
+            </Page>
+          </FocusProvider>
+        </IndexProvider>
+      );
+    });
+  }
+
   // extra Animated.Views below may seem redundant but they preserve applied styles e.g padding and margin
   // of the page views
   return (
     <Animated.View
       style={containerStyle || defaultContainerStyle || { flex: 1 }}
     >
+      <Animated.Code
+        key={layoutDimension}
+        exec={cond(
+          // dimension already set to last layout
+          and(eq(dimension, width), eq(dimension, height)),
+          [],
+          [
+            cond(
+              eq(TYPE, VERTICAL),
+              set(dimension, height),
+              set(dimension, width)
+            ),
+          ]
+        )}
+      />
+
       <PanGestureHandler
         {...panProps}
         onGestureEvent={handleGesture}
@@ -521,45 +466,11 @@ function Pager({
                 style={{
                   flex: 1,
                   [targetDimension]: totalDimension,
-                  transform: [{ [translateValue]: translation }],
+                  transform: [{ [targetTransform]: containerTranslation }],
                 }}
+                accessibilityRole="tablist"
               >
-                {width === 0
-                  ? null
-                  : adjacentChildren.map((child: any, i) => {
-                      // use map instead of React.Children because we want to track
-                      // the keys of these children by there index
-                      // React.Children shifts these key values intelligently, but it
-                      // causes issues with the memoized values in <Page /> components
-                      let index = i;
-
-                      if (adjacentChildOffset !== undefined) {
-                        index =
-                          activeIndex <= adjacentChildOffset
-                            ? i
-                            : activeIndex - adjacentChildOffset + i;
-                      }
-
-                      return (
-                        <Page
-                          key={index}
-                          index={index}
-                          dimension={dimension}
-                          translation={translation}
-                          targetDimension={targetDimension}
-                          translateValue={translateValue}
-                          clampPrev={clampPrev}
-                          clampNext={clampNext}
-                          pageInterpolation={pageInterpolation}
-                        >
-                          <IndexProvider index={index}>
-                            <FocusProvider focused={index === activeIndex}>
-                              {child}
-                            </FocusProvider>
-                          </IndexProvider>
-                        </Page>
-                      );
-                    })}
+                {renderChildren()}
               </Animated.View>
             </Animated.View>
           </Animated.View>
@@ -570,27 +481,27 @@ function Pager({
 }
 
 interface iPage {
+  children: React.ReactNode;
   index: number;
-  dimension: Animated.Value<number>;
-  translation: Animated.Node<number>;
+  minimum: Animated.Node<number>;
+  maximum: Animated.Node<number>;
+  dimension: Animated.Node<number>;
+  targetTransform: 'translateX' | 'translateY';
   targetDimension: 'width' | 'height';
-  translateValue: 'translateX' | 'translateY';
-  pageInterpolation?: iPageInterpolation;
-  children: React.ReactNode;
-  clampPrev: Animated.Node<number>;
-  clampNext: Animated.Node<number>;
+  pageInterpolation: iPageInterpolation | undefined;
+  animatedIndex: Animated.Value<number>;
 }
 
-function _Page({
+function Page({
+  children,
   index,
+  minimum,
+  maximum,
   dimension,
-  translation,
+  targetTransform,
   targetDimension,
-  translateValue,
-  clampPrev,
-  clampNext,
   pageInterpolation,
-  children,
+  animatedIndex,
 }: iPage) {
   // compute the absolute position of the page based on index and dimension
   // this means that it's not relative to any other child, which is good because
@@ -598,51 +509,49 @@ function _Page({
   // to properly position pages
   const position = memoize(multiply(index, dimension));
 
+  // min-max the position based on clamp values
+  // this means the <Page /> will have a container that is always positioned
+  // in the same place, but the inner view can be translated within these bounds
+  const translation = memoize(min(max(position, minimum), maximum));
+
   const defaultStyle = memoize({
     // map to height / width value depending on vertical / horizontal configuration
+    // this is crucial to getting child views to properly lay out
     [targetDimension]: dimension,
     // min-max the position based on clamp values
     // this means the <Page /> will have a container that is always positioned
     // in the same place, but the inner view can be translated within these bounds
-    transform: [{ [translateValue]: min(max(position, clampPrev), clampNext) }],
+    transform: [
+      {
+        [targetTransform]: translation,
+      },
+    ],
   });
 
-  // compute the relative offset value to the current translation (__not__ index) so
+  // compute the relative offset value to the current animated index so
   // that <Page /> can use interpolation values that are in sync with drag gestures
-  const offset = memoize(divide(add(translation, position), max(dimension, 1)));
+  const offset = memoize(sub(index, animatedIndex));
 
   // apply interpolation configs to <Page />
   const interpolatedStyles = memoize(
     interpolateWithConfig(offset, pageInterpolation)
   );
 
-  // take out zIndex here as it needs to be applied to siblings, which inner containers
-  // are not, however the outer container requires the absolute translateX/Y to properly
-  // position itself
+  // take out zIndex here as it needs to be applied to siblings
   let { zIndex, ...otherStyles } = interpolatedStyles;
 
   // zIndex is not a requirement of interpolation
   // it will be clear when someone needs it as views will overlap with some configurations
   if (!zIndex) {
-    zIndex = -index;
-  }
-
-  // prevent initial style interpolations from bleeding through by delaying the view
-  // appearance until it has first laid out, otherwise there are some flashes of transformation
-  // as the page enters the view
-  const [initialized, setInitialized] = useState(false);
-  function handleLayout() {
-    setInitialized(true);
+    zIndex = 0;
   }
 
   return (
     <Animated.View
-      onLayout={handleLayout}
       style={{
         ...StyleSheet.absoluteFillObject,
         ...defaultStyle,
-        opacity: initialized ? 1 : 0,
-        zIndex: zIndex,
+        zIndex,
       }}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, otherStyles]}>
@@ -652,12 +561,27 @@ function _Page({
   );
 }
 
-const Page = memo(_Page);
+// utility to update animated values without changing their reference
+// this is key for using memoized Animated.Values and prevents costly rerenders
+function useAnimatedValue(
+  value?: number,
+  defaultValue = 0
+): Animated.Value<number> {
+  const initialValue = value !== undefined ? value : defaultValue;
+  const animatedValue = memoize(new Value(initialValue));
+
+  useEffect(() => {
+    if (value !== undefined) {
+      animatedValue.setValue(value);
+    }
+  }, [value]);
+
+  return animatedValue;
+}
 
 type iPagerContext = [
   number,
   (nextIndex: number) => void,
-  Animated.Value<number>,
   Animated.Value<number>
 ];
 
@@ -686,17 +610,14 @@ function PagerProvider({
   const activeIndex = isControlled ? parentActiveIndex : _activeIndex;
   const onChange = isControlled ? parentOnChange : _setActiveIndex;
 
-  const animatedValue = memoize(new Value(0));
   const animatedIndex = memoize(new Value(activeIndex));
 
   return (
     <PagerContext.Provider
-      value={
-        [activeIndex, onChange, animatedValue, animatedIndex] as iPagerContext
-      }
+      value={[activeIndex, onChange, animatedIndex] as iPagerContext}
     >
       {typeof children === 'function'
-        ? children({ activeIndex, onChange })
+        ? children({ activeIndex, onChange, animatedIndex })
         : children}
     </PagerContext.Provider>
   );
@@ -767,24 +688,125 @@ function useOnFocus(fn: Function) {
 
 function useAnimatedIndex() {
   const pager = usePager();
-  return pager[3];
+  return pager[2];
 }
 
 function useOffset(index: number) {
-  const pager = usePager();
-  const animatedIndex = pager[3];
+  const animatedIndex = useAnimatedIndex();
   const offset = memoize(sub(index, animatedIndex));
 
   return offset;
 }
 
-function useInterpolation(pageInterpolation: iPageInterpolation) {
-  const index = useIndex();
-  const offset = useOffset(index);
-  const styles = interpolateWithConfig(offset, pageInterpolation);
+function useInterpolation(
+  pageInterpolation: iPageInterpolation,
+  index?: number
+) {
+  const _index = index !== undefined ? index : useIndex();
+  const offset = useOffset(_index);
+  const styles = memoize(interpolateWithConfig(offset, pageInterpolation));
   return styles;
 }
 
+function interpolateWithConfig(
+  offset: Animated.Node<number>,
+  pageInterpolation?: iPageInterpolation
+): ViewStyle {
+  if (!pageInterpolation) {
+    return {};
+  }
+
+  return Object.keys(pageInterpolation).reduce((styles: any, key: any) => {
+    const currentStyle = pageInterpolation[key];
+
+    if (Array.isArray(currentStyle)) {
+      const _style = currentStyle.map((interpolationConfig: any) =>
+        interpolateWithConfig(offset, interpolationConfig)
+      );
+
+      styles[key] = _style;
+      return styles;
+    }
+
+    if (typeof currentStyle === 'object') {
+      let _style;
+      const { unit, ...rest } = currentStyle;
+      if (currentStyle.unit) {
+        _style = concat(interpolate(offset, rest), currentStyle.unit);
+      } else {
+        _style = interpolate(offset, currentStyle);
+      }
+
+      styles[key] = _style;
+      return styles;
+    }
+
+    if (typeof currentStyle === 'function') {
+      const _style = currentStyle(offset);
+      styles[key] = _style;
+      return styles;
+    }
+
+    return styles;
+  }, {});
+}
+
+function memoize(value: any): any {
+  const ref = React.useRef(value);
+  return ref.current;
+}
+
+const DEFAULT_SPRING_CONFIG = {
+  stiffness: 1000,
+  damping: 500,
+  mass: 3,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.01,
+  restSpeedThreshold: 0.01,
+};
+
+function runSpring(
+  clock: Animated.Clock,
+  position: Animated.Value<number>,
+  toValue: Animated.Node<number>,
+  springConfig?: Partial<SpringConfig>
+) {
+  const state = {
+    finished: new Value(0),
+    velocity: new Value(0),
+    position: position,
+    time: new Value(0),
+  };
+
+  const config = {
+    ...DEFAULT_SPRING_CONFIG,
+    ...springConfig,
+    toValue: new Value(0),
+  };
+
+  return block([
+    cond(
+      clockRunning(clock),
+      [
+        cond(neq(config.toValue, toValue), [
+          set(state.finished, 0),
+          set(config.toValue, toValue),
+        ]),
+      ],
+      [
+        set(state.finished, 0),
+        set(state.time, 0),
+        set(state.velocity, 0),
+        set(config.toValue, toValue),
+        startClock(clock),
+      ]
+    ),
+    spring(clock, state, config),
+    cond(state.finished, [stopClock(clock), set(state.position, position)]),
+    state.position,
+  ]);
+}
+
 export {
   Pager,
   PagerProvider,
@@ -796,4 +818,6 @@ export {
   useIndex,
   useAnimatedIndex,
   useInterpolation,
+  IndexProvider,
+  FocusProvider,
 };
diff --git a/src/util.ts b/src/util.ts
index 8af9676..bcfa9e3 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -111,7 +111,7 @@ function runSpring(
       ]
     ),
     spring(clock, state, config),
-    cond(state.finished, [stopClock(clock), set(position, state.position)]),
+    cond(state.finished, [stopClock(clock), set(state.position, position)]),
     state.position,
   ]);
 }
diff --git a/test/blah.test.tsx b/test/blah.test.tsx
deleted file mode 100644
index dc4277f..0000000
--- a/test/blah.test.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-test('init', () => {
-  expect(true).toBe(true);
-});
diff --git a/test/pager.test.tsx b/test/pager.test.tsx
new file mode 100644
index 0000000..e0135b1
--- /dev/null
+++ b/test/pager.test.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { render, fireEvent } from './test-utils';
+import { Pager, iPager, PagerProvider, usePager } from '../src';
+import { Text, Button } from 'react-native';
+
+function TestPager(props: iPager) {
+  // style prop will render children without waiting for layout events
+  return <Pager {...props} style={{ width: 100, height: 100 }} />;
+}
+
+test('render() works', () => {
+  render(
+    <TestPager>
+      <Text>1</Text>
+      <Text>2</Text>
+    </TestPager>
+  );
+});
+
+test('activeIndex and onChange props update pager', () => {
+  function Container({ spy }) {
+    const [activeIndex, onChange] = React.useState(0);
+
+    function handleChange(nextIndex: number) {
+      spy(nextIndex);
+      onChange(nextIndex);
+    }
+
+    return (
+      <TestPager activeIndex={activeIndex} onChange={onChange}>
+        <Text>Active Index: {activeIndex}</Text>
+        <Button
+          title={'change'}
+          onPress={() => handleChange(activeIndex + 1)}
+        />
+      </TestPager>
+    );
+  }
+
+  const spy = jest.fn();
+  const { getByText } = render(<Container spy={spy} />);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 1');
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith(1);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 2');
+});
+
+test('provider injects props into pager', () => {
+  function Provider({ spy }) {
+    const [activeIndex, onChange] = React.useState(0);
+
+    function handleChange(nextIndex: number) {
+      spy(nextIndex);
+      onChange(nextIndex);
+    }
+
+    return (
+      <PagerProvider activeIndex={activeIndex} onChange={handleChange}>
+        {({ onChange }) => (
+          <TestPager>
+            <Text>Active Index: {activeIndex}</Text>
+            <Button
+              title={'change'}
+              onPress={() => onChange(activeIndex + 1)}
+            />
+          </TestPager>
+        )}
+      </PagerProvider>
+    );
+  }
+
+  const spy = jest.fn();
+  const { getByText } = render(<Provider spy={spy} />);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 1');
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith(1);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 2');
+});
+
+test('consumers of provider are able to update pager', () => {
+  function Consumer() {
+    const [activeIndex, onChange] = usePager();
+    return <Button title="change" onPress={() => onChange(activeIndex + 1)} />;
+  }
+
+  function Provider({ spy }) {
+    const [activeIndex, onChange] = React.useState(0);
+
+    function handleChange(nextIndex: number) {
+      spy(nextIndex);
+      onChange(nextIndex);
+    }
+
+    return (
+      <PagerProvider activeIndex={activeIndex} onChange={handleChange}>
+        <TestPager>
+          <Text>Active Index: {activeIndex}</Text>
+          <Consumer />
+        </TestPager>
+      </PagerProvider>
+    );
+  }
+
+  const spy = jest.fn();
+  const { getByText } = render(<Provider spy={spy} />);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 1');
+  expect(spy).toHaveBeenCalledTimes(1);
+  expect(spy).toHaveBeenCalledWith(1);
+
+  fireEvent.press(getByText(/change/i));
+  getByText('Active Index: 2');
+});
+
+test.todo('adjacentChildren removes children');
+
+test.todo('useIndex()');
+test.todo('useFocus()');
+test.todo('usePager()');
+test.todo('useOnFocus()');
+test.todo('provider initialIndex prop works when uncontrolled');
+
+test.todo('consumers are able to use animatedIndex');
diff --git a/test/setup.ts b/test/setup.ts
new file mode 100644
index 0000000..6d5bc6b
--- /dev/null
+++ b/test/setup.ts
@@ -0,0 +1,50 @@
+jest.mock('react-native-reanimated', () => {
+  const mock = require('react-native-reanimated/mock');
+  mock.default.Value = function() {
+    return {
+      setValue: function() {},
+    };
+  };
+
+  mock.default.proc = function() {
+    return function() {};
+  };
+
+  return mock;
+});
+
+jest.mock('react-native-gesture-handler', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  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,
+    /* Other */
+    FlatList: View,
+    gestureHandlerRootHOC: jest.fn(),
+    Directions: {},
+  };
+});
+
+import '@testing-library/jest-native/extend-expect';
diff --git a/test/test-utils.ts b/test/test-utils.ts
new file mode 100644
index 0000000..1c4a2f7
--- /dev/null
+++ b/test/test-utils.ts
@@ -0,0 +1,78 @@
+import { render, prettyPrint } from '@testing-library/react-native';
+import format from 'pretty-format';
+
+const { ReactElement, ReactTestComponent } = format.plugins;
+
+function createFormatter(propsToRemove) {
+  const plugin = {
+    test(val: any) {
+      return val.props !== undefined;
+    },
+    serialize(
+      element: any,
+      config: any,
+      indentation: any,
+      depth: any,
+      refs: any,
+      printer: any
+    ) {
+      Object.keys(element.props).map(prop => {
+        if (propsToRemove.includes(prop)) {
+          delete element.props[prop];
+        }
+      });
+
+      if (ReactTestComponent.test(element)) {
+        return ReactTestComponent.serialize(
+          element,
+          config,
+          indentation,
+          depth,
+          refs,
+          printer
+        );
+      }
+
+      return ReactElement.serialize(
+        element,
+        config,
+        indentation,
+        depth,
+        refs,
+        printer
+      );
+    },
+  };
+
+  return plugin;
+}
+
+const removeStyleProp = createFormatter([
+  'style',
+  'pointerEvents',
+  'collapsable',
+]);
+
+const defaultPlugins = [removeStyleProp, ReactTestComponent, ReactElement];
+
+const customRender = (ui: any, options?: any) => {
+  const utils = render(ui, { ...options });
+
+  function removeStylesFromDebug() {
+    return console.log(
+      // @ts-ignore
+      prettyPrint(utils.baseElement, undefined, { plugins: defaultPlugins })
+    );
+  }
+
+  return {
+    ...utils,
+    debug: removeStylesFromDebug,
+  };
+};
+
+// re-export everything
+export * from '@testing-library/react-native';
+
+// override render method
+export { customRender as render };
diff --git a/tsconfig.json b/tsconfig.json
index 2938c75..db234f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,14 +9,14 @@
     "sourceMap": true,
     "rootDir": "./",
     "strict": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "strictNullChecks": true,
     "strictFunctionTypes": true,
     "strictPropertyInitialization": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
diff --git a/yarn.lock b/yarn.lock
index c39a585..466116c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1090,6 +1090,26 @@
     shell-quote "1.6.1"
     ws "^1.1.0"
 
+"@testing-library/jest-native@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-3.0.2.tgz#0faf8f00065f236ba9c3f379c3964c016fdff927"
+  integrity sha512-Bhkz81+CBCddSr4dmaTnBJRu6sA9ZjgI54m1CXt15NzJPh77/Ebp9gP1VXhP+5hHAilmefPMwwrN0sNuGY6LHQ==
+  dependencies:
+    chalk "^2.4.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    pretty-format "^24.0.0"
+    ramda "^0.26.1"
+    redent "^2.0.0"
+
+"@testing-library/react-native@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-4.1.0.tgz#5f0f6e808bbdb13ad62611861ab2b1c83123c8f9"
+  integrity sha512-hXTLHdCu0b4o2+GyBAc0BJlMTyTJc/iVT5Vo9HZZ0G721mwP6bCHC1kahOQrnhYsyA21sR6E2p0hJMR2DAaP3w==
+  dependencies:
+    pretty-format "^24.9.0"
+    wait-for-expect "^3.0.0"
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -1887,6 +1907,17 @@ babel-plugin-macros@^2.6.1:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
+babel-plugin-module-resolver@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.2.0.tgz#ddfa5e301e3b9aa12d852a9979f18b37881ff5a7"
+  integrity sha512-tjR0GvSndzPew/Iayf4uICWZqjBwnlMWjSx6brryfQ81F9rxBVqwDJtFCV8oOs0+vJeefK9TmdZtkIFdFe1UnA==
+  dependencies:
+    find-babel-config "^1.1.0"
+    glob "^7.1.2"
+    pkg-up "^2.0.0"
+    reselect "^3.0.1"
+    resolve "^1.4.0"
+
 babel-plugin-syntax-trailing-function-commas@^7.0.0-beta.0:
   version "7.0.0-beta.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz#aa213c1435e2bffeb6fca842287ef534ad05d5cf"
@@ -3657,6 +3688,14 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
@@ -4198,6 +4237,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 infer-owner@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@@ -4626,7 +4670,7 @@ jest-diff@^23.6.0:
     jest-get-type "^22.1.0"
     pretty-format "^23.6.0"
 
-jest-diff@^24.9.0:
+jest-diff@^24.0.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -4736,7 +4780,7 @@ jest-leak-detector@^24.9.0:
     jest-get-type "^24.9.0"
     pretty-format "^24.9.0"
 
-jest-matcher-utils@^24.9.0:
+jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
   integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
@@ -5070,6 +5114,11 @@ json5@2.x, json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -5249,6 +5298,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -5546,6 +5600,47 @@ metro-react-native-babel-preset@0.54.1:
     metro-babel7-plugin-react-transform "0.54.1"
     react-transform-hmr "^1.0.4"
 
+metro-react-native-babel-preset@^0.56.3:
+  version "0.56.3"
+  resolved "https://registry.yarnpkg.com/metro-react-native-babel-preset/-/metro-react-native-babel-preset-0.56.3.tgz#5a1097c2f94e8ee0797a8ba2ab8f86d096f4c093"
+  integrity sha512-tGPzX2ZwI8vQ8SiNVBPUIgKqmaRNVB6rtJtHCBQZAYRiMbxh0NHCUoFfKBej6U5qVgxiYYHyN8oB23evG4/Oow==
+  dependencies:
+    "@babel/plugin-proposal-class-properties" "^7.0.0"
+    "@babel/plugin-proposal-export-default-from" "^7.0.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-optional-chaining" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.0.0"
+    "@babel/plugin-syntax-export-default-from" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.0.0"
+    "@babel/plugin-transform-classes" "^7.0.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.0.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.0.0"
+    "@babel/plugin-transform-object-assign" "^7.0.0"
+    "@babel/plugin-transform-parameters" "^7.0.0"
+    "@babel/plugin-transform-react-display-name" "^7.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-runtime" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.0.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    "@babel/template" "^7.0.0"
+    react-refresh "^0.4.0"
+
 metro-react-native-babel-transformer@0.54.1, metro-react-native-babel-transformer@^0.54.1:
   version "0.54.1"
   resolved "https://registry.yarnpkg.com/metro-react-native-babel-transformer/-/metro-react-native-babel-transformer-0.54.1.tgz#45b56db004421134e10e739f69e8de50775fef17"
@@ -6570,6 +6665,13 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
+  dependencies:
+    find-up "^2.1.0"
+
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
@@ -6632,7 +6734,7 @@ pretty-format@^23.6.0:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-pretty-format@^24.7.0, pretty-format@^24.9.0:
+pretty-format@^24.0.0, pretty-format@^24.7.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
   integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
@@ -6795,6 +6897,11 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
+ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6853,6 +6960,11 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
+react-is@^16.8.6:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
+  integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw==
+
 react-native-gesture-handler@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.4.1.tgz#c38d9e57637b95e221722a79f2bafac62e3aeb21"
@@ -6910,6 +7022,21 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
+react-refresh@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.4.2.tgz#54a277a6caaac2803d88f1d6f13c1dcfbd81e334"
+  integrity sha512-kv5QlFFSZWo7OlJFNYbxRtY66JImuP2LcrFgyJfQaf85gSP+byzG21UbDQEYjU7f//ny8rwiEkO6py2Y+fEgAQ==
+
+react-test-renderer@^16.11.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.11.0.tgz#72574566496462c808ac449b0287a4c0a1a7d8f8"
+  integrity sha512-nh9gDl8R4ut+ZNNb2EeKO5VMvTKxwzurbSMuGBoKtjpjbg8JK/u3eVPVNi1h1Ue+eYK9oSzJjb+K3lzLxyA4ag==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.17.0"
+
 react-transform-hmr@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
@@ -6918,10 +7045,10 @@ react-transform-hmr@^1.0.4:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@^16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
-  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
+react@^16.11.0:
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
+  integrity sha512-M5Y8yITaLmU0ynd0r1Yvfq98Rmll6q8AxaEe88c8e7LxO8fZ2cNgmFt0aGAS9wzf1Ao32NKXtCl+/tVVtkxq6g==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -7000,6 +7127,14 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 regenerate-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
@@ -7143,6 +7278,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+  integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -7177,7 +7317,7 @@ resolve@1.10.1:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@1.x, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
+resolve@1.x, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.11.1, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==
@@ -7451,6 +7591,14 @@ scheduler@^0.15.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
@@ -7923,6 +8071,11 @@ strip-eof@^1.0.0:
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
   integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+
 strip-json-comments@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
@@ -8184,6 +8337,22 @@ ts-jest@^24.0.2:
     semver "^5.5"
     yargs-parser "10.x"
 
+ts-jest@^24.1.0:
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.1.0.tgz#2eaa813271a2987b7e6c3fefbda196301c131734"
+  integrity sha512-HEGfrIEAZKfu1pkaxB9au17b1d9b56YZSqz5eCVE8mX68+5reOvlM93xGOzzCREIov9mdH7JBG+s0UyNAqr0tQ==
+  dependencies:
+    bs-logger "0.x"
+    buffer-from "1.x"
+    fast-json-stable-stringify "2.x"
+    json5 "2.x"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    mkdirp "0.x"
+    resolve "1.x"
+    semver "^5.5"
+    yargs-parser "10.x"
+
 tsdx@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/tsdx/-/tsdx-0.9.1.tgz#e0c9646d0bc95f8a01c96c7e7996a2c52a3eb270"
@@ -8525,6 +8694,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+wait-for-expect@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.1.tgz#ec204a76b0038f17711e575720aaf28505ac7185"
+  integrity sha512-3Ha7lu+zshEG/CeHdcpmQsZnnZpPj/UsG3DuKO8FskjuDbkx3jE3845H+CuwZjA2YWYDfKMU2KhnCaXMLd3wVw==
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"