Support ssr

Author: doong-jo

README.md

@@ -25,7 +25,10 @@ npm install @fe-eule/react-keyboard-avoiding-view
 ## Usage
 
 ```jsx
-// in react not react-native
+/**
+ * Use react not react-native
+ * Support server side rendering
+ */
 import React from "react";
 import KeyboardAvoidingView from "@fe-eule/react-keyboard-avoiding-view";
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-eule/react-keyboard-avoiding-view",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": false,
   "description": "This component is a component that automatically adjusts the view so that the fixed element is not covered by the keyboard when the keyboard appears on iOS devices.",
   "keywords": [

src/libs/keyboard-avoiding-view.tsx

@@ -15,6 +15,7 @@ import {
 import {
   checkIsIOS,
   computeKeyboardTopPosition,
+  getViewPortHeight,
   isKeyboardAvoidingInputElement,
   makeNegativeTranslateY,
 } from "./keyboard-avoiding-view.util";
@@ -48,7 +49,7 @@ export const KeyboardAvoidingView = forwardRef<
     const [isVirtualKeyboardShown, setVirtualKeyboardShown] =
       useState<boolean>(false);
     const [adjustedTranslateY, setAdjustedTranslateY] = useState<number>(0);
-    const initialInnerHeight = useRef<number>(window.innerHeight).current;
+    const initialInnerHeight = useRef<number>(0);
 
     /**
      * Why use debounce?
@@ -57,7 +58,7 @@ export const KeyboardAvoidingView = forwardRef<
     const handleChangeChildTranslateTriggerEvent = useDebouncedCallback(
       () => {
         const keyboardTopPosition = computeKeyboardTopPosition({
-          initialInnerHeight,
+          initialInnerHeight: initialInnerHeight.current,
         });
         if (keyboardTopPosition <= 0) {
           return;
@@ -138,6 +139,7 @@ export const KeyboardAvoidingView = forwardRef<
         return;
       }
 
+      initialInnerHeight.current = getViewPortHeight();
       setupListeners();
     });
 

src/libs/keyboard-avoiding-view.util.ts

@@ -29,3 +29,8 @@ export const makeNegativeTranslateY = (value: number) =>
   `translateY(-${value}px)`;
 
 export const checkIsIOS = () => /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+export const getViewPortHeight = () =>
+  typeof window === "undefined"
+    ? 0
+    : window.visualViewport?.height || window.innerHeight;