From d8740f55e9bc4b58462fd9d73a8b33d3527fa84c Mon Sep 17 00:00:00 2001 From: eyounan Date: Tue, 12 Mar 2024 09:08:45 -0400 Subject: [PATCH] feat: introduce latest skia version Key Highlights: - Updated skia version to newest release, 1.0.2 - Shifted responsibility of initializing Skia on web to client - Fixed example application Expo Router implementation to load skia before rendering the app --- example/index.tsx | 5 +++ example/index.web.tsx | 6 ++++ example/ios/Podfile.lock | 4 +-- example/package.json | 4 +-- example/yarn.lock | 8 ++--- package.json | 2 +- src/components/SkiaComponents.tsx | 6 ---- src/components/SkiaComponents.web.tsx | 49 --------------------------- src/components/index.ts | 3 ++ src/index.ts | 3 +- 10 files changed, 24 insertions(+), 66 deletions(-) create mode 100644 example/index.tsx create mode 100644 example/index.web.tsx delete mode 100644 src/components/SkiaComponents.tsx delete mode 100644 src/components/SkiaComponents.web.tsx create mode 100644 src/components/index.ts diff --git a/example/index.tsx b/example/index.tsx new file mode 100644 index 0000000..bc66b89 --- /dev/null +++ b/example/index.tsx @@ -0,0 +1,5 @@ +import "@expo/metro-runtime"; +import { App } from "expo-router/build/qualified-entry"; +import { renderRootComponent } from "expo-router/build/renderRootComponent"; + +renderRootComponent(App); diff --git a/example/index.web.tsx b/example/index.web.tsx new file mode 100644 index 0000000..a6ef871 --- /dev/null +++ b/example/index.web.tsx @@ -0,0 +1,6 @@ +import "@expo/metro-runtime"; +import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web"; +import { App } from "expo-router/build/qualified-entry"; +import { renderRootComponent } from "expo-router/build/renderRootComponent"; + +LoadSkiaWeb().then(() => renderRootComponent(App)); diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 1d95099..4429e8d 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1014,7 +1014,7 @@ PODS: - React-debug - react-native-safe-area-context (4.8.2): - React-Core - - react-native-skia (0.1.241): + - react-native-skia (1.0.2): - glog - RCT-Folly (= 2022.05.16.00) - React @@ -1502,7 +1502,7 @@ SPEC CHECKSUMS: React-logger: 0a57b68dd2aec7ff738195f081f0520724b35dab React-Mapbuffer: 63913773ed7f96b814a2521e13e6d010282096ad react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89 - react-native-skia: 8fa65cf8828f6f8f9629e1577c0b079b7160d422 + react-native-skia: 0c09a4baff5db09a88dc6c9bfba25bcf4f5bbe8a React-nativeconfig: d7af5bae6da70fa15ce44f045621cf99ed24087c React-NativeModulesApple: 0123905d5699853ac68519607555a9a4f5c7b3ac React-perflogger: 8a1e1af5733004bdd91258dcefbde21e0d1faccd diff --git a/example/package.json b/example/package.json index 3b22358..7d90b67 100644 --- a/example/package.json +++ b/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "version": "1.0.0", - "main": "expo-router/entry", + "main": "index", "scripts": { "start": "expo start --dev-client", "android": "expo run:android", @@ -11,7 +11,7 @@ }, "dependencies": { "@expo/metro-runtime": "~3.1.3", - "@shopify/react-native-skia": "^0.1.241", + "@shopify/react-native-skia": "1.0.2", "expo": "~50.0.8", "expo-blur": "~12.9.2", "expo-constants": "~15.4.5", diff --git a/example/yarn.lock b/example/yarn.lock index 12c0e89..3b6e120 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -2305,10 +2305,10 @@ component-type "^1.2.1" join-component "^1.1.0" -"@shopify/react-native-skia@^0.1.241": - version "0.1.241" - resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.241.tgz#592471a565f3a7792e03a453eaf922518dd994e5" - integrity sha512-jQFJHiNUVONTGPPnL7LIJc3kg6x4PBPh3m7NAJuTxuhB8VOSVlQR3UWd4tDHHJgj7otG3S2dbHD7+bftxM5cFA== +"@shopify/react-native-skia@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.0.2.tgz#3ffa54f5df524ebae0ce55bee1e9efbe3e7cf959" + integrity sha512-w6qS+jCeUGKDJAOok5QJV6flWlvFt0Vmc9mNXi2n4jfHkQ+uccYVHFCXazhCAc5b8mFjcfMNygy12SVgP4d46g== dependencies: canvaskit-wasm "0.39.1" react-reconciler "0.27.0" diff --git a/package.json b/package.json index 4c129aa..85dfd27 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "@types/react": "17.0.21" }, "peerDependencies": { - "@shopify/react-native-skia": "0.1.241", + "@shopify/react-native-skia": "1.0.2", "react": ">=18.0.0", "react-native": ">=0.71.0", "react-native-gesture-handler": ">=2.0.0", diff --git a/src/components/SkiaComponents.tsx b/src/components/SkiaComponents.tsx deleted file mode 100644 index 582f4b9..0000000 --- a/src/components/SkiaComponents.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { LineChart as LineChartImpl } from "./LineChart"; -import type { LineChartProps } from "./LineChart"; - -const LineChart: React.FC = LineChartImpl; - -export { LineChart, type LineChartProps }; diff --git a/src/components/SkiaComponents.web.tsx b/src/components/SkiaComponents.web.tsx deleted file mode 100644 index 2087d25..0000000 --- a/src/components/SkiaComponents.web.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { LoadSkiaWeb } from "@shopify/react-native-skia/lib/module/web"; -import { useEffect, useState } from "react"; -import { Text } from "react-native"; - -import { LineChart as LineChartImpl } from "./LineChart"; -import type { LineChartProps } from "./LineChart"; - -type LoadState = "loading" | "loaded" | "failed"; - -const loadSkia = async (): Promise<"loaded" | "failed"> => { - try { - await LoadSkiaWeb(); - return "loaded"; - } catch (error) { - console.error(error); - return "failed"; - } -}; - -interface SkiaLoaderComponentProps { - Component: React.ComponentType; -} - -const SkiaLoaderComponent: React.FC = ({ Component }) => { - const [skiaState, setSkiaState] = useState("loading"); - - useEffect(() => { - const doLoad = async () => { - const result = await loadSkia(); - setSkiaState(result); - }; - - // Keep calling doLoad until it's loaded: - if (skiaState === "loading" || skiaState === "failed") { - setSkiaState("loading"); - doLoad(); - } - }, [skiaState]); - - if (skiaState === "loading") return Loading Skia...; - if (skiaState === "failed") return null; - return ; -}; - -const LineChart: React.FC = (props) => { - return } />; -}; - -export { LineChart, type LineChartProps }; diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 0000000..8295b1e --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,3 @@ +export { LineChart } from "./LineChart"; +export type { LineChartProps } from "./LineChart"; +export { AxisLabelComponentProps } from "./LineChart/AxisLabel"; diff --git a/src/index.ts b/src/index.ts index 5f22c84..5b25cba 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1 @@ -export { LineChart, type LineChartProps } from "./components/SkiaComponents"; -export { type AxisLabelComponentProps } from "./components/LineChart/AxisLabel"; +export { LineChart, type LineChartProps, type AxisLabelComponentProps } from "./components";