From 63a9a9c591b38354358e8f9dc8240233846733f8 Mon Sep 17 00:00:00 2001
From: Dan Stepanov <dan@danstepanov.com>
Date: Sun, 22 Feb 2026 01:38:49 -0800
Subject: [PATCH] fix: resolve native SafeAreaProvider via exports map

The ./components/* wildcard in the exports map resolved
env(safe-area-inset-*) to the web passthrough file (.tsx) instead
of the native wrapper (.native.tsx) that injects CSS variables via
SafeAreaEnv. Metro treats exports-resolved paths as final and does
not apply platform-suffix resolution.

Add an explicit exports entry for
./components/react-native-safe-area-context that maps the
react-native condition to .native.tsx, and add a SafeAreaProvider
convenience re-export consistent with the component naming pattern
used by View, Text, etc.

Enable the previously skipped env(safe-area-inset-*) test.
---
 package.json                          | 12 ++++++++++++
 src/__tests__/native/env.test.ios.tsx |  7 ++-----
 src/components/SafeAreaProvider.tsx   |  1 +
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/components/SafeAreaProvider.tsx

diff --git a/package.json b/package.json
index f4c898e5..028af6d2 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,18 @@
         "types": "./dist/typescript/commonjs/src/components/index.d.ts"
       }
     },
+    "./components/react-native-safe-area-context": {
+      "source": "./src/components/react-native-safe-area-context.native.tsx",
+      "react-native": "./src/components/react-native-safe-area-context.native.tsx",
+      "import": {
+        "types": "./dist/typescript/module/src/components/react-native-safe-area-context.d.ts",
+        "default": "./dist/module/components/react-native-safe-area-context.js"
+      },
+      "require": {
+        "types": "./dist/typescript/commonjs/src/components/react-native-safe-area-context.d.ts",
+        "default": "./dist/commonjs/components/react-native-safe-area-context.js"
+      }
+    },
     "./components/*": {
       "source": "./src/components/*.tsx",
       "react-native": "./src/components/*.tsx",
diff --git a/src/__tests__/native/env.test.ios.tsx b/src/__tests__/native/env.test.ios.tsx
index 8f3ddb79..b84d39f9 100644
--- a/src/__tests__/native/env.test.ios.tsx
+++ b/src/__tests__/native/env.test.ios.tsx
@@ -1,9 +1,9 @@
-// import { SafeAreaProvider } from "react-native-css/components/SafeAreaProvider";
 import { render, screen } from "@testing-library/react-native";
+import { SafeAreaProvider } from "react-native-css/components/SafeAreaProvider";
 import { View } from "react-native-css/components/View";
 import { registerCSS, testID } from "react-native-css/jest";
 
-test.skip("safe-area-inset-*", () => {
+test("safe-area-inset-*", () => {
   registerCSS(`.my-class {
     margin-top: env(safe-area-inset-top);
     margin-bottom: env(safe-area-inset-bottom);
@@ -11,9 +11,6 @@ test.skip("safe-area-inset-*", () => {
     margin-right: env(safe-area-inset-right);
   }`);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const SafeAreaProvider = View as any;
-
   render(
     <SafeAreaProvider
       initialMetrics={{
diff --git a/src/components/SafeAreaProvider.tsx b/src/components/SafeAreaProvider.tsx
new file mode 100644
index 00000000..b0e0debf
--- /dev/null
+++ b/src/components/SafeAreaProvider.tsx
@@ -0,0 +1 @@
+export { SafeAreaProvider } from "react-native-css/components/react-native-safe-area-context";