From 36b3fb8de0fb74df6e7bd1f4b75b2b1f22f396a4 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 22 Dec 2020 13:15:15 -0600 Subject: [PATCH] Safe area provider --- components/Modal.jsx | 7 +++++-- components/SafeArea.jsx | 30 ++++++++++++++++++++++++++++++ pages/_app.js | 18 ------------------ pages/index.js | 31 +++++++++++++++++-------------- 4 files changed, 52 insertions(+), 34 deletions(-) create mode 100644 components/SafeArea.jsx 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 ( - - - -