Merge pull request #4388 from tloncorp/po/remove-expo-blur

Remove expo blur to unblock release
tloncorp · Feb 4, 2025 · bc993db · bc993db
2 parents 0c7e8f3 + 17beb93
commit bc993db
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 149 deletions.
diff --git a/apps/tlon-mobile/ios/Podfile.lock b/apps/tlon-mobile/ios/Podfile.lock
@@ -97,8 +97,6 @@ PODS:
     - React-Core
   - ExpoBattery (7.7.2):
     - ExpoModulesCore
-  - ExpoBlur (12.9.2):
-    - ExpoModulesCore
   - ExpoClipboard (5.0.1):
     - ExpoModulesCore
   - ExpoDevice (5.9.3):
@@ -1421,7 +1419,6 @@ DEPENDENCIES:
   - expo-dev-menu (from `../../../node_modules/expo-dev-menu`)
   - expo-dev-menu-interface (from `../../../node_modules/expo-dev-menu-interface/ios`)
   - ExpoBattery (from `../../../node_modules/expo-battery/ios`)
-  - ExpoBlur (from `../../../node_modules/expo-blur/ios`)
   - ExpoClipboard (from `../../../node_modules/expo-clipboard/ios`)
   - ExpoDevice (from `../../../node_modules/expo-device/ios`)
   - ExpoFileSystem (from `../../../node_modules/expo-file-system/ios`)
@@ -1584,8 +1581,6 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/expo-dev-menu-interface/ios"
   ExpoBattery:
     :path: "../../../node_modules/expo-battery/ios"
-  ExpoBlur:
-    :path: "../../../node_modules/expo-blur/ios"
   ExpoClipboard:
     :path: "../../../node_modules/expo-clipboard/ios"
   ExpoDevice:
@@ -1761,7 +1756,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   BranchSDK: cb046c2714b03e573484ce9e349e2ddbad7016e8
-  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
+  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
   EASClient: a42ee8bf36c93b3128352faf2ae49405ab4f80bd
   EXApplication: 137189a3f149b4e8e546884629392c3efc94cbd3
   EXAV: e4f6137431ddc4cb025895046bfefa9612025c35
@@ -1778,7 +1773,6 @@ SPEC CHECKSUMS:
   expo-dev-menu: 68ea53d923996e27b20ce02b51cc820fc2327a83
   expo-dev-menu-interface: 7ba029c9d1a82ac22b9b584c00514860b060553e
   ExpoBattery: 60bf880aea8f769fe39f709a920442542c1bfd62
-  ExpoBlur: e832d874bd94afc0645daddbd3162ec1ce172080
   ExpoClipboard: b597982124f067ff9f5b89093eb3d97898d5d877
   ExpoDevice: d204395e17fffdcefa7470bdef33b07719ac41b1
   ExpoFileSystem: 74cc0fae916f9f044248433971dcfc8c3befd057
@@ -1811,7 +1805,7 @@ SPEC CHECKSUMS:
   FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc
   FirebaseSharedSwift: 20530f495084b8d840f78a100d8c5ee613375f6e
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
   hermes-engine: ed62e0dcd013bf4a3b487f164feec1c4e705b5b5

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -36,7 +36,6 @@
     "@uidotdev/usehooks": "^2.4.1",
     "any-ascii": "^0.3.1",
     "color2k": "^2.0.0",
-    "expo-blur": "^12.9.2",
     "expo-haptics": "^12.8.1",
     "expo-image-picker": "~14.7.1",
     "expo-media-library": "~15.9.2",

diff --git a/packages/ui/src/components/ActionList/ListFrame.tsx b/packages/ui/src/components/ActionList/ListFrame.tsx
@@ -1,39 +1,9 @@
-import { BlurView } from 'expo-blur';
-import { ComponentProps, PropsWithChildren } from 'react';
-import { XStack, YStack, styled } from 'tamagui';
-
-import useIsWindowNarrow from '../../hooks/useIsWindowNarrow';
+import { YStack, styled } from 'tamagui';
 
 const ListFrame = styled(YStack, {
   overflow: 'hidden',
   borderRadius: '$m',
+  backgroundColor: '$secondaryBackground',
 });
 
-const ListFrameComponent = (
-  props: PropsWithChildren<
-    ComponentProps<typeof XStack> & ComponentProps<typeof BlurView>
-  >
-) => {
-  const { children, intensity, tint, ...rest } = props;
-  const isWindowNarrow = useIsWindowNarrow();
-
-  if (!isWindowNarrow) {
-    // Blur view adds a shadow, we don't want that in the modal that's
-    // rendered on desktop
-    return <ListFrame {...rest}>{children}</ListFrame>;
-  }
-
-  return (
-    <ListFrame {...rest}>
-      <BlurView
-        style={{ flex: 1 }}
-        intensity={intensity ?? 80}
-        tint={tint ?? 'extraLight'}
-      >
-        {children}
-      </BlurView>
-    </ListFrame>
-  );
-};
-
-export default ListFrameComponent;
+export default ListFrame;
diff --git a/packages/ui/src/components/Channel/BaubleHeader.tsx b/packages/ui/src/components/Channel/BaubleHeader.tsx
@@ -1,6 +1,5 @@
 import { LinearGradient } from '@tamagui/linear-gradient';
 import * as db from '@tloncorp/shared/db';
