Expo 48 (#679)

YoussefHenna · web-flow · commit 03d670d550df · 2023-05-11T00:32:29.000+03:00
* Upgraded packages to expo 48 versions * v48.0.0 * ci on 47 branch instead of 46 * yarn.lock * Upgrade rn + remove webpack config resolution * Cast aspect ratio to number * Remove fonts from examples to get rid of warnings * Remove webpack alias for react-native * Move deprecated components into deprecated folder + minor cleanup * Delete rn maps patch * Added deprecated comments * Fixed linting * Downgrade date time picker due to react-native-datetimepicker/datetimepicker#750 not fixed yet * Made versions exact
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - master
-      - 46
+      - 47
   pull_request:
     types: [assigned, opened, synchronize, reopened]
 
@@ -61,8 +61,8 @@ jobs:
             --yes \
             --no-verify-access
 
-      - name: Release packages (46)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/46'
+      - name: Release packages (47)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/47'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JIGSAW_AUTH_TOKEN }}
         run: |
@@ -71,8 +71,8 @@ jobs:
             --yes \
             --no-verify-access
 
-      - name: Release packages (46)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/46'
+      - name: Release packages (47)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/47'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.JIGSAW_AUTH_TOKEN }}
         run: |
diff --git a/example/package.json b/example/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "47.3.1",
+  "version": "48.0.0",
   "private": true,
   "main": "__generated__/AppEntry.js",
   "scripts": {
@@ -15,32 +15,32 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "47.3.1",
-    "@draftbit/ui": "47.3.1",
+    "@draftbit/maps": "48.0.0",
+    "@draftbit/ui": "48.0.0",
     "@expo/dev-server": "0.1.123",
-    "@expo/webpack-config": "^0.17.2",
+    "@expo/webpack-config": "^18.0.1",
     "@react-navigation/drawer": "^5.12.9",
     "@react-navigation/native": "^5.9.8",
-    "@shopify/flash-list": "1.3.1",
-    "expo": "^47.0.0",
+    "@shopify/flash-list": "1.4.0",
+    "expo": "^48.0.0",
     "expo-app-loading": "~2.1.1",
-    "expo-asset": "~8.7.0",
-    "expo-constants": "~14.0.2",
-    "expo-font": "~11.0.1",
-    "expo-splash-screen": "~0.17.5",
-    "expo-status-bar": "~1.4.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-native": "0.70.8",
-    "react-native-gesture-handler": "~2.8.0",
-    "react-native-reanimated": "~2.12.0",
-    "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0",
-    "react-native-web": "~0.18.7"
+    "expo-asset": "~8.9.1",
+    "expo-constants": "~14.2.1",
+    "expo-font": "~11.1.1",
+    "expo-splash-screen": "~0.18.2",
+    "expo-status-bar": "~1.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.7",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0",
+    "react-native-web": "~0.18.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
-    "@types/react": "~18.0.24",
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.0.27",
     "@types/react-native": "~0.70.6",
     "babel-loader": "8.1.0",
     "sharp-cli": "2.1.0"
diff --git a/example/src/DatePickerExample.js b/example/src/DatePickerExample.js
@@ -123,7 +123,6 @@ function DatePickerExample({ theme }) {
           mode={"date"}
           style={{
             backgroundColor: "red",
-            fontFamily: "AbrilFatface_400Regular",
             fontSize: 22,
             paddingBottom: 16,
             paddingTop: 16,
@@ -139,7 +138,6 @@ function DatePickerExample({ theme }) {
           mode={"time"}
           style={{
             backgroundColor: "black",
-            fontFamily: "AbrilFatface_400Regular",
             fontSize: 26,
             color: `white`,
             paddingBottom: 16,
diff --git a/example/src/LayoutExample.js b/example/src/LayoutExample.js
@@ -39,11 +39,9 @@ function LayoutExample({ theme }) {
       </Section>
       <Divider />
       <Divider />
-      <Surface>
-        <Section title="Circle">
-          <Circle />
-        </Section>
-      </Surface>
+      <Section title="Circle">
+        <Circle bgColor="black" />
+      </Section>
     </ScreenContainer>
   );
 }
diff --git a/example/src/PickerExample.js b/example/src/PickerExample.js
@@ -155,7 +155,6 @@ function PickerExample({ theme }) {
           style={{
             fontSize: 30,
             color: "red",
-            fontFamily: "Courier New",
           }}
           leftIconName={"AntDesign/caretleft"}
         />
diff --git a/example/src/TextFieldExample.js b/example/src/TextFieldExample.js
@@ -90,7 +90,6 @@ export default function TextFieldExample() {
             style={{
               fontSize: 30,
               color: "red",
-              fontFamily: "Courier New",
             }}
           />
           <TextField
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -2,6 +2,5 @@ const { createWebpackConfigAsync } = require("expo-yarn-workspaces/webpack");
 
 module.exports = async function (env, argv) {
   const config = await createWebpackConfigAsync(env, argv);
-  config.resolve.alias["react-native"] = "react-native-web";
   return config;
 };
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "47.3.1",
+  "version": "48.0.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*", "example"],
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "clean": "lerna run clean",
     "clean:modules": "lerna run clean:modules && rm -rf node_modules",
     "typescript": "tsc --composite false",
-    "version:expo": "lerna version major --no-push",
+    "version:expo": "lerna version major --no-push --exact",
     "version:major": "lerna version minor --no-push --exact",
     "version:minor": "lerna version patch --no-push --exact",
     "version:patch": "echo \"No patch versions: See root README.md\"",
@@ -84,11 +84,11 @@
           "bracketSpacing": true
         }
       ]
+    },
+    "parserOptions": {
+      "requireConfigFile": false
     }
   },
-  "resolutions": {
-    "@expo/webpack-config": "^0.17.2"
-  },
   "eslintIgnore": [
     "scripts",
     "example/web-build",
@@ -103,7 +103,8 @@
     "tabWidth": 2,
     "trailingComma": "es5",
     "useTabs": false,
-    "bracketSpacing": true
+    "bracketSpacing": true,
+    "endOfLine": "auto"
   },
   "lint-staged": {
     "*.{js,ts,tsx,jsx}": "eslint --cache --fix",
@@ -122,8 +123,5 @@
   },
   "engines": {
     "node": "16.x"
-  },
-  "dependencies": {
-    "@expo/webpack-config": "^0.17.2"
   }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "47.3.1",
+  "version": "48.0.0",
   "description": "Core (non-native) Components",
   "main": "lib/src/index.js",
   "types": "lib/src/index.d.ts",
@@ -39,26 +39,26 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "47.3.1",
+    "@draftbit/types": "48.0.0",
     "@expo/vector-icons": "^13.0.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
-    "@react-native-community/slider": "4.2.4",
+    "@react-native-community/slider": "4.4.2",
     "@react-native-picker/picker": "2.4.8",
-    "@shopify/flash-list": "1.3.1",
+    "@shopify/flash-list": "1.4.0",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
-    "expo-av": "~13.0.3",
+    "expo-av": "~13.2.1",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
     "react-native-deck-swiper": "^2.0.12",
-    "react-native-gesture-handler": "~2.8.0",
+    "react-native-gesture-handler": "~2.9.0",
     "react-native-markdown-display": "^7.0.0-alpha.2",
     "react-native-modal-datetime-picker": "^13.0.0",
-    "react-native-pager-view": "6.0.1",
-    "react-native-reanimated": "~2.12.0",
+    "react-native-pager-view": "6.1.2",
+    "react-native-reanimated": "~2.14.4",
     "react-native-shadow-2": "^7.0.7",
     "react-native-svg": "13.4.0",
     "react-native-swipe-list-view": "^3.2.9",
diff --git a/packages/core/src/components/AspectRatio.tsx b/packages/core/src/components/AspectRatio.tsx
@@ -21,9 +21,9 @@ const AspectRatio: React.FC<React.PropsWithChildren<Props>> = (props) => {
   if (layout) {
     const { width = 0, height = 0 } = layout;
     if (width === 0) {
-      style.push({ width: height * (1 / aspectRatio), height });
+      style.push({ width: height * (1 / +aspectRatio), height });
     } else {
-      style.push({ width, height: width * (1 / aspectRatio) });
+      style.push({ width, height: width * (1 / +aspectRatio) });
     }
   }
   return (
diff --git a/packages/core/src/components/Justification.ts b/packages/core/src/components/Justification.ts
diff --git a/packages/core/src/components/Picker/Picker.tsx b/packages/core/src/components/Picker/Picker.tsx
@@ -15,7 +15,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+import Button from "../../deprecated-components/DeprecatedButton";
 import Touchable from "../Touchable";
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
diff --git a/packages/core/src/components/Picker/PickerComponent.ios.tsx b/packages/core/src/components/Picker/PickerComponent.ios.tsx
@@ -8,7 +8,7 @@ import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
 
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
+import Button from "../../deprecated-components/DeprecatedButton";
 import TextField from "../TextField";
 import Touchable from "../Touchable";
 import { PickerComponentProps } from "./PickerTypes";
diff --git a/packages/core/src/components/ResizeMode.ts b/packages/core/src/components/ResizeMode.ts
diff --git a/packages/core/src/deprecated-components/AnimatedCircularProgress.tsx b/packages/core/src/deprecated-components/AnimatedCircularProgress.tsx
@@ -20,6 +20,9 @@ type Props = {
   onAnimationComplete?: Animated.EndCallback | undefined;
 } & CircularProgressProps;
 
+/**
+ * @deprecated DEPRECATED
+ */
 const AnimatedCircularProgress: React.FC<React.PropsWithChildren<Props>> = ({
   duration = 500,
   easing = Easing.out(Easing.ease),
diff --git a/packages/core/src/deprecated-components/CircularProgress.tsx b/packages/core/src/deprecated-components/CircularProgress.tsx
@@ -22,6 +22,9 @@ export type Props = {
   dashedTint?: { width: number; gap: number };
 };
 
+/**
+ * @deprecated DEPRECATED
+ */
 class CircularProgress extends React.Component<Props> {
   polarToCartesian = (
     centerX: number,
diff --git a/packages/core/src/deprecated-components/Container.tsx b/packages/core/src/deprecated-components/Container.tsx
@@ -11,7 +11,14 @@ import { withTheme } from "../theming";
 
 import Elevation from "../components/Elevation";
 import type { Theme } from "../styles/DefaultTheme";
-import { ResizeModeType } from "../components/ResizeMode";
+
+type ResizeModeType =
+  | "cover"
+  | "contain"
+  | "stretch"
+  | "repeat"
+  | "center"
+  | undefined;
 
 type Props = {
   theme: Theme;
diff --git a/packages/core/src/deprecated-components/DeprecatedButton.tsx b/packages/core/src/deprecated-components/DeprecatedButton.tsx
@@ -11,8 +11,8 @@ import {
   PressableProps,
 } from "react-native";
 import color from "color";
-import Config from "./Config";
-import Elevation from "./Elevation";
+import Config from "../components/Config";
+import Elevation from "../components/Elevation";
 import { withTheme } from "../theming";
 
 import type { Theme } from "../styles/DefaultTheme";
@@ -66,6 +66,9 @@ type Props = {
 } & PressableProps &
   IconSlot;
 
+/**
+ * @deprecated DEPRECATED
+ */
 const Button: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
diff --git a/packages/core/src/deprecated-components/DeprecatedCardWrapper.tsx b/packages/core/src/deprecated-components/DeprecatedCardWrapper.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { withTheme } from "../theming";
-import Touchable from "./Touchable";
+import Touchable from "../components/Touchable";
 import { StyleProp, ViewStyle } from "react-native";
 import theme from "../styles/DefaultTheme";
 
@@ -23,6 +23,9 @@ const getWidth = (numColumns: number) => {
   }
 };
 
+/**
+ * @deprecated DEPRECATED
+ */
 const Card: React.FC<React.PropsWithChildren<Props>> = ({
   numColumns = 3,
   children,
diff --git a/packages/core/src/deprecated-components/DeprecatedFAB.tsx b/packages/core/src/deprecated-components/DeprecatedFAB.tsx
@@ -10,9 +10,9 @@ import {
   PressableProps,
 } from "react-native";
 import color from "color";
-import Config from "./Config";
-import Text from "./Text";
-import Elevation from "./Elevation";
+import Config from "../components/Config";
+import Text from "../components/Text";
+import Elevation from "../components/Elevation";
 import { withTheme } from "../theming";
 
 import type { Theme } from "../styles/DefaultTheme";
@@ -68,6 +68,9 @@ type Props = {
 } & PressableProps &
   IconSlot;
 
+/**
+ * @deprecated DEPRECATED
+ */
 const FAB: React.FC<React.PropsWithChildren<Props>> = ({
   Icon,
   icon,
diff --git a/packages/core/src/deprecated-components/ProgressCircle.tsx b/packages/core/src/deprecated-components/ProgressCircle.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Text, StyleProp, ViewStyle, TextStyle } from "react-native";
-import AnimatedCircularProgress from "../components/AnimatedCircularProgress";
+import AnimatedCircularProgress from "./AnimatedCircularProgress";
 import { withTheme } from "../theming";
 import themeT from "../styles/DefaultTheme";
 import { colorTypes } from "@draftbit/types";
diff --git a/packages/maps/package.json b/packages/maps/package.json
diff --git a/packages/native/package.json b/packages/native/package.json
diff --git a/packages/types/package.json b/packages/types/package.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
diff --git a/packages/web-maps/package.json b/packages/web-maps/package.json
diff --git a/patches/react-native-maps+1.3.2.patch b/patches/react-native-maps+1.3.2.patch
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "version": "47.3.1",`
	`2`	`+ "version": "48.0.0",`
`3`	`3`	`"npmClient": "yarn",`
`4`	`4`	`"useWorkspaces": true,`
`5`	`5`	`"packages": ["packages/*", "example"],`