Safe area provider

components/Modal.jsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 import Store from '../store';
+import { SafeAreaContext } from './SafeArea';
 
 const Modal = ({ open, onClose, children }) => {
   const ref = useRef();
@@ -9,7 +10,9 @@ const Modal = ({ open, onClose, children }) => {
   const [rect, setRect] = useState(null);
   const [y, setY] = useState(100000);
 
-  const safeAreaTop = Store.useState(s => s.safeAreaTop);
+  const { top } = useContext(SafeAreaContext);
+
+  const safeAreaTop = top;
 
   const _open = useCallback(() => {
     console.log('Opening modal!', safeAreaTop);

components/SafeArea.jsx

@@ -0,0 +1,30 @@
+import { createContext, useEffect, useState } from 'react';
+
+export const SafeAreaContext = createContext({ top: 0, bottom: 0 });
+
+export const SafeAreaProvider = ({ children }) => {
+  const [safeAreaTop, setSafeAreaTop] = useState(0);
+  const [safeAreaBottom, setSafeAreaBottom] = useState(0);
+
+  useEffect(() => {
+    // I don't know why, but we can't get the value of this CSS variable
+    // until a bit of a delay, maybe something with Next?
+    setTimeout(() => {
+      const safeAreaTop = parseInt(
+        window.getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')
+      );
+      const safeAreaBottom = window
+        .getComputedStyle(document.documentElement)
+        .getPropertyValue('--safe-area-bottom');
+
+      setSafeAreaTop(safeAreaTop);
+      setSafeAreaBottom(safeAreaBottom);
+    }, 500);
+  }, []);
+
+  return (
+    <SafeAreaContext.Provider value={{ top: safeAreaTop, bottom: safeAreaBottom }}>
+      {children}
+    </SafeAreaContext.Provider>
+  );
+};