diff --git a/components/Modal.jsx b/components/Modal.jsx
index 5eecdae..46b1f51 100644
--- a/components/Modal.jsx
+++ b/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);
diff --git a/components/SafeArea.jsx b/components/SafeArea.jsx
new file mode 100644
index 0000000..165b7e2
--- /dev/null
+++ b/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 (
+
+ {children}
+
+ );
+};
diff --git a/pages/_app.js b/pages/_app.js
index db67042..936bd4d 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -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 (
<>
diff --git a/pages/index.js b/pages/index.js
index 1d96770..f941b01 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -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 (
-
-
-
-
- {pages.map(p => (
- setPage(p)} selected={p.id === page.id} />
- ))}
-
-
-
-
-
+
+
+
+
+
+ {pages.map(p => (
+ setPage(p)} selected={p.id === page.id} />
+ ))}
+
+
+
+
+
+
);
}