chore: upgrade dependencies

packages/stack/src/views/BorderlessButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Animated, Platform } from 'react-native';
-import { BaseButton } from 'react-native-gesture-handler';
+import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler';
 
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
-type Props = React.ComponentProps<typeof BaseButton> & {
+type Props = BaseButtonProperties & {
   activeOpacity: number;
 };
 
@@ -39,6 +39,7 @@ export default class BorderlessButton extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
+      // @ts-expect-error: error seems like false positive
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}

packages/stack/src/views/GestureHandler.tsx

@@ -6,9 +6,7 @@ const Dummy: any = ({ children }: { children: React.ReactNode }) => (
   <>{children}</>
 );
 
-export const PanGestureHandler = Dummy as React.ComponentType<
-  PanGestureHandlerProperties
->;
+export const PanGestureHandler = Dummy as React.ComponentType<PanGestureHandlerProperties>;
 
 export const GestureHandlerRootView = View;
 

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

@@ -154,9 +154,7 @@ export default function HeaderBackButton({
       disabled={disabled}
       accessible
       accessibilityRole="button"
-      accessibilityComponentType="button"
       accessibilityLabel={accessibilityLabel}
-      accessibilityTraits="button"
       testID="header-back"
       delayPressIn={0}
       onPress={disabled ? undefined : handlePress}

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

@@ -38,7 +38,7 @@ export type Props = {
   }) => void;
   styleInterpolator: StackHeaderStyleInterpolator;
   gestureDirection: GestureDirection;
-  style?: StyleProp<ViewStyle>;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
 };
 
 export default function HeaderContainer({
@@ -106,9 +106,8 @@ export default function HeaderContainer({
           progress: scene.progress,
           options: scene.descriptor.options,
           route: scene.descriptor.route,
-          navigation: scene.descriptor.navigation as StackNavigationProp<
-            ParamListBase
-          >,
+          navigation: scene.descriptor
+            .navigation as StackNavigationProp<ParamListBase>,
           styleInterpolator:
             mode === 'float'
               ? isHeaderStatic

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

@@ -19,6 +19,7 @@ export default function HeaderTitle({ tintColor, style, ...rest }: Props) {
   const { colors } = useTheme();
 
   return (
+    // @ts-expect-error: animated components seem to have incorrect type
     <Animated.Text
       accessibilityRole="header"
       aria-level="1"

packages/stack/src/views/KeyboardManager.tsx

@@ -38,12 +38,10 @@ export default class KeyboardManager extends React.Component<Props> {
     this.clearKeyboardTimeout();
 
     // @ts-expect-error: blurTextInput accepts both number and ref, but types say only ref
-    const input: InputRef = TextInput.State.currentlyFocusedInput
-      ? TextInput.State.currentlyFocusedInput()
-      : TextInput.State.currentlyFocusedField();
+    const input: InputRef = TextInput.State.currentlyFocusedField();
 
     // When a page change begins, blur the currently focused input
-    TextInput.State.blurTextInput(input);
+    input?.blur();
 
     // Store the id of this input so we can refocus it if change was cancelled
     this.previouslyFocusedTextInput = input;
@@ -67,11 +65,9 @@ export default class KeyboardManager extends React.Component<Props> {
     } else {
       const input = this.previouslyFocusedTextInput;
 
-      if (input) {
-        // Dismiss the keyboard only if an input was a focused before
-        // This makes sure we don't dismiss input on going back and focusing an input
-        TextInput.State.blurTextInput(input);
-      }
+      // Dismiss the keyboard only if an input was a focused before
+      // This makes sure we don't dismiss input on going back and focusing an input
+      input?.blur();
     }
 
     // Cleanup the ID on successful page change
@@ -98,11 +94,11 @@ export default class KeyboardManager extends React.Component<Props> {
       // Subtracting timestamps makes us sure the delay is executed only when needed.
       if (Date.now() - this.startTimestamp < 100) {
         this.keyboardTimeout = setTimeout(() => {
-          TextInput.State.focusTextInput(input);
+          input?.focus();
           this.previouslyFocusedTextInput = undefined;
         }, 100);
       } else {
-        TextInput.State.focusTextInput(input);
+        input?.focus();
         this.previouslyFocusedTextInput = undefined;
       }
     }

packages/stack/src/views/Screens.tsx

@@ -9,32 +9,6 @@ try {
   // Ignore
 }
 
-// The web implementation in react-native-screens seems buggy.
-// The view doesn't become visible after coming back in some cases.
-// So we use our custom implementation.
-class WebScreen extends React.Component<
-  ViewProps & {
-    active: number;
-    children: React.ReactNode;
-  }
-> {
-  render() {
-    const { active, style, ...rest } = this.props;
-
-    return (
-      <View
-        // @ts-expect-error: hidden exists on web, but not in React Native
-        hidden={!active}
-        style={[style, { display: active ? 'flex' : 'none' }]}
-        {...rest}
-      />
-    );
-  }
-}
-
-const AnimatedWebScreen = Animated.createAnimatedComponent(WebScreen);
-
-// @ts-ignore
 export const shouldUseActivityState = Screens?.shouldUseActivityState;
 
 export const MaybeScreenContainer = ({
@@ -60,24 +34,16 @@ export const MaybeScreen = ({
   ...rest
 }: ViewProps & {
   enabled: boolean;
-  active: 0 | 1 | 2 | Animated.AnimatedInterpolation;
+  active: 0 | 1 | Animated.AnimatedInterpolation;
   children: React.ReactNode;
 }) => {
-  if (enabled && Platform.OS === 'web') {
-    return <AnimatedWebScreen active={active} {...rest} />;
-  }
-
   if (enabled && Screens?.screensEnabled()) {
     if (shouldUseActivityState) {
       return (
-        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
         <Screens.Screen enabled={enabled} activityState={active} {...rest} />
       );
     } else {
-      return (
-        // @ts-expect-error: there was an `active` prop and no `activityState` in older version and stackPresentation was required
-        <Screens.Screen enabled={enabled} active={active} {...rest} />
-      );
+      return <Screens.Screen enabled={enabled} active={active} {...rest} />;
     }
   }
 

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

@@ -396,7 +396,7 @@ export default class CardStack extends React.Component<Props, State> {
       onGestureCancel,
       // Enable on new versions of `react-native-screens`
       // On older versions of `react-native-screens`, there's an issue with screens not being responsive to user interaction.
-      detachInactiveScreens = shouldUseActivityState,
+      detachInactiveScreens = shouldUseActivityState ?? false,
     } = this.props;
 
     const { scenes, layout, gestures, headerHeights } = this.state;

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Animated, Platform } from 'react-native';
-import { BaseButton } from 'react-native-gesture-handler';
+import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler';
 
 const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
 
-type Props = React.ComponentProps<typeof BaseButton> & {
+type Props = BaseButtonProperties & {
   activeOpacity: number;
 };
 
@@ -38,6 +38,7 @@ export default class TouchableItem extends React.Component<Props> {
     const { children, style, enabled, ...rest } = this.props;
 
     return (
+      // @ts-expect-error: error seems like false positive
       <AnimatedBaseButton
         {...rest}
         onActiveStateChange={this.handleActiveStateChange}