Safe area provider

2020-12-22 13:15:15 -06:00
parent fc7b7649d3
commit 36b3fb8de0
4 changed files with 52 additions and 34 deletions
@@ -7,24 +7,6 @@ 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>
@@ -16,6 +16,7 @@ import List from '../components/List';
 import ListItem from '../components/ListItem';
 import { useState } from 'react';
 import Button from '../components/Button';
+import { SafeAreaProvider } from '../components/SafeArea';

 const pages = [
  { id: 'home', title: 'Home', icon: 'home-outline', selectedIcon: 'home', component: Home },
@@ -135,20 +136,22 @@ export default function Index() {
  //
  return (
    <App>
-      <Menu open={showMenu} onClose={closeMenu}>
-        <MenuContent />
-      </Menu>
-      <Nav page={page} />
-      <CurrentPage page={page} />
-      <TabBar>
-        {pages.map(p => (
-          <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
-        ))}
-      </TabBar>
-      <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
-      <Modal open={showNotifications} onClose={closeNotifications}>
-        <NotificationsContent />
-      </Modal>
+      <SafeAreaProvider>
+        <Menu open={showMenu} onClose={closeMenu}>
+          <MenuContent />
+        </Menu>
+        <Nav page={page} />
+        <CurrentPage page={page} />
+        <TabBar>
+          {pages.map(p => (
+            <Tab key={p.id} {...p} onClick={() => setPage(p)} selected={p.id === page.id} />
+          ))}
+        </TabBar>
+        <Backdrop open={showMenu || showNotifications} onClose={backdropClose} />
+        <Modal open={showNotifications} onClose={closeNotifications}>
+          <NotificationsContent />
+        </Modal>
+      </SafeAreaProvider>
    </App>
  );
 }