Upgrade to expo 52 - beta

.github/workflows/ci.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - master
-      - 51
+      - 52
   pull_request:
     types: [assigned, opened, synchronize, reopened]
 
@@ -64,8 +64,8 @@ jobs:
             --yes \
             --no-verify-access
 
-      - name: Release packages (51)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/51'
+      - name: Release packages (52)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/52'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JIGSAW_AUTH_TOKEN }}
         run: |
@@ -81,12 +81,12 @@ jobs:
           # This hits Snack twice because it commonly times out the first time
           export newversion=$(npm view @draftbit/ui dist-tags.next);
           sleep 10
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$newversion"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
         working-directory: packages/ui
 
       - name: Release to Snack
@@ -96,12 +96,12 @@ jobs:
           # This hits Snack twice because it commonly times out the first time
           export version=$(jq -r .version package.json);
           sleep 10
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
-          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=51.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/ui@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/core@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
+          curl "https://snackager.expo.io/bundle/@draftbit/maps@"$version"?version_snackager=true&platforms=ios,android,web&bypassCache=true&sdkVersion=52.0.0";
         working-directory: packages/ui
 
       - name: Add comment to pull request

example/package.json

@@ -17,30 +17,30 @@
     "@draftbit/maps": "51.0.0",
     "@draftbit/ui": "51.0.0",
     "@expo/dev-server": "0.1.123",
-    "@expo/metro-runtime": "~3.2.3",
+    "@expo/metro-runtime": "~4.0.0",
     "@react-navigation/drawer": "^6.6.3",
     "@react-navigation/native": "^6.1.7",
-    "@shopify/flash-list": "1.6.4",
-    "expo": "^51.0.0",
-    "expo-asset": "~10.0.10",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.10",
-    "expo-splash-screen": "~0.27.7",
-    "expo-status-bar": "~1.12.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
+    "@shopify/flash-list": "1.7.1",
+    "expo": "^52.0.0",
+    "expo-asset": "~11.0.1",
+    "expo-constants": "~17.0.3",
+    "expo-font": "~13.0.1",
+    "expo-splash-screen": "~0.29.13",
+    "expo-status-bar": "~2.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.3",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
     "react-native-web": "~0.19.10",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@types/react": "~18.2.45",
+    "@types/react": "~18.3.12",
     "@types/react-native": "~0.70.6",
     "babel-loader": "8.1.0",
     "sharp-cli": "2.1.0"

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "51.0.0",
+  "version": "52.0.0",
   "npmClient": "yarn",
   "packages": ["packages/*", "example"],
   "command": {

package.json

@@ -35,7 +35,7 @@
     "packages/*"
   ],
   "resolutions": {
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native-gesture-handler": "~2.20.2",
     "prop-types": "^15.8.1",
     "entities": "^2.0.0"
   },
@@ -59,7 +59,7 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-expo": "^51.0.0",
+    "jest-expo": "^52.0.2",
     "lerna": "^8.1.9",
     "lint-staged": "^15.2.10",
     "patch-package": "^8.0.0",

packages/core/package.json

@@ -55,8 +55,8 @@
     "color": "^4.2.3",
     "date-fns": "^4.1.0",
     "dateformat": "^5.0.3",
-    "expo-av": "~14.0.7",
-    "expo-image": "~1.13.0",
+    "expo-av": "~15.0.1",
+    "expo-image": "~2.0.3",
     "lodash.isequal": "^4.5.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",

packages/core/src/components/Button.tsx

@@ -7,6 +7,7 @@ import {
   StyleSheet,
   TextStyle,
   ActivityIndicator,
+  ViewStyle,
 } from "react-native";
 import { withTheme } from "@draftbit/theme";
 import type { ReadTheme } from "@draftbit/theme";
@@ -111,7 +112,7 @@ function Base({
           {
             opacity: pressed ? activeOpacity : disabled ? disabledOpacity : 1,
           },
-          buttonStyles,
+          buttonStyles as ViewStyle,
         ];
       }}
       {...props}
