chore: upgrade to expo 47 and latest pager-view (#1404)

Author: okwasniewski

example/package.json

@@ -12,22 +12,22 @@
   "dependencies": {
     "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "~1.17.3",
-    "expo": "^46.0.0",
-    "expo-asset": "~8.6.1",
-    "expo-constants": "~13.2.3",
-    "expo-keep-awake": "~10.2.0",
-    "expo-updates": "^0.14.5",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.5",
-    "react-native-pager-view": "5.4.25",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-web": "~0.18.7",
+    "expo": "^47.0.0",
+    "expo-asset": "~8.6.2",
+    "expo-constants": "~14.0.2",
+    "expo-keep-awake": "~11.0.1",
+    "expo-updates": "~0.15.4",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-pager-view": "6.1.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-web": "~0.18.9",
     "use-latest-callback": "^0.1.5"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "9.2.0",
-    "expo-cli": "^6.0.5"
+    "babel-preset-expo": "~9.2.1",
+    "expo-cli": "^6.0.8"
   }
 }

example/src/CustomTabBarExample.tsx

@@ -41,7 +41,7 @@ const CustomTabBarExample = () => {
       position,
     }: {
       navigationState: State;
-      position: Animated.AnimatedInterpolation;
+      position: Animated.AnimatedInterpolation<number>;
     }) =>
     ({ route, index }: { route: Route; index: number }) => {
       const inputRange = navigationState.routes.map((_, i) => i);

example/yarn.lock

@@ -50,8 +50,8 @@
     "@commitlint/config-conventional": "^17.1.0",
     "@expo/vector-icons": "^13.0.0",
     "@release-it/conventional-changelog": "^5.1.0",
-    "@types/react": "^18.0.14",
-    "@types/react-native": "0.69.5",
+    "@types/react": "^18.0.24",
+    "@types/react-native": "0.70.6",
     "babel-jest": "^29.0.1",
     "babel-loader": "^8.2.5",
     "babel-preset-react-native": "^4.0.0",
@@ -62,11 +62,11 @@
     "husky": "^4.2.5",
     "jest": "^29.0.1",
     "prettier": "^2.7.1",
-    "react": "18.0.0",
-    "react-native": "0.69.5",
-    "react-native-builder-bob": "^0.19.1",
-    "react-native-pager-view": "5.4.24",
-    "release-it": "^15.4.0",
+    "react": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-builder-bob": "^0.20.1",
+    "react-native-pager-view": "6.1.0",
+    "release-it": "^15.5.0",
     "typescript": "^4.8.2"
   },
   "peerDependencies": {

package.json

@@ -21,7 +21,7 @@ type Props<T extends Route> = PagerProps & {
     props: EventEmitterProps & {
       // Animated value which represents the state of current index
       // It can include fractional digits as it represents the intermediate value
-      position: Animated.AnimatedInterpolation;
+      position: Animated.AnimatedInterpolation<number>;
       // Function to actually render the content of the pager
       // The parent component takes care of rendering
       render: (children: React.ReactNode) => React.ReactNode;

src/PagerViewAdapter.tsx

@@ -27,7 +27,7 @@ type Props<T extends Route> = PagerProps & {
     props: EventEmitterProps & {
       // Animated value which represents the state of current index
       // It can include fractional digits as it represents the intermediate value
-      position: Animated.AnimatedInterpolation;
+      position: Animated.AnimatedInterpolation<number>;
       // Function to actually render the content of the pager
       // The parent component takes care of rendering
       render: (children: React.ReactNode) => React.ReactNode;

src/PanResponderAdapter.tsx

@@ -23,7 +23,7 @@ export type Props<T extends Route> = SceneRendererProps & {
 };
 
 const getTranslateX = (
-  position: Animated.AnimatedInterpolation,
+  position: Animated.AnimatedInterpolation<number>,
   routes: Route[],
   getTabWidth: GetTabWidth,
   gap?: number

src/TabBarIndicator.tsx

@@ -13,7 +13,7 @@ import PlatformPressable from './PlatformPressable';
 import type { Scene, Route, NavigationState } from './types';
 
 export type Props<T extends Route> = {
-  position: Animated.AnimatedInterpolation;
+  position: Animated.AnimatedInterpolation<number>;
   route: T;
   navigationState: NavigationState<T>;
   activeColor?: string;
@@ -47,7 +47,7 @@ const DEFAULT_ACTIVE_COLOR = 'rgba(255, 255, 255, 1)';
 const DEFAULT_INACTIVE_COLOR = 'rgba(255, 255, 255, 0.7)';
 
 const getActiveOpacity = (
-  position: Animated.AnimatedInterpolation,
+  position: Animated.AnimatedInterpolation<number>,
   routesLength: number,
   tabIndex: number
 ) => {
@@ -64,7 +64,7 @@ const getActiveOpacity = (
 };
 
 const getInactiveOpacity = (
-  position: Animated.AnimatedInterpolation,
+  position: Animated.AnimatedInterpolation<number>,
   routesLength: number,
   tabIndex: number
 ) => {

src/TabBarItem.tsx

@@ -33,7 +33,7 @@ export type Listener = (value: number) => void;
 
 export type SceneRendererProps = {
   layout: Layout;
-  position: Animated.AnimatedInterpolation;
+  position: Animated.AnimatedInterpolation<number>;
   jumpTo: (key: string) => void;
 };