fix: web builds

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
   presets: ["module:metro-react-native-babel-preset"],
+  plugins: [["@babel/plugin-transform-react-jsx", { runtime: "automatic" }]],
 };

example/ios/Podfile.lock

@@ -1541,4 +1541,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0bd31d4d3637422db705fe5355565acd8e715825
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2

example/metro.config.js

@@ -23,6 +23,7 @@ config.resolver.extraNodeModules = new Proxy(
 // excludes the one from the parent folder when bundling.
 
 const IGNORED_LIBS = [
+  "react",
   "react-dom",
   "react-native",
   "@shopify/react-native-skia",

package.json

@@ -56,6 +56,9 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@release-it/conventional-changelog": "^5.0.0",
@@ -74,6 +77,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.0",
     "jest": "^28.1.1",
+    "metro-react-native-babel-preset": "^0.77.0",
     "prettier": "^3.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -130,7 +134,12 @@
     "output": "lib",
     "targets": [
       "commonjs",
-      "module",
+      [
+        "module",
+        {
+          "configFile": true
+        }
+      ],
       [
         "typescript",
         {

src/components/LineChart/index.tsx

@@ -1,5 +1,5 @@
 import { Canvas, Path } from "@shopify/react-native-skia";
-import React, { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { LayoutChangeEvent, StyleSheet, View, ViewProps } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";