Windows and macOS support

README.md

@@ -1,6 +1,6 @@
 # react-native-safe-area-context
 
-[![npm](https://img.shields.io/npm/v/react-native-safe-area-context)](https://www.npmjs.com/package/react-native-safe-area-context) ![Supports Android, iOS and web](https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20web-lightgrey.svg) ![MIT License](https://img.shields.io/npm/l/react-native-safe-area-context.svg)
+[![npm](https://img.shields.io/npm/v/react-native-safe-area-context)](https://www.npmjs.com/package/react-native-safe-area-context) ![Supports Android, iOS, web, macOS and Windows](https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20web%20%7C%20macos%20%7C%20windows-lightgrey.svg) ![MIT License](https://img.shields.io/npm/l/react-native-safe-area-context.svg)
 
 [![JavaScript tests](https://github.com/th3rdwave/react-native-safe-area-context/workflows/JavaScript%20tests/badge.svg)](https://github.com/th3rdwave/react-native-safe-area-context/actions?query=workflow%3AJavaScript%20tests) [![iOS build](https://github.com/th3rdwave/react-native-safe-area-context/workflows/iOS%20build/badge.svg)](https://github.com/th3rdwave/react-native-safe-area-context/actions?query=workflow%3AiOS%20build) [![Android build](https://github.com/th3rdwave/react-native-safe-area-context/workflows/Android%20build/badge.svg)](https://github.com/th3rdwave/react-native-safe-area-context/actions?query=workflow%3AAndroid%20build)
 
@@ -131,7 +131,6 @@ Optional, defaults to `null`.
 
 Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See [optimization](#optimization) for more information on how to use this prop.
 
-
 ### SafeAreaView
 
 `SafeAreaView` is a regular `View` component with the safe area insets applied as padding or margin.
@@ -180,7 +179,6 @@ This can be useful for example to create a safe area aware separator component:
 <SafeAreaView mode="margin" style={{ height: 1, backgroundColor: '#eee' }} />
 ```
 
-
 ### useSafeAreaInsets
 
 Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.
@@ -197,7 +195,6 @@ function HookComponent() {
 }
 ```
 
-
 ### useSafeAreaFrame
 
 Returns the frame of the nearest provider. This can be used as an alternative to the `Dimensions` module.

example/package.json

@@ -3,20 +3,20 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.10.1",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.4.4",
     "@react-navigation/native": "^5.3.2",
     "@react-navigation/stack": "^5.3.6",
-    "@react-navigation/bottom-tabs": "^5.4.4",
     "expo": "^37.0.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-native": "^0.63.0-rc.0",
+    "react-native-gesture-handler": "^1.6.1",
+    "react-native-reanimated": "^1.8.0",
+    "react-native-safe-area-view": "^1.1.1",
+    "react-native-screens": "^2.7.0",
     "react-native-web": "^0.12.2",
     "react-navigation": "^4.3.9",
     "react-navigation-stack": "^2.5.0",
-    "react-navigation-tabs": "^2.8.13",
-    "react-native-gesture-handler": "^1.6.1",
-    "react-native-screens": "^2.7.0",
-    "react-native-reanimated": "^1.8.0",
-    "react-native-safe-area-view": "^1.1.1"
+    "react-navigation-tabs": "^2.8.13"
   }
 }

react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      macos: null,
+      windows: null,
+    },
+  },
+};

src/CompatNativeSafeAreaProvider.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import { NativeSafeAreaProviderProps } from './SafeArea.types';
+
+export function CompatNativeSafeAreaProvider({
+  children,
+  style,
+  onInsetsChange,
+}: NativeSafeAreaProviderProps) {
+  const window = useWindowDimensions();
+  React.useEffect(() => {
+    const insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    };
+    const frame = {
+      x: 0,
+      y: 0,
+      width: window.width,
+      height: window.height,
+    };
+    // @ts-ignore: missing properties
+    onInsetsChange({ nativeEvent: { insets, frame } });
+  }, [onInsetsChange, window.height, window.width]);
+  return <View style={style}>{children}</View>;
+}

src/NativeSafeAreaProvider.macos.tsx

@@ -0,0 +1,3 @@
+import { CompatNativeSafeAreaProvider } from './CompatNativeSafeAreaProvider';
+
+export default CompatNativeSafeAreaProvider;

src/NativeSafeAreaProvider.windows.tsx

@@ -0,0 +1,3 @@
+import { CompatNativeSafeAreaProvider } from './CompatNativeSafeAreaProvider';
+
+export default CompatNativeSafeAreaProvider;