fix: fix drawer disappearing on web when switching drawerType

Reanimated has a bug where it doesn't update the `transform` property from what was set before if the new style object doesn't include it. We don't want to add a `transform` when not needed due to browser bugs (https://bugs.chromium.org/p/chromium/issues/detail?id=20574). This commit adds `transform: undefined` explicitly to workaround the bug in Reanimated while still resulting on the style not being included to avoid the browser bug.

Fixes #10210

packages/drawer/src/views/legacy/Drawer.tsx

@@ -553,9 +553,14 @@ export default class DrawerView extends React.Component<DrawerProps> {
             <Animated.View
               style={[
                 styles.content,
-                drawerType !== 'permanent'
-                  ? { transform: [{ translateX: contentTranslateX }] }
-                  : undefined,
+                {
+                  transform:
+                    drawerType === 'permanent'
+                      ? // Reanimated needs the property to be present, but it results in Browser bug
+                        // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+                        undefined
+                      : [{ translateX: contentTranslateX }],
+                },
               ]}
             >
               <View
@@ -609,12 +614,15 @@ export default class DrawerView extends React.Component<DrawerProps> {
               onLayout={this.handleDrawerLayout}
               style={[
                 styles.container,
-                drawerType === 'permanent'
-                  ? { opacity: 1 }
-                  : {
-                      transform: [{ translateX: drawerTranslateX }],
-                      opacity: this.drawerOpacity,
-                    },
+                {
+                  transform:
+                    drawerType === 'permanent'
+                      ? // Reanimated needs the property to be present, but it results in Browser bug
+                        // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+                        undefined
+                      : [{ translateX: drawerTranslateX }],
+                  opacity: this.drawerOpacity,
+                },
                 drawerType === 'permanent'
                   ? // Without this, the `left`/`right` values don't get reset
                     isRight

packages/drawer/src/views/modern/Drawer.tsx

@@ -260,35 +260,37 @@ export default function Drawer({
   });
 
   const drawerAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX: drawerType === 'back' ? 0 : translateX.value,
-        },
-      ],
+      transform:
+        drawerType === 'permanent'
+          ? // Reanimated needs the property to be present, but it results in Browser bug
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+            undefined
+          : [
+              {
+                translateX: drawerType === 'back' ? 0 : translateX.value,
+              },
+            ],
     };
   });
 
   const contentAnimatedStyle = useAnimatedStyle(() => {
-    if (drawerType === 'permanent') {
-      return {};
-    }
-
     return {
-      transform: [
-        {
-          translateX:
-            drawerType === 'front'
-              ? 0
-              : drawerPosition === 'left'
-              ? drawerWidth + translateX.value
-              : translateX.value - drawerWidth,
-        },
-      ],
+      transform:
+        drawerType === 'permanent'
+          ? // Reanimated needs the property to be present, but it results in Browser bug
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=20574
+            undefined
+          : [
+              {
+                translateX:
+                  drawerType === 'front'
+                    ? 0
+                    : drawerPosition === 'left'
+                    ? drawerWidth + translateX.value
+                    : translateX.value - drawerWidth,
+              },
+            ],
     };
   });