fix: resolve native SafeAreaProvider via exports map (#279)

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.

Author: danstepanov

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",

src/__tests__/native/env.test.ios.tsx

@@ -1,19 +1,16 @@
-// 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);
     margin-left: env(safe-area-inset-left);
     margin-right: env(safe-area-inset-right);
   }`);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const SafeAreaProvider = View as any;
-
   render(
     <SafeAreaProvider
       initialMetrics={{

src/components/SafeAreaProvider.tsx

@@ -0,0 +1 @@
+export { SafeAreaProvider } from "react-native-css/components/react-native-safe-area-context";