fix(tablet): fix issue with tablet and rotation

Author: EQuimper

example/app.json

@@ -3,7 +3,6 @@
     "name": "example",
     "slug": "example",
     "version": "1.0.0",
-    "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,

example/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "^4.6.3",
     "expo": "~52.0.38",
+    "expo-screen-orientation": "~8.0.4",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",

package.json

@@ -65,6 +65,7 @@
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "expo-screen-orientation": "^8.0.4",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.3.1",
@@ -79,6 +80,7 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
+    "expo-screen-orientation": "*",
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=2.0.0",

src/Provider.tsx

@@ -32,6 +32,7 @@ import { Platform } from 'react-native';
 
 import { useKeyboard } from './useKeyboard';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useOrientation } from './useOrientation';
 
 export type RefType = TextInput | View | Animated.View | null;
 
@@ -58,7 +59,7 @@ function Wrapper(props: PropsWithChildren<{}>) {
       style={styles.wrapper}
       ref={wrapperRef}
       onLayout={({ nativeEvent }) => {
-        if (nativeEvent.layout.height < windowDimensions.height) {
+        if (nativeEvent.layout.height !== windowDimensions.height) {
           setWrapperOffset(windowDimensions.height - nativeEvent.layout.height);
         }
       }}
@@ -94,6 +95,7 @@ const SmartScrollContext = React.createContext<{
   inputs: InputType;
   setInputs: React.Dispatch<React.SetStateAction<InputType>>;
   currentFocus?: null | Elements[0];
+  clearFocus: () => void;
 } | null>(null);
 
 const SmartScrollProvider = ({ children }: { children: React.ReactNode }) => {
@@ -113,6 +115,18 @@ const SmartScrollProvider = ({ children }: { children: React.ReactNode }) => {
     [elements]
   );
 
+  const clearFocus = useCallback(() => {
+    if (!currentFocus) return;
+
+    setElements((els) => ({
+      ...els,
+      [currentFocus.name]: {
+        ...currentFocus,
+        isFocus: false,
+      },
+    }));
+  }, [elements, currentFocus]);
+
   // we have a flick on first focus so we make the scrollview wait a bit before animate
   useLayoutEffect(() => {
     if (currentFocus && !isReady) {
@@ -136,6 +150,7 @@ const SmartScrollProvider = ({ children }: { children: React.ReactNode }) => {
         currentFocus,
         inputs,
         setInputs,
+        clearFocus,
       }}
     >
       {children}
@@ -204,6 +219,7 @@ export function useFormSmartScroll({
     wrapperOffset,
     inputs,
     setInputs,
+    clearFocus,
   } = useSmartScrollContext();
 
   const _keyboard = useKeyboard();
@@ -214,6 +230,17 @@ export function useFormSmartScroll({
 
   const translateY = useSharedValue(0);
 
+  const orientation = useOrientation();
+
+  const keyboardEnd = _keyboard.coordinates.end.screenY;
+
+  useEffect(() => {
+    translateY.value = 0;
+    scrollY.value = 0;
+    clearFocus();
+    Keyboard.dismiss();
+  }, [orientation]);
+
   useEffect(() => {
     const sub = Keyboard.addListener('keyboardWillHide', () => {
       translateY.value = withTiming(0);
@@ -230,14 +257,11 @@ export function useFormSmartScroll({
       if (!focus) return;
 
       if (isAndroid) {
-        if (
-          focus.position + wrapperOffset >
-          _keyboard.coordinates.end.screenY - focus.height * 2
-        ) {
+        if (focus.position + wrapperOffset > keyboardEnd - focus.height * 2) {
           if (wrapperOffset) {
             const diff =
               Math.abs(
-                _keyboard.coordinates.end.screenY -
+                keyboardEnd -
                   focus.position -
                   focus.height -
                   padding +
@@ -259,15 +283,16 @@ export function useFormSmartScroll({
 
       if (
         focus.position + wrapperOffset >
-        _keyboard.coordinates.end.screenY - focus.height + scrollY.value
+        keyboardEnd - focus.height + scrollY.value
       ) {
         const diff = Math.abs(
-          _keyboard.coordinates.end.screenY -
+          keyboardEnd -
             focus.position -
             focus.height -
             padding +
             scrollY.value -
-            wrapperOffset
+            wrapperOffset -
+            insets.bottom
         );
         translateY.value = withTiming(-diff);
 

src/useOrientation.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import * as ScreenOrientation from 'expo-screen-orientation';
+
+export function useOrientation(): ScreenOrientation.Orientation {
+  const [orientation, setOrientation] = useState<ScreenOrientation.Orientation>(
+    ScreenOrientation.Orientation.PORTRAIT_UP
+  );
+
+  const getInitialOrientation = async () => {
+    const initial = await ScreenOrientation.getOrientationAsync();
+
+    setOrientation(initial);
+  };
+
+  useEffect(() => {
+    getInitialOrientation();
+  }, []);
+
+  useEffect(() => {
+    const listener = ScreenOrientation.addOrientationChangeListener((event) => {
+      setOrientation(event.orientationInfo.orientation);
+    });
+
+    return () => {
+      ScreenOrientation.removeOrientationChangeListener(listener);
+    };
+  }, []);
+
+  return orientation;
+}

yarn.lock

@@ -49,6 +49,7 @@ __metadata:
     babel-loader: ^8.1.0
     babel-plugin-module-resolver: ^5.0.0
     expo: ~52.0.38
+    expo-screen-orientation: ~8.0.4
     expo-status-bar: ~2.0.1
     react: 18.3.1
     react-dom: 18.3.1
@@ -75,6 +76,7 @@ __metadata:
     eslint: ^8.51.0
     eslint-config-prettier: ^9.0.0
     eslint-plugin-prettier: ^5.0.1
+    expo-screen-orientation: ^8.0.4
     jest: ^29.7.0
     prettier: ^3.0.3
     react: 18.3.1
@@ -85,6 +87,7 @@ __metadata:
     release-it: ^17.0.0
     typescript: ^5.2.2
   peerDependencies:
+    expo-screen-orientation: "*"
     react: "*"
     react-native: "*"
     react-native-reanimated: ">=2.0.0"
@@ -8616,6 +8619,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"expo-screen-orientation@npm:^8.0.4":
+  version: 8.1.1
+  resolution: "expo-screen-orientation@npm:8.1.1"
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 7808336110a49e80e57ff24a03b59a381ad19a93b083edc075ef5d0791db628a8d51638bcb1d86d4e0d80ee7d298633b3619c515e96b56ca9bdf3c59947a310b
+  languageName: node
+  linkType: hard
+
+"expo-screen-orientation@npm:~8.0.4":
+  version: 8.0.4
+  resolution: "expo-screen-orientation@npm:8.0.4"
+  peerDependencies:
+    expo: "*"
+    react-native: "*"
+  checksum: 090d56a754427c2402cfdcaabd1653e3d54d70aee67a8e7b46f4953556d9f091785dd97a749e92a841747de9be8d9adb49146d3898b2eaf1c3c4e1b11d8ac4e3
+  languageName: node
+  linkType: hard
+
 "expo-status-bar@npm:~2.0.1":
   version: 2.0.1
   resolution: "expo-status-bar@npm:2.0.1"