Expo 54

example/babel.config.js

@@ -4,7 +4,7 @@ module.exports = function (api) {
     presets: ["babel-preset-expo"],
     plugins: [
       "@babel/plugin-transform-export-namespace-from",
-      "react-native-reanimated/plugin",
+      "react-native-worklets/plugin",
     ],
   };
 };

example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@draftbit/example",
   "description": "Example app for @draftbit/ui",
-  "version": "53.0.5",
+  "version": "54.0.0",
   "private": true,
   "scripts": {
     "android": "expo start --android",
@@ -14,33 +14,34 @@
     "clean:modules": "rimraf node_modules"
   },
   "dependencies": {
-    "@draftbit/maps": "53.0.5",
-    "@draftbit/ui": "53.0.5",
+    "@draftbit/maps": "54.0.0",
+    "@draftbit/ui": "54.0.0",
     "@expo/dev-server": "0.1.123",
-    "@expo/metro-runtime": "~5.0.4",
+    "@expo/metro-runtime": "~6.1.2",
     "@react-navigation/drawer": "^7.5.8",
     "@react-navigation/native": "^7.1.17",
-    "@shopify/flash-list": "1.7.6",
-    "expo": "^53.0.0",
-    "expo-asset": "~11.1.7",
-    "expo-constants": "~17.1.7",
-    "expo-font": "~13.3.2",
-    "expo-splash-screen": "~0.30.10",
-    "expo-status-bar": "~2.2.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-native": "0.79.5",
-    "react-native-gesture-handler": "~2.24.0",
+    "@shopify/flash-list": "2.0.2",
+    "expo": "^54.0.0",
+    "expo-asset": "~12.0.12",
+    "expo-constants": "~18.0.13",
+    "expo-font": "~14.0.11",
+    "expo-splash-screen": "~31.0.13",
+    "expo-status-bar": "~3.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.11.1",
-    "react-native-web": "^0.20.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0",
+    "react-native-worklets": "0.5.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "@types/react-native": "~0.70.6",
     "babel-loader": "8.1.0",
     "sharp-cli": "2.1.0"

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "53.0.5",
+  "version": "54.0.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*",

package.json

@@ -60,7 +60,7 @@
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-expo": "^53.0.2",
+    "jest-expo": "^54.0.2",
     "lerna": "^8.1.9",
     "lint-staged": "^15.2.10",
     "patch-package": "^8.0.0",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "53.0.5",
+  "version": "54.0.0",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -40,46 +40,47 @@
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/theme": "53.0.5",
+    "@draftbit/theme": "54.0.0",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "5.2.8",
     "@lottiefiles/dotlottie-react": "^0.12.0",
     "@lottiefiles/react-lottie-player": "3.5.3",
     "@mui/material": "^6.1.9",
     "@mui/x-date-pickers": "^7.22.3",
-    "@react-native-community/slider": "4.5.6",
+    "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.1",
-    "@shopify/flash-list": "1.7.6",
+    "@shopify/flash-list": "2.0.2",
     "color": "^4.2.3",
     "date-fns": "^4.1.0",
     "dateformat": "^5.0.3",
-    "expo-av": "~15.1.7",
-    "expo-image": "~2.4.0",
+    "expo-av": "~16.0.8",
+    "expo-image": "~3.0.11",
     "lodash.isequal": "^4.5.0",
     "lodash.isnumber": "^3.0.3",
     "lodash.omit": "^4.5.0",
     "lodash.tonumber": "^4.0.3",
-    "lottie-react-native": "7.2.2",
+    "lottie-react-native": "~7.3.1",
     "react-native-animated-spinkit": "1.5.2",
     "react-native-confirmation-code-field": "^7.4.0",
     "react-native-date-picker": "^5.0.7",
     "react-native-deck-swiper": "^2.0.17",
     "react-native-dropdown-picker": "^5.4.7-beta.1",
-    "react-native-gesture-handler": "~2.24.0",
+    "react-native-gesture-handler": "~2.28.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-markdown-display": "^7.0.2",
     "react-native-modal-datetime-picker": "^18.0.0",
-    "react-native-pager-view": "6.7.1",
-    "react-native-reanimated": "~3.17.4",
+    "react-native-pager-view": "6.9.1",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-worklets": "0.5.1",
     "react-native-select-dropdown": "4.0.1",
     "react-native-shadow-2": "^7.1.1",
-    "react-native-svg": "15.11.2",
+    "react-native-svg": "15.12.1",
     "react-native-swipe-list-view": "^3.2.9",
     "react-native-tab-view": "^3.4.0",
     "react-native-web-swiper": "^2.2.4",
-    "react-native-webview": "13.13.5",
+    "react-native-webview": "13.15.0",
     "react-native-youtube-iframe": "^2.3.0",
     "react-youtube": "^10.1.0",
     "uuid": "^11.0.3"

packages/core/src/__tests__/components/SectionList.test.tsx

@@ -7,7 +7,7 @@ import { uniq } from "lodash";
 import { DEFAULT_SECTION } from "../../components/SectionList/SectionList";
 
 describe("SectionList tests", () => {
-  test.each(["FlatList", "FlashList"])(
+  test.each(["FlatList"])(
     "should render all data items in %p",
     (listComponent: string) => {
       render(

packages/core/src/components/MediaPlayer/AudioPlayer/AudioPlayerWithInterface.tsx

@@ -110,11 +110,11 @@ const AudioPlayerWithInterface = React.forwardRef<
 
     let iconName;
     if (isLoading) {
-      iconName = "loading1";
+      iconName = "loading";
     } else if (isPlaying) {
       iconName = "pause";
     } else {
-      iconName = "play";
+      iconName = "caret-right";
     }
 
     return (

packages/core/src/components/MediaPlayer/MediaPlayerCommon.ts

@@ -1,5 +1,5 @@
 import { AVPlaybackSource, AVPlaybackStatus } from "expo-av";
-import * as FileSystem from "expo-file-system";
+import { File, Paths } from "expo-file-system";
 import { v4 as uuid } from "uuid";
 import { Platform } from "react-native";
 import React from "react";
@@ -73,20 +73,14 @@ export async function normalizeBase64Source(
       ? uri.substring(`data:${type}/`.length, uri.indexOf(";")) //Ex: extract 'mp4' from 'data:video/mp4;base64,....'
       : defaultMimeType;
 
-    const fileName = `${
-      FileSystem.cacheDirectory
-    }${uuid()}.${mimeType.toLowerCase()}`;
+    const file = new File(Paths.cache, `${uuid()}.${mimeType.toLowerCase()}`);
 
-    await FileSystem.writeAsStringAsync(
-      fileName,
-      uri.includes("base64,")
-        ? uri.substring(uri.indexOf("base64,") + "base64,".length) // skip header portion of base64 string
-        : uri,
-      {
-        encoding: "base64",
-      }
-    );
-    return { uri: fileName };
+    const base64Content = uri.includes("base64,")
+      ? uri.substring(uri.indexOf("base64,") + "base64,".length) // skip header portion of base64 string
+      : uri;
+
+    file.write(base64Content, { encoding: "base64" });
+    return { uri: file.uri };
   }
 
   return source;

packages/core/src/components/SectionList/SectionList.tsx

@@ -58,7 +58,7 @@ const SectionList = React.forwardRef(
       sectionHeaderTextColor,
       ...rest
     }: FlatListSectionListProps<T> | FlashListSectionListProps<T>,
-    ref: React.Ref<FlatListComponent | FlashList<any>>
+    ref: React.Ref<FlatListComponent | typeof FlashList<any>>
   ) => {
     const data = React.useMemo(
       () => (Array.isArray(dataProp) ? dataProp : []) as T[],
@@ -210,7 +210,7 @@ const SectionList = React.forwardRef(
       case "FlashList":
         return (
           <FlashList
-            ref={ref as React.Ref<FlashList<SectionListItem<T>>>}
+            ref={ref as any}
             stickyHeaderIndices={sectionHeaderIndicies}
             {...(rest as FlashListProps<SectionListItem<T>>)}
             data={dataWithSections}

packages/core/src/components/SimpleStyleScrollables/SimpleStyleFlashList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { FlashList } from "@shopify/flash-list";
-import type { FlashListProps, ContentStyle } from "@shopify/flash-list";
+import type { FlashListProps } from "@shopify/flash-list";
 import { useFlashListSplitContentContainerStyles } from "./useSplitContentContainerStyles";
 
 /**
@@ -14,16 +14,16 @@ const SimpleStyleFlashList = React.forwardRef(
       data,
       ...rest
     }: Omit<FlashListProps<T>, "contentContainerStyle">,
-    ref: React.Ref<FlashList<any>>
+    ref: React.Ref<typeof FlashList<any>>
   ) => {
     const { style, contentContainerStyle } =
       useFlashListSplitContentContainerStyles(styleProp);
 
     return (
       <FlashList
-        ref={ref}
-        style={style}
-        contentContainerStyle={contentContainerStyle as ContentStyle}
+        ref={ref as any}
+        style={style as any}
+        contentContainerStyle={contentContainerStyle}
         data={data}
         {...rest}
       />

packages/core/src/components/SimpleStyleScrollables/SimpleStyleMasonryFlashList.tsx

@@ -1,38 +1,35 @@
 import React from "react";
-import { MasonryFlashList } from "@shopify/flash-list";
-import type {
-  MasonryFlashListProps,
-  ContentStyle,
-  MasonryFlashListRef,
-} from "@shopify/flash-list";
+import { FlashList } from "@shopify/flash-list";
+import type { FlashListProps } from "@shopify/flash-list";
 import { useFlashListSplitContentContainerStyles } from "./useSplitContentContainerStyles";
 
 /**
- * A MasonryFlashList wrapper that takes a single `style` prop and internally extracts
+ * A FlashList wrapper that takes a single `style` prop and internally extracts
  * the appropriate style keys into the `contentContainerStyle`
  */
-const SimpleStyleMasonryFlashList = React.forwardRef(
+const SimpleStyleFlashList = React.forwardRef(
   <T extends any>(
     {
       style: styleProp,
       data,
       ...rest
-    }: Omit<MasonryFlashListProps<T>, "contentContainerStyle">,
-    ref: React.Ref<MasonryFlashListRef<any>>
+    }: Omit<FlashListProps<T>, "contentContainerStyle">,
+    ref: React.Ref<typeof FlashList<any>>
   ) => {
     const { style, contentContainerStyle } =
       useFlashListSplitContentContainerStyles(styleProp);
 
     return (
-      <MasonryFlashList
+      <FlashList
         ref={ref as any}
-        style={style}
-        contentContainerStyle={contentContainerStyle as ContentStyle}
+        style={style as any}
+        contentContainerStyle={contentContainerStyle}
         data={data}
+        masonry
         {...rest}
       />
     );
   }
 );
 
-export default SimpleStyleMasonryFlashList;
+export default SimpleStyleFlashList;

packages/core/src/components/SimpleStyleScrollables/SimpleStyleSectionList.tsx

@@ -22,7 +22,7 @@ const SimpleStyleSectionList = React.forwardRef(
       FlatListSectionListProps<T> | FlashListSectionListProps<T>,
       "contentContainerStyle"
     >,
-    ref: React.Ref<FlatListComponent | FlashList<any>>
+    ref: React.Ref<FlatListComponent | typeof FlashList<any>>
   ) => {
     const { style, contentContainerStyle } =
       useSplitContentContainerStyles(styleProp);

packages/core/src/components/SimpleStyleScrollables/SimpleStyleSwipeableList.tsx

@@ -22,7 +22,7 @@ const SimpleStyleSwipeableList = React.forwardRef(
       FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
       "contentContainerStyle"
     >,
-    ref: React.Ref<FlatListComponent | FlashList<any>>
+    ref: React.Ref<FlatListComponent | typeof FlashList<any>>
   ) => {
     const { style, contentContainerStyle } =
       useSplitContentContainerStyles(styleProp);

packages/core/src/components/SwipeableItem/SwipeableList.tsx

@@ -35,7 +35,7 @@ const SwipeableList = React.forwardRef(
       listComponent = "FlatList",
       ...rest
     }: FlashListSwipeableListProps<T> | FlatListSwipeableListProps<T>,
-    ref: React.Ref<FlatListComponent | FlashList<any>>
+    ref: React.Ref<FlatListComponent | typeof FlashList<any>>
   ) => {
     const [isSwiping, setIsSwiping] = React.useState(false);
 
@@ -60,10 +60,7 @@ const SwipeableList = React.forwardRef(
           );
         case "FlashList":
           return (
-            <FlashList
-              ref={ref as React.Ref<FlashList<T>>}
-              {...(rest as FlashListProps<T>)}
-            />
+            <FlashList ref={ref as any} {...(rest as FlashListProps<T>)} />
           );
       }
     };

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/maps",
-  "version": "53.0.5",
+  "version": "54.0.0",
   "description": "Map Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -39,14 +39,14 @@
   },
   "homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
   "dependencies": {
-    "@draftbit/core": "53.0.5",
-    "@draftbit/theme": "53.0.5",
+    "@draftbit/core": "54.0.0",
+    "@draftbit/theme": "54.0.0",
     "@react-google-maps/api": "~2.20.3",
     "@teovilla/react-native-web-maps": "^0.9.5",
     "color": "^4.2.3",
     "lodash.isequal": "^4.5.0",
     "react-native-maps": "1.20.1",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": "13.15.0"
   },
   "jest": {
     "preset": "jest-expo",

packages/native/app.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@react-native-community/datetimepicker"]
+}