@@ -150,7 +151,7 @@ const Solid = ({ style, theme, ...props }: Props): JSX.Element => {
           borderRadius: 8,
           backgroundColor: theme.colors.branding.primary,
         },
-        style,
+        style as ViewStyle,
       ]}
       {...props}
     />
@@ -177,7 +178,7 @@ const Outline = ({ style, theme, ...props }: Props): JSX.Element => {
           //@ts-ignore
           color: theme.colors.branding.primary,
         },
-        style,
+        style as ViewStyle,
       ]}
       {...props}
     />

packages/core/src/components/DatePicker/DatePicker.tsx

@@ -417,7 +417,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   );
 
   if (inline) {
-    return <View style={style}>{Picker}</View>;
+    return <View style={style as StyleProp<ViewStyle>}>{Picker}</View>;
   }
 
   return (
@@ -427,21 +427,24 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
           <View
             style={StyleSheet.flatten([
               styles.container,
-              omit(style, [
+              omit(style as ViewStyle, [
                 ...paddingStyleNames,
                 "backgroundColor",
                 "borderWidth",
               ]),
             ])}
           >
             {leftIconName && leftIconMode === "outset" ? (
-              <Icon {...leftIconProps} style={leftIconStyle} />
+              <Icon
+                {...leftIconProps}
+                style={leftIconStyle as ImageStyle & ViewStyle}
+              />
             ) : null}
             <View
               style={StyleSheet.flatten([
                 containerStyle,
                 style ? { height: style.height } : {},
-                omit(style, [
+                omit(style as ViewStyle, [
                   ...marginStyleNames,
                   ...positionStyleNames,
                   "borderColor",
@@ -520,10 +523,12 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
               {leftIconName && leftIconMode === "inset" ? (
                 <Icon
                   {...leftIconProps}
-                  style={{
-                    ...leftIconStyle,
-                    marginLeft: type === "solid" ? 16 : 0,
-                  }}
+                  style={
+                    {
+                      ...leftIconStyle,
+                      marginLeft: type === "solid" ? 16 : 0,
+                    } as ImageStyle & ViewStyle
+                  }
                 />
               ) : null}
 

packages/core/src/components/Image.tsx

@@ -6,6 +6,8 @@ import {
   StyleSheet,
   ImageSourcePropType,
   DimensionValue,
+  StyleProp,
+  ViewStyle,
 } from "react-native";
 import Config from "./Config";
 
@@ -70,7 +72,9 @@ const Image: React.FC<ImageProps> = ({
 
   if (aspectRatio) {
     return (
-      <AspectRatio style={[style, { width, height, aspectRatio }]}>
+      <AspectRatio
+        style={[style, { width, height, aspectRatio }] as StyleProp<ViewStyle>}
+      >
         <NativeImage
           {...props}
           source={imageSource as ImageSourcePropType}

packages/core/src/components/Picker/PickerInputContainer.tsx

@@ -1,5 +1,11 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import {
+  View,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
 import omit from "lodash.omit";
 import {
   extractPositionStyles,
@@ -72,7 +78,7 @@ const PickerInputContainer: React.FC<
         value={selectedLabel?.toString()}
         editable={false}
         disabled={disabled}
-        style={textFieldStyle}
+        style={textFieldStyle as StyleProp<ViewStyle & TextStyle>}
         {...rest}
       />
       <Touchable

packages/core/src/components/PinInput/PinInput.tsx

@@ -24,7 +24,7 @@ interface CellItem {
   isFocused: boolean;
 }
 
-interface PinInputProps extends TextInputProps {
+interface PinInputProps extends Omit<TextInputProps, "style"> {
   onInputFull?: (value: string) => void;
   cellCount?: number;
   clearOnCellFocus?: boolean;

packages/core/src/components/Pressable.tsx

@@ -3,10 +3,11 @@ import {
   Pressable as NativePressable,
   PressableProps,
   ViewStyle,
+  StyleProp,
 } from "react-native";
 
 type Props = {
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
   activeOpacity?: number;
   disabledOpacity?: number;
   androidRippleColor?: string;

packages/core/src/components/SVG.native.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { View, StyleProp, ImageStyle } from "react-native";
+import { View, StyleProp, ViewStyle, ImageStyle } from "react-native";
 import { SvgUri } from "react-native-svg";
 
 import Config from "./Config";
@@ -14,7 +14,7 @@ const SVG: React.FC<React.PropsWithChildren<SVGComponentProps>> = ({
   style,
 }) => {
   return (
-    <View style={style}>
+    <View style={style as StyleProp<ViewStyle>}>
       <SvgUri width="100%" height="100%" uri={source} />
     </View>
   );

packages/core/src/components/Touchable.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Pressable, PressableProps, ViewStyle } from "react-native";
+import { Pressable, PressableProps, StyleProp, ViewStyle } from "react-native";
 
 type Props = {
-  style?: ViewStyle;
+  style?: StyleProp<ViewStyle>;
   activeOpacity?: number;
   disabledOpacity?: number;
 } & PressableProps;

packages/core/src/interfaces/Icon.ts

@@ -27,5 +27,5 @@ export const injectIcon = <P extends IconSlot>(
   Icon: IconI
 ) =>
   React.forwardRef<any, $Without<P, "Icon">>((props, ref) =>
-    React.createElement(Component, { ...(props as P), Icon, ref })
+    React.createElement(Component, { ...(props as unknown as P), Icon, ref })
   );

packages/maps/package.json

@@ -45,8 +45,8 @@
     "@teovilla/react-native-web-maps": "^0.9.5",
     "color": "^4.2.3",
     "lodash.isequal": "^4.5.0",
-    "react-native-maps": "1.14.0",
-    "react-native-webview": "13.8.6"
+    "react-native-maps": "1.18.0",
+    "react-native-webview": "13.12.2"
   },
   "jest": {
     "preset": "jest-expo",

packages/native/package.json

@@ -41,12 +41,12 @@
   "dependencies": {
     "@draftbit/theme": "51.0.0",
     "@expo/vector-icons": "^14.0.3",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
-    "expo-camera": "~15.0.16",
-    "expo-linear-gradient": "~13.0.2",
-    "react-native-svg": "15.2.0",
-    "react-native-webview": "13.8.6"
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
+    "expo-camera": "~16.0.8",
+    "expo-linear-gradient": "~14.0.1",
+    "react-native-svg": "15.8.0",
+    "react-native-webview": "13.12.2"
   },
   "devDependencies": {},
   "jest": {

packages/native/src/components/LinearGradient.tsx

@@ -25,10 +25,11 @@ const LinearGradientComponent = ({
   endY = 100,
   style,
 }: LinearGradientComponentProps) => {
-  const colors = [color1, color2, color3].filter((color) => color) as string[];
+  const colors = color3
+    ? ([color1, color2, color3] as const)
+    : ([color1, color2] as const);
   const start = { x: startX / 100, y: startY / 100 };
   const end = { x: endX / 100, y: endY / 100 };
-
   return (
     <LinearGradient colors={colors} start={start} end={end} style={style}>
       {children}

packages/theme/src/Provider.tsx

@@ -145,12 +145,10 @@ const useChangeTheme = (): ((
 const withTheme = <Props extends { theme: ReadTheme }>(
   Component: React.ComponentType<Props>
 ) => {
-  return React.forwardRef(
-    (props: Omit<Props, "theme">, ref: React.Ref<any>) => {
-      const { theme } = React.useContext(ThemeContext);
-      return <Component {...(props as Props)} theme={theme} ref={ref} />;
-    }
-  );
+  return React.forwardRef<any, Omit<Props, "theme">>((props, ref) => {
+    const { theme } = React.useContext(ThemeContext);
+    return <Component {...(props as any)} theme={theme} ref={ref} />;
+  });
 };
 
 export { Provider, useTheme, useChangeTheme, withTheme };

packages/ui/package.json

@@ -46,7 +46,7 @@
     "@draftbit/core": "51.0.0",
     "@draftbit/native": "51.0.0",
     "@draftbit/theme": "51.0.0",
-    "react-native-reanimated": "~3.10.1"
+    "react-native-reanimated": "~3.16.1"
   },
   "devDependencies": {},
   "jest": {