-import { BlurView } from 'expo-blur';
 import { useCallback } from 'react';
 import { OpaqueColorValue } from 'react-native';
 import Animated, {
@@ -103,81 +102,75 @@ export function BaubleHeader({
             overflow="hidden"
             onPress={handlePress}
           >
-            <BlurView intensity={32}>
-              {showSpinner ? (
-                <Animated.View
-                  entering={FadeIn.duration(128)}
-                  exiting={FadeOut.duration(128)}
-                >
-                  <Spinner margin={'$l'} />
-                </Animated.View>
-              ) : null}
-              {channel.members && channel.type === 'dm' && !showSpinner && (
+            {showSpinner ? (
+              <Animated.View
+                entering={FadeIn.duration(128)}
+                exiting={FadeOut.duration(128)}
+              >
+                <Spinner margin={'$l'} />
+              </Animated.View>
+            ) : null}
+            {channel.members && channel.type === 'dm' && !showSpinner && (
+              <Animated.View
+                entering={FadeIn.duration(128)}
+                exiting={FadeOut.duration(128)}
+              >
+                <View margin="$s">
+                  <ContactAvatar
+                    contactId={channel.members?.[0].contactId}
+                    borderRadius="$xs"
+                    size="$3xl"
+                  />
+                </View>
+              </Animated.View>
+            )}
+            {channel.type === 'groupDm' && !showSpinner && (
+              <Animated.View
+                entering={FadeIn.duration(128)}
+                exiting={FadeOut.duration(128)}
+              >
+                <Icon type={'ChannelTalk'} color="$secondaryText" margin="$s" />
+              </Animated.View>
+            )}
+            {(channel.type === 'chat' ||
+              channel.type === 'gallery' ||
+              channel.type === 'notebook') &&
+              group?.iconImage &&
+              !showSpinner && (
                 <Animated.View
                   entering={FadeIn.duration(128)}
                   exiting={FadeOut.duration(128)}
                 >
-                  <View margin="$s">
-                    <ContactAvatar
-                      contactId={channel.members?.[0].contactId}
-                      borderRadius="$xs"
-                      size="$3xl"
-                    />
-                  </View>
+                  <Image
+                    margin="$s"
+                    width={'$3xl'}
+                    height={'$3xl'}
+                    borderRadius="$xs"
+                    contentFit="cover"
+                    source={{
+                      uri: group.iconImage,
+                    }}
+                  />
                 </Animated.View>
               )}
-              {channel.type === 'groupDm' && !showSpinner && (
+            {(channel.type === 'chat' ||
+              channel.type === 'gallery' ||
+              channel.type === 'notebook') &&
+              !group?.iconImage &&
+              group?.iconImageColor &&
+              !showSpinner && (
                 <Animated.View
                   entering={FadeIn.duration(128)}
                   exiting={FadeOut.duration(128)}
                 >
-                  <Icon
-                    type={'ChannelTalk'}
-                    color="$secondaryText"
-                    margin="$s"
+                  <ListItemTextIcon
+                    fallbackText={groupTitle ?? ''}
+                    backgroundColor={
+                      group?.iconImageColor as unknown as OpaqueColorValue
+                    }
                   />
                 </Animated.View>
               )}
-              {(channel.type === 'chat' ||
-                channel.type === 'gallery' ||
-                channel.type === 'notebook') &&
-                group?.iconImage &&
-                !showSpinner && (
-                  <Animated.View
-                    entering={FadeIn.duration(128)}
-                    exiting={FadeOut.duration(128)}
-                  >
-                    <Image
-                      margin="$s"
-                      width={'$3xl'}
-                      height={'$3xl'}
-                      borderRadius="$xs"
-                      contentFit="cover"
-                      source={{
-                        uri: group.iconImage,
-                      }}
-                    />
-                  </Animated.View>
-                )}
-              {(channel.type === 'chat' ||
-                channel.type === 'gallery' ||
-                channel.type === 'notebook') &&
-                !group?.iconImage &&
-                group?.iconImageColor &&
-                !showSpinner && (
-                  <Animated.View
-                    entering={FadeIn.duration(128)}
-                    exiting={FadeOut.duration(128)}
-                  >
-                    <ListItemTextIcon
-                      fallbackText={groupTitle ?? ''}
-                      backgroundColor={
-                        group?.iconImageColor as unknown as OpaqueColorValue
-                      }
-                    />
-                  </Animated.View>
-                )}
-            </BlurView>
           </Pressable>
         </Animated.View>
       )}

diff --git a/packages/ui/src/components/Overlay.tsx b/packages/ui/src/components/Overlay.tsx
@@ -1,8 +1,6 @@
-import { BlurTint, BlurView } from 'expo-blur';
 import { MotiView } from 'moti';
 import { ComponentProps } from 'react';
-import { Platform } from 'react-native';
-import { View, useTheme } from 'tamagui';
+import { View } from 'tamagui';
 
 export function Overlay(props: ComponentProps<typeof View>) {
   return (
@@ -17,35 +15,12 @@ export function Overlay(props: ComponentProps<typeof View>) {
         },
       }}
     >
-      {Platform.OS === 'android' ? (
-        <OverlayDisplayAndroid {...props} />
-      ) : (
-        <OverlayDisplayIos {...props} />
-      )}
-    </MotiView>
-  );
-}
-
-function OverlayDisplayAndroid(props: ComponentProps<typeof View>) {
-  return (
-    <View
-      flex={1}
-      opacity={0.4}
-      backgroundColor="$overlayBackground"
-      {...props}
-    ></View>
-  );
-}
-
-function OverlayDisplayIos(props: ComponentProps<typeof View>) {
-  const theme = useTheme();
-  return (
-    <View flex={1} {...props}>
-      <BlurView
-        style={{ flex: 1 }}
-        intensity={30}
-        tint={theme.overlayBlurTint.val as BlurTint}
+      <View
+        flex={1}
+        opacity={0.4}
+        backgroundColor="$overlayBackground"
+        {...props}
       />
-    </View>
+    </MotiView>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml