chore: upgrade depenendecies

example/package.json

@@ -16,40 +16,40 @@
     "@expo/vector-icons": "^10.2.0",
     "@react-native-community/masked-view": "^0.1.10",
     "color": "^3.1.2",
-    "expo": "^38.0.0",
-    "expo-asset": "~8.1.3",
-    "expo-blur": "~8.1.0",
+    "expo": "^38.0.9",
+    "expo-asset": "~8.1.7",
+    "expo-blur": "~8.1.2",
     "expo-linking": "^1.0.3",
-    "expo-updates": "~0.2.8",
-    "koa": "^2.12.0",
+    "expo-updates": "~0.2.14",
+    "koa": "^2.13.0",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.62.2",
     "react-native-appearance": "~0.3.3",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-paper": "^3.10.1",
-    "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-context": "~3.0.7",
-    "react-native-screens": "^2.7.0",
-    "react-native-tab-view": "2.14.0",
-    "react-native-vector-icons": "^6.6.0",
+    "react-native-gesture-handler": "^1.7.0",
+    "react-native-paper": "^4.0.1",
+    "react-native-reanimated": "^1.10.1",
+    "react-native-safe-area-context": "~3.1.1",
+    "react-native-screens": "^2.9.0",
+    "react-native-tab-view": "^2.15.1",
+    "react-native-vector-icons": "^7.0.0",
     "react-native-web": "^0.11.7"
   },
   "devDependencies": {
     "@babel/node": "^7.10.1",
-    "@expo/webpack-config": "^0.12.16",
-    "@types/cheerio": "^0.22.18",
+    "@expo/webpack-config": "^0.12.21",
+    "@types/cheerio": "^0.22.21",
     "@types/jest-dev-server": "^4.2.0",
     "@types/koa": "^2.11.3",
     "@types/node-fetch": "^2.5.7",
-    "@types/react": "~16.9.41",
+    "@types/react": "~16.9.44",
     "@types/react-dom": "^16.9.8",
-    "@types/react-native": "~0.62.13",
+    "@types/react-native": "~0.63.4",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "^8.2.3",
     "cheerio": "^1.0.0-rc.3",
-    "expo-cli": "^3.22.3",
-    "jest": "^26.0.1",
+    "expo-cli": "^3.23.1",
+    "jest": "^26.2.2",
     "jest-dev-server": "^4.4.0",
     "mock-require-assets": "^0.0.1",
     "node-fetch": "^2.6.0",

example/src/index.tsx

@@ -9,7 +9,6 @@ import {
   ScaledSize,
   Linking,
 } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
 import { enableScreens } from 'react-native-screens';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {

example/webpack.config.js

@@ -12,12 +12,6 @@ module.exports = async function (env, argv) {
 
   config.context = path.resolve(__dirname, '..');
 
-  config.resolveLoader = {
-    modules: [
-      path.resolve(node_modules, '@expo/webpack-config', 'node_modules'),
-    ],
-  };
-
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
     include: /(packages|example)\/.+/,

package.json

@@ -25,19 +25,19 @@
     "example": "yarn --cwd example"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^26.0.0",
-    "babel-jest": "^26.0.1",
-    "codecov": "^3.7.0",
-    "commitlint": "^8.3.5",
-    "eslint": "^7.2.0",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@types/jest": "^26.0.8",
+    "babel-jest": "^26.2.2",
+    "codecov": "^3.7.2",
+    "commitlint": "^9.1.0",
+    "eslint": "^7.6.0",
     "eslint-config-satya164": "^3.1.7",
     "husky": "^4.2.5",
-    "jest": "^26.0.1",
+    "jest": "^26.2.2",
     "lerna": "^3.22.1",
-    "metro-react-native-babel-preset": "^0.59.0",
+    "metro-react-native-babel-preset": "^0.61.0",
     "prettier": "^2.0.5",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "resolutions": {
     "react": "~16.9.0",

packages/bottom-tabs/package.json

@@ -40,18 +40,18 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-navigation/native": "^5.7.2",
+    "@testing-library/react-native": "^7.0.1",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.62.2",
-    "react-native-safe-area-context": "~3.0.0",
-    "react-native-screens": "^2.7.0",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "react-native-safe-area-context": "~3.1.1",
+    "react-native-screens": "^2.9.0",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/bottom-tabs/src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
+import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import { createBottomTabNavigator, BottomTabScreenProps } from '../index';
 

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -199,7 +199,7 @@ export default function BottomTabBar({
           ],
           // Absolutely position the tab bar so that the content is below it
           // This is needed to avoid gap at bottom when the tab bar is hidden
-          position: isTabBarHidden ? 'absolute' : null,
+          position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
           height: DEFAULT_TABBAR_HEIGHT + paddingBottom,

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -259,6 +259,7 @@ export default function BottomTabBarItem({
     accessibilityLabel,
     accessibilityRole: 'button',
     accessibilityState: { selected: focused },
+    // @ts-expect-error: keep for compatibility with older React Native versions
     accessibilityStates: focused ? ['selected'] : [],
     style: [
       styles.tab,

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -6,7 +6,6 @@ import {
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
-// eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';

packages/bottom-tabs/src/views/ResourceSavingScene.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
 import { Screen, screensEnabled } from 'react-native-screens';
 
 type Props = {

packages/compat/package.json

@@ -31,11 +31,11 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-navigation/native": "^5.7.2",
-    "@types/react": "^16.9.36",
+    "@types/react": "^16.9.44",
     "react": "~16.9.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/core/package.json

@@ -37,21 +37,21 @@
   "dependencies": {
     "@react-navigation/routers": "^5.4.10",
     "escape-string-regexp": "^4.0.0",
-    "nanoid": "^3.1.9",
+    "nanoid": "^3.1.12",
     "query-string": "^6.13.1",
     "react-is": "^16.13.0",
     "use-subscription": "^1.4.0"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
-    "@types/react": "^16.9.36",
+    "@react-native-community/bob": "^0.16.2",
+    "@testing-library/react-native": "^7.0.1",
+    "@types/react": "^16.9.44",
     "@types/react-is": "^16.7.1",
     "@types/use-subscription": "^1.0.0",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
-    "react-native-testing-library": "^2.1.0",
     "react-test-renderer": "~16.13.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "react": "*"

packages/core/src/__tests__/BaseNavigationContainer.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, render } from 'react-native-testing-library';
+import { act, render } from '@testing-library/react-native';
 import {
   DefaultRouterOptions,
   NavigationState,

packages/core/src/__tests__/StaticContainer.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from 'react-native-testing-library';
+import { render } from '@testing-library/react-native';
 import StaticContainer from '../StaticContainer';
 
 it("doesn't update element if no props changed", () => {

packages/core/src/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import type { NavigationState } from '@react-navigation/routers';
 import Screen from '../Screen';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useDescriptors.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import type {
   DefaultRouterOptions,
   NavigationState,

packages/core/src/__tests__/useEventEmitter.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import type { Router, NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useFocusEffect.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useFocusEffect from '../useFocusEffect';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useIsFocused.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useIsFocused from '../useIsFocused';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useNavigation.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from 'react-native-testing-library';
+import { render } from '@testing-library/react-native';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigation from '../useNavigation';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/core/src/__tests__/useNavigationCache.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import useEventEmitter from '../useEventEmitter';
 import useNavigationCache from '../useNavigationCache';
 import useNavigationBuilder from '../useNavigationBuilder';

packages/core/src/__tests__/useNavigationState.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, act } from 'react-native-testing-library';
+import { render, act } from '@testing-library/react-native';
 import type { NavigationState } from '@react-navigation/routers';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useNavigationState from '../useNavigationState';

packages/core/src/__tests__/useOnAction.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { act, render } from 'react-native-testing-library';
+import { act, render } from '@testing-library/react-native';
 import {
   Router,
   DefaultRouterOptions,

packages/core/src/__tests__/useRoute.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from 'react-native-testing-library';
+import { render } from '@testing-library/react-native';
 import useNavigationBuilder from '../useNavigationBuilder';
 import useRoute from '../useRoute';
 import BaseNavigationContainer from '../BaseNavigationContainer';

packages/devtools/package.json

@@ -40,13 +40,13 @@
     "deep-equal": "^2.0.3"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
+    "@testing-library/react-native": "^7.0.1",
     "@types/deep-equal": "^1.0.1",
-    "@types/react": "^16.9.36",
+    "@types/react": "^16.9.44",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "react": "*"

packages/drawer/package.json

@@ -45,19 +45,19 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-navigation/native": "^5.7.2",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
+    "@testing-library/react-native": "^7.0.1",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.62.2",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-context": "~3.0.0",
-    "react-native-screens": "^2.7.0",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "react-native-gesture-handler": "^1.7.0",
+    "react-native-reanimated": "^1.10.1",
+    "react-native-safe-area-context": "~3.1.1",
+    "react-native-screens": "^2.9.0",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/drawer/src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
+import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import { createDrawerNavigator, DrawerScreenProps } from '../index';
 

packages/drawer/src/views/DrawerItem.tsx

@@ -157,6 +157,7 @@ export default function DrawerItem(props: Props) {
         accessibilityComponentType="button"
         accessibilityRole="button"
         accessibilityState={{ selected: focused }}
+        // @ts-expect-error: keep for compatibility with older React Native versions
         accessibilityStates={focused ? ['selected'] : []}
         to={to}
       >

packages/drawer/src/views/DrawerView.tsx

@@ -7,7 +7,6 @@ import {
   BackHandler,
   NativeEventSubscription,
 } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import {
   NavigationHelpersContext,

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-// eslint-disable-next-line import/no-unresolved
 import { Screen, screensEnabled } from 'react-native-screens';
 
 type Props = {

packages/drawer/src/views/TouchableItem.ios.tsx

@@ -38,7 +38,6 @@ export default class TouchableItem extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
-      // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}

packages/drawer/src/views/TouchableItem.tsx

@@ -16,7 +16,7 @@ import {
 
 export type Props = ViewProps & {
   pressColor?: string;
-  disabled?: boolean;
+  disabled?: boolean | null;
   borderless?: boolean;
   delayPressIn?: number;
   onPress?: () => void;

packages/material-bottom-tabs/package.json

@@ -41,18 +41,18 @@
     "clean": "del lib"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-navigation/native": "^5.7.2",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
+    "@testing-library/react-native": "^7.0.1",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
     "@types/react-native-vector-icons": "^6.4.5",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.62.2",
-    "react-native-paper": "^3.10.1",
-    "react-native-testing-library": "^2.1.0",
-    "react-native-vector-icons": "^6.6.0",
-    "typescript": "^3.9.5"
+    "react-native-paper": "^4.0.1",
+    "react-native-vector-icons": "^7.0.0",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/material-bottom-tabs/src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
+import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createMaterialBottomTabNavigator,

packages/material-top-tabs/package.json

@@ -44,18 +44,18 @@
     "color": "^3.1.2"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-navigation/native": "^5.7.2",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
+    "@testing-library/react-native": "^7.0.1",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.62.2",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-reanimated": "^1.8.0",
-    "react-native-tab-view": "^2.14.4",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "react-native-gesture-handler": "^1.7.0",
+    "react-native-reanimated": "^1.10.1",
+    "react-native-tab-view": "^2.15.1",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-navigation/native": "^5.0.5",

packages/material-top-tabs/src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
+import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import {
   createMaterialTopTabNavigator,

packages/native/package.json

@@ -38,19 +38,19 @@
   },
   "dependencies": {
     "@react-navigation/core": "^5.12.2",
-    "nanoid": "^3.1.9"
+    "nanoid": "^3.1.12"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
-    "@types/react": "^16.9.36",
+    "@react-native-community/bob": "^0.16.2",
+    "@testing-library/react-native": "^7.0.1",
+    "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
-    "@types/react-native": "^0.62.7",
+    "@types/react-native": "^0.63.4",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-dom": "^16.13.1",
     "react-native": "~0.62.2",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "react": "*",

packages/native/src/__tests__/NavigationContainer.test.tsx

@@ -7,7 +7,7 @@ import {
   NavigationHelpersContext,
   NavigationContainerRef,
 } from '@react-navigation/core';
-import { act, render } from 'react-native-testing-library';
+import { act, render } from '@testing-library/react-native';
 import NavigationContainer from '../NavigationContainer';
 import window from '../__mocks__/window';
 

packages/native/src/__tests__/useLinking.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, RenderAPI } from 'react-native-testing-library';
+import { render, RenderAPI } from '@testing-library/react-native';
 import type { NavigationContainerRef } from '@react-navigation/core';
 import useLinking from '../useLinking';
 

packages/routers/package.json

@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "nanoid": "^3.1.9"
+    "nanoid": "^3.1.12"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "del-cli": "^3.0.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.7"
   },
   "@react-native-community/bob": {
     "source": "src",

packages/stack/package.json

@@ -44,20 +44,20 @@
     "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
-    "@react-native-community/bob": "^0.15.1",
+    "@react-native-community/bob": "^0.16.2",
     "@react-native-community/masked-view": "^0.1.10",
     "@react-navigation/native": "^5.7.2",
+    "@testing-library/react-native": "^7.0.1",
     "@types/color": "^3.0.1",
-    "@types/react": "^16.9.36",
-    "@types/react-native": "^0.62.7",
+    "@types/react": "^16.9.44",
+    "@types/react-native": "^0.63.4",
     "del-cli": "^3.0.1",
     "react": "~16.9.0",
     "react-native": "~0.62.2",
-    "react-native-gesture-handler": "^1.6.0",
-    "react-native-safe-area-context": "~3.0.0",
-    "react-native-screens": "^2.7.0",
-    "react-native-testing-library": "^2.1.0",
-    "typescript": "^3.9.5"
+    "react-native-gesture-handler": "^1.7.0",
+    "react-native-safe-area-context": "~3.1.1",
+    "react-native-screens": "^2.9.0",
+    "typescript": "^3.9.7"
   },
   "peerDependencies": {
     "@react-native-community/masked-view": ">= 0.1.0",

packages/stack/src/__tests__/index.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Button } from 'react-native';
-import { render, fireEvent } from 'react-native-testing-library';
+import { render, fireEvent } from '@testing-library/react-native';
 import { NavigationContainer, ParamListBase } from '@react-navigation/native';
 import { createStackNavigator, StackScreenProps } from '../index';
 

packages/stack/src/types.tsx

@@ -124,7 +124,7 @@ export type StackHeaderOptions = {
   /**
    * Style object for the title component.
    */
-  headerTitleStyle?: React.ComponentProps<typeof Animated.Text>['style'];
+  headerTitleStyle?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
   /**
    * Style object for the container of the `headerTitle` component, for example to add padding.
    * By default, `headerTitleContainerStyle` is with an absolute position style and offsets both `left` and `right`.
@@ -285,7 +285,9 @@ export type StackNavigationOptions = StackHeaderOptions &
     /**
      * Function that returns a React Element to display as a overlay for the card.
      */
-    cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
+    cardOverlay?: (props: {
+      style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    }) => React.ReactNode;
     /**
      * Style object for the card in stack.
      * You can provide a custom background color to use instead of the default background here.
@@ -421,7 +423,7 @@ export type StackHeaderLeftButtonProps = {
   /**
    * Style object for the button.
    */
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style?: StyleProp<ViewStyle>;
 };
 
 export type StackHeaderTitleProps = {
@@ -444,7 +446,7 @@ export type StackHeaderTitleProps = {
   /**
    * Style object for the title element.
    */
-  style?: React.ComponentProps<typeof Animated.Text>['style'];
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
 export type TransitionSpec =

packages/stack/src/views/BorderlessButton.tsx

@@ -39,7 +39,6 @@ export default class BorderlessButton extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
-      // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -223,7 +223,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       warnIfHeaderStylesDefined(unsafeStyles);
     }
 
-    const safeStyles = {
+    const safeStyles: ViewStyle = {
       backgroundColor,
       borderBottomColor,
       borderBottomEndRadius,
@@ -249,6 +249,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       borderTopStartRadius,
       borderTopWidth,
       borderWidth,
+      // @ts-expect-error: boxShadow is only for Web
       boxShadow,
       elevation,
       shadowColor,

packages/stack/src/views/Header/HeaderTitle.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Platform } from 'react-native';
+import {
+  Animated,
+  StyleSheet,
+  Platform,
+  TextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
 import { useTheme } from '@react-navigation/native';
 
-type Props = Omit<React.ComponentProps<typeof Animated.Text>, 'key'> & {
+type Props = Omit<TextProps, 'style'> & {
   tintColor?: string;
   children?: string;
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
 };
 
 export default function HeaderTitle({ tintColor, style, ...rest }: Props) {

packages/stack/src/views/Screens.tsx

@@ -58,7 +58,6 @@ export const MaybeScreen = ({
   children: React.ReactNode;
 }) => {
   if (enabled && Platform.OS === 'web') {
-    // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
     return <AnimatedWebScreen active={active} {...rest} />;
   }
 

packages/stack/src/views/Stack/Card.tsx

@@ -508,9 +508,10 @@ export default class Card extends React.Component<Props> {
       : undefined;
 
     const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
-    const isTransparent = backgroundColor
-      ? Color(backgroundColor).alpha() === 0
-      : false;
+    const isTransparent =
+      typeof backgroundColor === 'string'
+        ? Color(backgroundColor).alpha() === 0
+        : false;
 
     return (
       <CardAnimationContext.Provider value={animationContext}>

packages/stack/src/views/Stack/CardContainer.tsx

@@ -26,7 +26,9 @@ type Props = TransitionPreset & {
   safeAreaInsetRight: number;
   safeAreaInsetBottom: number;
   safeAreaInsetLeft: number;
-  cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
+  cardOverlay?: (props: {
+    style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  }) => React.ReactNode;
   cardOverlayEnabled?: boolean;
   cardShadowEnabled?: boolean;
   cardStyle?: StyleProp<ViewStyle>;

packages/stack/src/views/TouchableItem.ios.tsx

@@ -38,7 +38,6 @@ export default class TouchableItem extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
-      // @ts-expect-error: the Animated.createAnimatedComponent types don't work properly
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}