fix: address deprecation warnings from react-native-web

react-navigation · Mar 12, 2024 · 703a7b1 · 703a7b1
1 parent 4d16128
commit 703a7b1
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 43 deletions.
diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -277,16 +277,17 @@ export function BottomTabBar({
   return (
     <Animated.View
       style={[
-        tabBarPosition === 'left'
-          ? styles.start
-          : tabBarPosition === 'right'
-            ? styles.end
-            : styles.bottom,
         {
+          pointerEvents: isTabBarHidden ? 'none' : 'auto',
           backgroundColor:
             tabBarBackgroundElement != null ? 'transparent' : colors.card,
           borderColor: colors.border,
         },
+        tabBarPosition === 'left'
+          ? styles.start
+          : tabBarPosition === 'right'
+            ? styles.end
+            : styles.bottom,
         tabBarIsHorizontal
           ? [
               {
@@ -324,10 +325,9 @@ export function BottomTabBar({
             },
         tabBarStyle,
       ]}
-      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
       onLayout={tabBarIsHorizontal ? handleLayout : undefined}
     >
-      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+      <View style={[StyleSheet.absoluteFill, { pointerEvents: 'none' }]}>
         {tabBarBackgroundElement}
       </View>
       <View

diff --git a/packages/drawer/src/views/DrawerItem.tsx b/packages/drawer/src/views/DrawerItem.tsx
@@ -185,6 +185,6 @@ const styles = StyleSheet.create({
   },
   labelText: {
     lineHeight: 24,
-    textAlignVertical: 'center',
+    verticalAlign: 'middle',
   },
 });
diff --git a/packages/elements/src/Header/Header.tsx b/packages/elements/src/Header/Header.tsx
@@ -221,23 +221,33 @@ export function Header(props: Props) {
 
   return (
     <Animated.View
-      pointerEvents="box-none"
-      style={[{ height, minHeight, maxHeight, opacity, transform }]}
+      style={[
+        {
+          height,
+          minHeight,
+          maxHeight,
+          opacity,
+          transform,
+          pointerEvents: 'box-none',
+        },
+      ]}
     >
       <Animated.View
-        pointerEvents="box-none"
-        style={[StyleSheet.absoluteFill, backgroundContainerStyle]}
+        style={[
+          { pointerEvents: 'box-none' },
+          StyleSheet.absoluteFill,
+          backgroundContainerStyle,
+        ]}
       >
         {headerBackground ? (
           headerBackground({ style: backgroundStyle })
         ) : headerTransparent ? null : (
           <HeaderBackground style={backgroundStyle} />
         )}
       </Animated.View>
-      <View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
-      <View pointerEvents="box-none" style={styles.content}>
+      <View style={{ pointerEvents: 'none', height: headerStatusBarHeight }} />
+      <View style={styles.content}>
         <Animated.View
-          pointerEvents="box-none"
           style={[
             styles.start,
             headerTitleAlign === 'center' && styles.expand,
@@ -248,7 +258,6 @@ export function Header(props: Props) {
           {leftButton}
         </Animated.View>
         <Animated.View
-          pointerEvents="box-none"
           style={[
             styles.title,
             {
@@ -283,7 +292,6 @@ export function Header(props: Props) {
           })}
         </Animated.View>
         <Animated.View
-          pointerEvents="box-none"
           style={[
             styles.end,
             styles.expand,
@@ -303,18 +311,22 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     alignItems: 'stretch',
+    pointerEvents: 'box-none',
   },
   title: {
     marginHorizontal: 16,
     justifyContent: 'center',
+    pointerEvents: 'box-none',
   },
   start: {
     justifyContent: 'center',
     alignItems: 'flex-start',
+    pointerEvents: 'box-none',
   },
   end: {
     justifyContent: 'center',
     alignItems: 'flex-end',
+    pointerEvents: 'box-none',
   },
   expand: {
     flexGrow: 1,

diff --git a/packages/elements/src/ResourceSavingView.tsx b/packages/elements/src/ResourceSavingView.tsx
@@ -27,11 +27,13 @@ export function ResourceSavingView({
         // @ts-expect-error: hidden exists on web, but not in React Native
         hidden={!visible}
         style={[
-          { display: visible ? 'flex' : 'none' },
+          {
+            display: visible ? 'flex' : 'none',
+            pointerEvents: visible ? 'auto' : 'none',
+          },
           styles.container,
           style,
         ]}
-        pointerEvents={visible ? 'auto' : 'none'}
         {...rest}
       >
         {children}
@@ -41,9 +43,14 @@ export function ResourceSavingView({
 
   return (
     <View
-      style={[styles.container, style]}
-      // box-none doesn't seem to work properly on Android
-      pointerEvents={visible ? 'auto' : 'none'}
+      style={[
+        styles.container,
+        {
+          // box-none doesn't seem to work properly on Android
+          pointerEvents: visible ? 'auto' : 'none',
+        },
+        style,
+      ]}
     >
       <View
         collapsable={false}
@@ -52,8 +59,12 @@ export function ResourceSavingView({
           // This is an workaround for a bug where the clipped view never re-appears
           Platform.OS === 'ios' || Platform.OS === 'macos' ? !visible : true
         }
-        pointerEvents={visible ? 'auto' : 'none'}
-        style={visible ? styles.attached : styles.detached}
+        style={
+          (visible ? styles.attached : styles.detached,
+          {
+            pointerEvents: visible ? 'auto' : 'none',
+          })
+        }
       >
         {children}
       </View>

diff --git a/packages/react-native-tab-view/src/TabBar.tsx b/packages/react-native-tab-view/src/TabBar.tsx
@@ -632,7 +632,6 @@ export function TabBar<T extends Route>({
   return (
     <Animated.View onLayout={handleLayout} style={[styles.tabBar, style]}>
       <Animated.View
-        pointerEvents="none"
         style={[
           styles.indicatorContainer,
           scrollEnabled ? { transform: [{ translateX }] as any } : null,
@@ -727,5 +726,6 @@ const styles = StyleSheet.create({
     start: 0,
     end: 0,
     bottom: 0,
+    pointerEvents: 'none',
   },
 });
diff --git a/packages/react-native-tab-view/src/TabBarItem.tsx b/packages/react-native-tab-view/src/TabBarItem.tsx
@@ -227,7 +227,7 @@ const TabBarItemInternal = <T extends Route>({
       href={href}
       style={[styles.pressable, tabContainerStyle]}
     >
-      <View pointerEvents="none" style={[styles.item, tabStyle]}>
+      <View style={[styles.item, tabStyle]}>
         {icon}
         <View>
           <Animated.View style={{ opacity: inactiveOpacity }}>
@@ -285,6 +285,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     padding: 10,
     minHeight: 48,
+    pointerEvents: 'none',
   },
   badge: {
     position: 'absolute',

diff --git a/packages/stack/src/views/Header/HeaderContainer.tsx b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -57,7 +57,7 @@ export function HeaderContainer({
   const { buildHref } = useLinkBuilder();
 
   return (
-    <Animated.View pointerEvents="box-none" style={style}>
+    <Animated.View style={[{ pointerEvents: 'box-none' }, style]}>
       {scenes.slice(-3).map((scene, i, self) => {
         if ((mode === 'screen' && i !== self.length - 1) || !scene) {
           return null;
@@ -164,15 +164,15 @@ export function HeaderContainer({
                       }
                     : undefined
                 }
-                pointerEvents={isFocused ? 'box-none' : 'none'}
                 aria-hidden={!isFocused}
-                style={
+                style={[
+                  { pointerEvents: isFocused ? 'box-none' : 'none' },
                   // Avoid positioning the focused header absolutely
                   // Otherwise accessibility tools don't seem to be able to find it
                   (mode === 'float' && !isFocused) || headerTransparent
                     ? styles.header
-                    : null
-                }
+                    : null,
+                ]}
               >
                 {header !== undefined ? header(props) : <Header {...props} />}
               </View>

diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx
@@ -100,7 +100,9 @@ export class Card extends React.Component<Props> {
       style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
     }) =>
       style ? (
-        <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
+        <Animated.View
+          style={[styles.overlay, { pointerEvents: 'none' }, style]}
+        />
       ) : null,
   };
 
@@ -471,6 +473,7 @@ export class Card extends React.Component<Props> {
       children,
       containerStyle: customContainerStyle,
       contentStyle,
+      style,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       closing,
       direction,
@@ -541,20 +544,26 @@ export class Card extends React.Component<Props> {
           collapsable={false}
         />
         <View
-          pointerEvents="box-none"
           // Make sure this view is not removed on the new architecture, as it causes focus loss during navigation on Android.
           // This can happen when the view flattening results in different trees - due to `overflow` style changing in a parent.
           collapsable={false}
+          style={[{ pointerEvents: 'box-none' }, style]}
           {...rest}
         >
           {overlayEnabled ? (
-            <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+            <View
+              style={[{ pointerEvents: 'box-none' }, StyleSheet.absoluteFill]}
+            >
               {overlay({ style: overlayStyle })}
             </View>
           ) : null}
           <Animated.View
-            style={[styles.container, containerStyle, customContainerStyle]}
-            pointerEvents="box-none"
+            style={[
+              styles.container,
+              { pointerEvents: 'box-none' },
+              containerStyle,
+              customContainerStyle,
+            ]}
           >
             <PanGestureHandler
               enabled={layout.width !== 0 && gestureEnabled}
@@ -577,10 +586,12 @@ export class Card extends React.Component<Props> {
                           : gestureDirection === 'vertical'
                             ? [styles.shadowVertical, styles.shadowTop]
                             : [styles.shadowVertical, styles.shadowBottom],
-                      { backgroundColor },
+                      {
+                        backgroundColor,
+                        pointerEvents: 'none',
+                      },
                       shadowStyle,
                     ]}
-                    pointerEvents="none"
                   />
                 ) : null}
                 <CardSheet

diff --git a/packages/stack/src/views/Stack/CardContainer.tsx b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -249,7 +249,6 @@ function CardContainerInner({
       transitionSpec={transitionSpec}
       styleInterpolator={cardStyleInterpolator}
       aria-hidden={!focused}
-      pointerEvents={active ? 'box-none' : pointerEvents}
       pageOverflowEnabled={headerMode !== 'float' && presentation !== 'modal'}
       preloaded={preloaded}
       containerStyle={
@@ -268,6 +267,7 @@ function CardContainerInner({
       ]}
       style={[
         {
+          pointerEvents: active ? 'box-none' : pointerEvents,
           // This is necessary to avoid unfocused larger pages increasing scroll area
           // The issue can be seen on the web when a smaller screen is pushed over a larger one
           overflow: active ? undefined : 'hidden',

diff --git a/packages/stack/src/views/Stack/CardSheet.tsx b/packages/stack/src/views/Stack/CardSheet.tsx
@@ -66,8 +66,11 @@ export const CardSheet = React.forwardRef<CardSheetRef, Props>(
     return (
       <View
         {...rest}
-        pointerEvents={pointerEvents}
-        style={[enabled && fill ? styles.page : styles.card, style]}
+        style={[
+          enabled && fill ? styles.page : styles.card,
+          { pointerEvents },
+          style,
+        ]}
       />
     );
   }

diff --git a/packages/stack/src/views/Stack/CardStack.tsx b/packages/stack/src/views/Stack/CardStack.tsx
@@ -750,12 +750,11 @@ export class CardStack extends React.Component<Props, State> {
             return (
               <MaybeScreen
                 key={route.key}
-                style={[StyleSheet.absoluteFill]}
+                style={[StyleSheet.absoluteFill, { pointerEvents: 'box-none' }]}
                 enabled={detachInactiveScreens}
                 active={isScreenActive}
                 freezeOnBlur={freezeOnBlur}
                 homeIndicatorHidden={autoHideHomeIndicator}
-                pointerEvents="box-none"
               >
                 <CardContainer
                   index={index}