feat: Expo 52 Upgrade

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 .expo/
 dist/
+expo-env.d.ts
 npm-debug.*
 *.jks
 *.p8

App.tsx

@@ -11,7 +11,7 @@
 import { queryClient } from "@queries/queryClient";
 import { MaterialDarkTheme, MaterialLightTheme } from "@styles/colors";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { useAppTheme, useThemeProvider } from "@theme/useAppTheme";
 import { useCoinbaseWalletListener } from "@utils/coinbaseWallet";
 import { converseEventEmitter } from "@utils/events";
 import logger from "@utils/logger";
@@ -77,10 +77,10 @@
   }, []);
 
   const showDebugMenu = useCallback(() => {
     if (!debugRef.current || !(debugRef.current as any).showDebugMenu) {
       return;
     }
     (debugRef.current as any).showDebugMenu();
   }, []);
 
   useEffect(() => {
@@ -124,7 +124,7 @@
 const AppKeyboardProvider =
   Platform.OS === "ios" ? KeyboardProvider : React.Fragment;
 
 export default function AppWithProviders() {
   const colorScheme = useColorScheme();
 
   const paperTheme = useMemo(() => {
@@ -142,7 +142,7 @@
             <ActionSheetProvider>
               <ThemeProvider value={{ themeScheme, setThemeContextOverride }}>
                 <PaperProvider theme={paperTheme}>
                   <GestureHandlerRootView style={{ flex: 1 }}>
                     <BottomSheetModalProvider>
                       <PortalProvider>
                         <App />
@@ -161,16 +161,16 @@
 }
 
 const useStyles = () => {
-  const { theme } = useAppTheme();
+  // const { theme } = useAppTheme();
 
   return useMemo(
     () =>
       StyleSheet.create({
         safe: {
           flex: 1,
-          backgroundColor: theme.colors.background.surface,
+          // backgroundColor: theme.colors.background.surface,
         },
       }),
-    [theme]
+    []
   );
 };

__mocks__/expo-haptics.ts

@@ -0,0 +1,38 @@
+// Jest mock for expo-haptics
+
+/*
+  During Expo 52 upgrade haptics were failing in tests, so mocked it for now
+*/
+
+enum ImpactFeedbackStyle {
+  Light = "light",
+  Medium = "medium",
+  Heavy = "heavy",
+  Soft = "soft",
+  Rigid = "rigid",
+}
+
+enum NotificationFeedbackType {
+  Success = "success",
+  Warning = "warning",
+  Error = "error",
+}
+
+const impactAsync = jest.fn(async (style: ImpactFeedbackStyle) => {});
+const notificationAsync = jest.fn(async (type: NotificationFeedbackType) => {});
+
+const MockedExpoHaptics = {
+  impactAsync,
+  notificationAsync,
+  ImpactFeedbackStyle,
+  NotificationFeedbackType,
+};
+
+export {
+  impactAsync,
+  notificationAsync,
+  ImpactFeedbackStyle,
+  NotificationFeedbackType,
+};
+
+export default MockedExpoHaptics;

__mocks__/expo-image.ts

@@ -0,0 +1,6 @@
+/*
+  During Expo 52 upgrade expo-image was failing in tests, so mocked it for now
+*/
+import { Image } from "react-native";
+
+export { Image };

app.config.ts

@@ -5,11 +5,11 @@
 
 import appBuildNumbers from "./app.json";
 
 const env = process.env as any;
 const isDev = env.EXPO_ENV === "dev";
 
 warnOnce(
   isDev && !(process.env as any).EXPO_PUBLIC_DEV_API_URI,
   "\n\n🚧 Running the app without EXPO_PUBLIC_DEV_API_URI setup\n\n"
 );
 
@@ -36,7 +36,7 @@
     ? "preview.getconverse.app"
     : "getconverse.app";
 
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   name: isDev ? "Converse DEV" : isPreview ? "Converse PREVIEW" : "Converse",
   scheme: isDev ? "converse-dev" : isPreview ? "converse-preview" : "converse",
@@ -150,7 +150,7 @@
       "expo-build-properties",
       {
         android: {
-          compileSdkVersion: 34,
+          compileSdkVersion: 35,
           targetSdkVersion: 34,
           buildToolsVersion: "34.0.0",
           minSdkVersion: 26,

app.json

@@ -1,5 +1,6 @@
 {
   "expo": {
+    "newArchEnabled": false,
     "version": "2.1.0",
     "ios": {
       "buildNumber": "57"

babel.config.js

@@ -17,7 +17,6 @@ module.exports = {
       {
         alias: {
           "fast-text-encoding": "text-encoding",
-          // crypto: "react-native-quick-crypto",
           crypto: "crypto-browserify",
           // This entrypoint mapping is done in @xmtp/user-preferences-bindings-wasm's "exports" in package.json
           // but we don't want to enable unstable_enablePackageExports for now in metro.config.js

components/AndroidBackAction.tsx

@@ -1,5 +1,5 @@
 import { HeaderBackButton } from "@react-navigation/elements";
-import { NativeStackNavigationProp } from "@react-navigation/native-stack/lib/typescript/src/types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { textSecondaryColor } from "@styles/colors";
 import { useColorScheme } from "react-native";
 

components/Avatar.tsx

@@ -1,25 +1,25 @@
 import { actionSecondaryColor, textSecondaryColor } from "@styles/colors";
 import { AvatarSizes } from "@styles/sizes";
 import { getFirstLetterForAvatar } from "@utils/getFirstLetterForAvatar";
-import { ImageBackground } from "expo-image";
+import { Image } from "expo-image";
 import React, { useCallback, useState } from "react";
 import {
   ColorSchemeName,
-  ImageStyle,
   Platform,
   StyleProp,
   StyleSheet,
   Text,
   useColorScheme,
   View,
+  ViewStyle,
 } from "react-native";
 
 import Picto from "./Picto/Picto";
 
 export type AvatarProps = {
   uri?: string | undefined;
   size?: number | undefined;
-  style?: StyleProp<ImageStyle>;
+  style?: StyleProp<ViewStyle>;
   color?: boolean;
   name?: string | undefined;
   // Inverts the color of the place holder
@@ -47,18 +47,17 @@ function Avatar({
     setDidError(false);
   }, []);
   return uri && !didError ? (
-    <>
-      <ImageBackground
+    <View style={[styles.imageContainer, style]}>
+      <Image
         onLoad={handleImageLoad}
         onError={handleImageError}
         key={`${uri}-${color}-${colorScheme}`}
         source={{ uri }}
-        style={[styles.imageContainer, style]}
-        imageStyle={styles.image}
+        style={styles.image}
         cachePolicy="memory-disk"
         testID="avatar-image"
-      ></ImageBackground>
-    </>
+      />
+    </View>
   ) : (
     <View
       style={StyleSheet.flatten([

components/SvgImageUri.tsx

@@ -6,14 +6,15 @@ import {
   ImageSourcePropType,
   ImageStyle,
   StyleProp,
+  ViewStyle,
 } from "react-native";
 import { NumberProp, SvgXml } from "react-native-svg";
 
 type Props = {
   width?: NumberProp;
   height?: NumberProp;
   uri: string | null;
-  style?: StyleProp<ImageStyle>;
+  style?: StyleProp<ViewStyle & ImageStyle>;
   defaultSource?: ImageSourcePropType;
 };
 

components/__tests__/Avatar.perf-test.tsx

@@ -4,10 +4,15 @@ import React from "react";
 import { measureRenders } from "reassure";
 
 import Avatar from "../Avatar";
+import { TestThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider";
 
 jest.setTimeout(600_000);
 
-const TestComponent = ({ uri }: { uri?: string }) => <Avatar uri={uri} />;
+const TestComponent = ({ uri }: { uri?: string }) => (
+  <TestThemeProvider>
+    <Avatar uri={uri} />
+  </TestThemeProvider>
+);
 
 test("Empty Avatar 10 runs", async () => {
   const scenario = async () => {

components/__tests__/Avatar.test.tsx

@@ -4,6 +4,7 @@ import { render } from "@testing-library/react-native";
 import React from "react";
 
 import Avatar from "../Avatar"; // Adjust the path as needed
+import { renderWithThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider";
 
 // Mock the useColorScheme hook to always return 'light' for consistency in tests
 jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({
@@ -13,25 +14,27 @@ jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({
 
 describe("Avatar Component", () => {
   it("renders correctly with image URI", () => {
-    const { getByTestId } = render(
+    const { getByTestId } = renderWithThemeProvider(
       <Avatar uri="http://placebacon.net/400/300" size={50} />
     );
 
     // Check if the ImageBackground is rendered with the correct URI
     const image = getByTestId("avatar-image");
-    expect(image.props.source[0].uri).toBe("http://placebacon.net/400/300");
+    expect(image.props.source.uri).toBe("http://placebacon.net/400/300");
   });
 
   it("renders correctly with name and without image URI", () => {
-    const { getByText } = render(<Avatar name="John Doe" size={50} />);
+    const { getByText } = renderWithThemeProvider(
+      <Avatar name="John Doe" size={50} />
+    );
 
     // Check if the first letter of the name is rendered
     const letter = getByText("J");
     expect(letter).toBeTruthy();
   });
 
   it("renders placeholder picto if no image URI or name is provided", () => {
-    const { getByTestId } = render(<Avatar size={50} />);
+    const { getByTestId } = renderWithThemeProvider(<Avatar size={50} />);
 
     // Check if the Picto component is rendered
     const picto = getByTestId("avatar-placeholder");

components/__tests__/Button.test.tsx → design-system/Button/Button.test.tsx

@@ -1,10 +1,9 @@
-// __tests__/Button.test.tsx
-
-import { render, fireEvent } from "@testing-library/react-native";
+import { fireEvent } from "@testing-library/react-native";
 import React from "react";
 import { Platform } from "react-native";
 
-import Button from "../Button/Button";
+import { Button } from "./Button";
+import { renderWithThemeProvider } from "@/design-system/test-utils/renderWithThemeProvider";
 
 // Mock useColorScheme for consistent testing
 jest.mock("react-native/Libraries/Utilities/useColorScheme", () => ({
@@ -17,7 +16,7 @@ describe("Button Component", () => {
     it("renders correctly with primary variant", () => {
       Platform.OS = "ios"; // Set the platform to iOS
 
-      const { toJSON, getByText } = render(
+      const { toJSON, getByText } = renderWithThemeProvider(
         <Button title="Primary Button" action="primary" />
       );
 
@@ -32,7 +31,7 @@ describe("Button Component", () => {
       Platform.OS = "ios"; // Set the platform to iOS
 
       const onPressMock = jest.fn();
-      const { getByText } = render(
+      const { getByText } = renderWithThemeProvider(
         <Button
           title="Clickable Button"
           action="primary"
@@ -51,7 +50,7 @@ describe("Button Component", () => {
     it("renders correctly with danger variant", () => {
       Platform.OS = "android"; // Set the platform to Android (or default)
 
-      const { toJSON, getByText } = render(
+      const { toJSON, getByText } = renderWithThemeProvider(
         <Button title="Secondary Danger Button" action="danger" />
       );
 
@@ -65,7 +64,7 @@ describe("Button Component", () => {
     it("renders correctly with picto", () => {
       Platform.OS = "android";
 
-      const { toJSON, getByText } = render(
+      const { toJSON, getByText } = renderWithThemeProvider(
         <Button title="Button with Picto" picto="star" />
       );
 

design-system/Icon/Icon.android.tsx

@@ -3,6 +3,7 @@ import { useAppTheme } from "@theme/useAppTheme";
 import logger from "@utils/logger";
 
 import { IIconName, IIconProps } from "./Icon.types";
+import { StyleProp, TextStyle } from "react-native";
 
 export const iconRegistry: Record<
   IIconName,
@@ -94,5 +95,13 @@ export function Icon(props: IIconProps) {
     return null;
   }
 
-  return <MaterialIcons name={iconName} size={size} color={color} {...rest} />;
+  return (
+    <MaterialIcons
+      {...rest}
+      style={rest.style as StyleProp<TextStyle>}
+      name={iconName}
+      size={size}
+      color={color}
+    />
+  );
 }

design-system/Icon/Icon.types.ts

@@ -1,4 +1,4 @@
-import { ColorValue, StyleProp, ViewStyle } from "react-native";
+import { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
 import { RequireExactlyOne } from "../../types/general";
 
 export type IIconName =

design-system/IconButton/IconButton.tsx

@@ -3,6 +3,7 @@ import {
   GestureResponderEvent,
   PressableStateCallbackType,
   StyleProp,
+  TextStyle,
   ViewStyle,
 } from "react-native";
 import { useAppTheme } from "../../theme/useAppTheme";
@@ -62,7 +63,7 @@ export function IconButton(props: IIconButtonProps) {
   );
 
   const iconStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> =>
+    ({ pressed }: PressableStateCallbackType): StyleProp<TextStyle> =>
       themed(
         getIconStyle({
           variant,
@@ -110,13 +111,13 @@ export function IconButton(props: IIconButtonProps) {
       onPress={handlePress}
       {...rest}
     >
-      {({ pressed }) => {
+      {({ pressed, hovered }) => {
         if (iconName) {
           return (
             <Icon
               picto={iconName}
-              style={iconStyle({ pressed })}
-              {...iconProps({ pressed })}
+              style={iconStyle({ pressed, hovered })}
+              {...iconProps({ pressed, hovered })}
             />
           );
         }