fix: hydration issue

GeekyAnts · Dec 20, 2023 · dbd58cf · dbd58cf
1 parent 7f880ba
commit dbd58cf
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/layouts/index.tsx b/layouts/index.tsx
@@ -75,8 +75,12 @@ function Layout({
     } else {
       setActiveSidebarItem(path.join(...pathArray).split("#")[0]);
     }
-    // @ts-ignore
-    document.getElementById("scrollview-id").scrollTop = 0;
+    try {
+      // @ts-ignore
+      document.getElementById("scrollview-id").scrollTop = 0;
+    } catch (Error) {
+      //
+    }
   }, [content]);
 
   useEffect(() => {

diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "@babel/traverse": "^7.16.3",
     "@docsearch/react": "^3.0.0-alpha.42",
     "@expo/vector-icons": "^12.0.5",
-    "@gluestack-ui/themed-native-base": "^0.1.47",
+    "@gluestack-style/react": "^1.0.29",
+    "@gluestack-ui/themed-native-base": "^0.1.66",
     "@gluestack/ui-next-adapter": "^2.1.10",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^12.0.4",

diff --git a/src/new-components/Navbar.tsx b/src/new-components/Navbar.tsx
@@ -22,6 +22,7 @@ import {
   Modal,
   Heading,
 } from "native-base";
+
 import NativebaseLogo from "./NativebaseLogo";
 import { isLatestVersion, isLatestVersionSlug } from "../utils";
 import { useContext } from "react";
@@ -72,6 +73,13 @@ export default function Navbar(props: any) {
     router.push(path);
   };
   const [showModal, setShowModal] = React.useState(false);
+
+  const [isSSR, setIsSSR] = React.useState(true);
+
+  useEffect(() => {
+    setIsSSR(false);
+  }, []);
+
   return (
     <>
       <HStack
@@ -171,11 +179,13 @@ export default function Navbar(props: any) {
             Announcing NativeBase Startup+ bundle 🎉
           </NBLink> */}
         </HStack>
-        <DocSearch
-          appId="QT6M4WLEXP"
-          indexName="nativebase-v3"
-          apiKey="3030e522f40cbea2b0386cdca3d88503"
-        />
+        {!isSSR && (
+          <DocSearch
+            appId="QT6M4WLEXP"
+            indexName="nativebase-v3"
+            apiKey="3030e522f40cbea2b0386cdca3d88503"
+          />
+        )}
         <HStack space="6" alignItems="center">
           <AlgoliaSearchButton />
           <NBLink

diff --git a/yarn.lock b/yarn.lock
@@ -2491,10 +2491,10 @@
   resolved "https://registry.yarnpkg.com/@gluestack-style/legend-motion-animation-driver/-/legend-motion-animation-driver-1.0.2.tgz#051c26b0d501e03b12e4dbfe01b292eee5c29c8f"
   integrity sha512-rB5HIhVzpgPQ9C1JJvY30a1bP0sQRWWFgUHVaiefH8dA/XRAQpmAIMF48JDctrvoBi/tKp5xN10mLE5CtnDRHg==
 
-"@gluestack-style/react@^1.0.26":
-  version "1.0.26"
-  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.26.tgz#97437088060505a0c80c4d636cddcb94a31bd1ef"
-  integrity sha512-mw7R6edM1HGQewUxFGUzZOtUvv4worzdiAaNLv1IRFjoirFRcZ+SIumPWG3exEb+WBkHFwH7ZjpQWqY9oHsOcQ==
+"@gluestack-style/react@^1.0.29":
+  version "1.0.29"
+  resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.29.tgz#253f92dbb78d4a49ef9c53b8c9c02872ff11dd31"
+  integrity sha512-NoI5kcVQsrhYYDld410YhuP7DVuB+k99b5ycOcarM1T55ZhZrmgwPBfG83/lVWT1w0wHcumHn6+pUSNBYQyr9g==
   dependencies:
     inline-style-prefixer "^6.0.1"
     normalize-css-color "^1.0.2"
@@ -2782,10 +2782,10 @@
     "@gluestack-ui/utils" "^0.1.12"
     "@react-native-aria/focus" "^0.2.9"
 
-"@gluestack-ui/themed-native-base@^0.1.47":
-  version "0.1.47"
-  resolved "https://registry.yarnpkg.com/@gluestack-ui/themed-native-base/-/themed-native-base-0.1.47.tgz#baff409737404a8204361b416c9186a7d4e5edb5"
-  integrity sha512-lS5ZMjTjkj5wUFlj7Bkyn0Qf0iTr8NXJ+tx3kgoMmzOgxNlUfz9NeTvCpYp4kO+H4DP0sObzbHHcZm2hAmFN1w==
+"@gluestack-ui/themed-native-base@^0.1.66":
+  version "0.1.66"
+  resolved "https://registry.yarnpkg.com/@gluestack-ui/themed-native-base/-/themed-native-base-0.1.66.tgz#88ed6ccfa7dcbe9825e66080e5d381cb4f16ada3"
+  integrity sha512-/Tv8RithmJBWEuFrT36ezHEUPZivGvtWdub7vkk8xpJtZBuGiuux+4M7vvBQrfj5RZ+G1Nl/W+TMPD7Z9WDCfw==
   dependencies:
     "@babel/preset-env" "^7.22.9"
     "@babel/preset-react" "^7.22.5"
@@ -2794,7 +2794,7 @@
     "@gluestack-style/animation-plugin" "^0.1.12"
     "@gluestack-style/animation-resolver" "^1.0.2"
     "@gluestack-style/legend-motion-animation-driver" "^1.0.2"
-    "@gluestack-style/react" "^1.0.26"
+    "@gluestack-style/react" "^1.0.29"
     "@gluestack-ui/actionsheet" "^0.2.31"
     "@gluestack-ui/alert" "^0.1.12"
     "@gluestack-ui/alert-dialog" "^0.1.23"