From f148895679f79dba49d3ae2d836b4d2514c41b23 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@ionic.io>
Date: Fri, 25 Dec 2020 17:29:36 -0600
Subject: [PATCH 1/2] Fixing warnings

---
 components/ui/App.jsx   | 35 +++++++++++++++++++----------------
 components/ui/Menu.jsx  | 18 ++++++++++--------
 components/ui/Modal.jsx |  6 +++---
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/components/ui/App.jsx b/components/ui/App.jsx
index 49b455f..118c1b7 100644
--- a/components/ui/App.jsx
+++ b/components/ui/App.jsx
@@ -7,23 +7,26 @@ const { DarkMode } = Plugins;
 const App = ({ children, className, ...props }) => {
   const [darkMode, setDarkMode] = useState(false);
 
-  useEffect(async() => {
-    let darkmodeConfig = await DarkMode.isDarkModeOn();
-    setDarkMode(darkmodeConfig.isDarkModeOn);
-    DarkMode.addListener("darkModeStateChanged", (state) => {
-      setDarkMode(state.isDarkModeOn);
-    });
+  useEffect(async () => {
+    try {
+      let darkmodeConfig = await DarkMode.isDarkModeOn();
+      setDarkMode(darkmodeConfig.isDarkModeOn);
+      DarkMode.addListener('darkModeStateChanged', state => {
+        setDarkMode(state.isDarkModeOn);
+      });
+    } catch (e) {}
   }, []);
 
-  return (<div {...props} className={classNames(
-    'flex h-screen flex-col', 
-    className,
-    {
-      'dark': darkMode
-    }
-    )}>
-    {children}
-  </div>);
-}
+  return (
+    <div
+      {...props}
+      className={classNames('flex h-screen flex-col', className, {
+        dark: darkMode,
+      })}
+    >
+      {children}
+    </div>
+  );
+};
 
 export default App;
diff --git a/components/ui/Menu.jsx b/components/ui/Menu.jsx
index dea1af5..64a9251 100644
--- a/components/ui/Menu.jsx
+++ b/components/ui/Menu.jsx
@@ -1,6 +1,6 @@
 import { Plugins } from '@capacitor/core';
 import classNames from 'classnames';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useDrag } from 'react-use-gesture';
 
@@ -13,20 +13,22 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
   const [dragging, setDragging] = useState(false);
 
   useEffect(async () => {
-    let darkmodeConfig = await DarkMode.isDarkModeOn();
-    console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
-    Plugins.StatusBar.setStyle({
-      style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
-    }).catch(() => {});
+    try {
+      let darkmodeConfig = await DarkMode.isDarkModeOn();
+      console.log({ open, darkMode: darkmodeConfig.isDarkModeOn });
+      Plugins.StatusBar.setStyle({
+        style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
+      }).catch(() => {});
+    } catch (e) {}
   }, [open]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     setX(-rect.width);
   }, []);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       setX(0);
     } else if (rect) {
diff --git a/components/ui/Modal.jsx b/components/ui/Modal.jsx
index 2fa20ec..ebb2741 100644
--- a/components/ui/Modal.jsx
+++ b/components/ui/Modal.jsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
@@ -26,14 +26,14 @@ const Modal = ({ open, onClose, children }) => {
   }, [safeAreaTop, rect]);
 
   // Get the layout rectangle for the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     _close();
   }, [safeAreaTop]);
 
   // If open changes, open/close the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       _open();
     } else {

From ccd38ea74f31dcb78166824662cbf8ae838297d5 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 29 Dec 2020 11:25:27 -0600
Subject: [PATCH 2/2] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 982a457..f44403f 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Next.js + Tailwind CSS + Capacitor for mobile app development
 
+*Note: this repo is in active development and not quite ready for production use!*
+
 This repo is a starting point for building an iOS, Android, and Progressive Web App with Tailwind CSS, Next.js, and Capacitor. It comes with some pre-built components that can be customized using Tailwind classes, and provides the most important UI controls needed to build native mobile experiences (tabs, nav bars, modals, menus, etc).
 
 These components are baked into the starter and will be adopted into your project. This way you gain full control over the experience and can easily modify the look and feel of the components to match your design.