Safe area

2020-12-22 13:02:06 -06:00
parent 9a37a9f7db
commit fc7b7649d3
5 changed files with 29 additions and 13 deletions
@@ -1,10 +1,30 @@
 import Head from 'next/head';
+import { useEffect } from 'react';

 import 'tailwindcss/tailwind.css';
+import Store from '../store';

 import '../styles/global.css';

 function MyApp({ Component, pageProps }) {
+  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');
+
+      Store.update(s => {
+        s.safeAreaTop = safeAreaTop;
+        s.safeAreaBottom = safeAreaBottom;
+      });
+    }, 500);
+  }, []);
+
  return (
    <>
      <Head>
@@ -1,7 +1,5 @@
 import { Virtuoso } from 'react-virtuoso';

-import { faces } from '../data';
-
 import Store from '../store';

 import App from '../components/App';