@react-native-ohos/react-native-keyboard-controller 1.16.8 → 1.17.0

package/lib/typescript/specs/NativeKeyboardController.d.ts

@@ -1,10 +1,14 @@
 import type { TurboModule } from "react-native";
 export interface Spec extends TurboModule {
-    readonly getConstants: () => {};
+    readonly getConstants: () => {
+        keyboardBorderRadius: number;
+    };
     setInputMode(mode: number): void;
     setDefaultMode(): void;
-    dismiss(keepFocus: boolean): void;
+    preload(): void;
+    dismiss(keepFocus: boolean, animated: boolean): void;
     setFocusTo(direction: string): void;
+    viewPositionInWindow(viewTag: number): Promise<object>;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
 }

package/lib/typescript/types.d.ts

@@ -1,5 +1,48 @@
 import type { PropsWithChildren } from "react";
 import type { EmitterSubscription, NativeSyntheticEvent, TextInputProps, ViewProps } from "react-native";
+export type KeyboardProviderProps = {
+    children: React.ReactNode;
+    /**
+     * Set the value to `true`, if you use translucent status bar on Android.
+     * If you already control status bar translucency via `react-native-screens`
+     * or `StatusBar` component from `react-native`, you can ignore it.
+     * Defaults to `false`.
+     *
+     * @platform android
+     * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
+     */
+    statusBarTranslucent?: boolean;
+    /**
+     * Set the value to `true`, if you use translucent navigation bar on Android.
+     * Defaults to `false`.
+     *
+     * @platform android
+     * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
+     */
+    navigationBarTranslucent?: boolean;
+    /**
+     * A boolean property indicating whether to keep edge-to-edge mode always enabled (even when you disable the module).
+     * Defaults to `false`.
+     *
+     * @platform android
+     * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592
+     */
+    preserveEdgeToEdge?: boolean;
+    /**
+     * A boolean prop indicating whether the module is enabled. It indicate only initial state
+     * (if you try to change this prop after component mount it will not have any effect).
+     * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
+     * Defaults to `true`.
+     */
+    enabled?: boolean;
+    /**
+     * A boolean prop indicating whether to preload the keyboard to reduce time-to-interaction (TTI) on first input focus.
+     * Defaults to `true`.
+     *
+     * @platform ios
+     */
+    preload?: boolean;
+};
 export type NativeEvent = {
     progress: number;
     height: number;
@@ -81,25 +124,54 @@ export type KeyboardGestureAreaProps = {
 export type OverKeyboardViewProps = PropsWithChildren<{
     visible: boolean;
 }>;
+export type ClippingScrollViewProps = PropsWithChildren<ViewProps & {
+    /** An additional space that gets applied to the bottom of the ScrollView content. Default is 0. */
+    contentInsetBottom?: number;
+    /** An additional space that gets applied to the top of the ScrollView content. Default is 0. */
+    contentInsetTop?: number;
+    applyWorkaroundForContentInsetHitTestBug?: boolean;
+}>;
+export type KeyboardBackgroundViewProps = PropsWithChildren<ViewProps>;
+export type KeyboardToolbarGroupViewProps = PropsWithChildren<ViewProps>;
+export type KeyboardExtenderProps = PropsWithChildren<{
+    /** Controls whether this `KeyboardExtender` instance should take effect. Default is `true`. */
+    enabled?: boolean;
+}>;
 export type Direction = "next" | "prev" | "current";
 export type DismissOptions = {
     keepFocus: boolean;
+    animated: boolean;
 };
 export type KeyboardControllerModule = {
     setDefaultMode: () => void;
     setInputMode: (mode: number) => void;
-    dismiss: (options?: DismissOptions) => Promise<void>;
+    preload: () => void;
+    dismiss: (options?: Partial<DismissOptions>) => Promise<void>;
     setFocusTo: (direction: Direction) => void;
     isVisible: () => boolean;
-    state: () => KeyboardEventData | null;
+    state: () => KeyboardEventData;
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
+    getConstants: () => {
+        keyboardBorderRadius: number;
+    };
+};
+export type ViewPositionInWindowResult = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
 };
 export type KeyboardControllerNativeModule = {
     setDefaultMode: () => void;
     setInputMode: (mode: number) => void;
-    dismiss: (keepFocus: boolean) => void;
+    preload: () => void;
+    dismiss: (keepFocus: boolean, animated: boolean) => void;
     setFocusTo: (direction: Direction) => void;
+    viewPositionInWindow: (viewTag: number) => Promise<ViewPositionInWindowResult>;
+    getConstants: () => {
+        keyboardBorderRadius: number;
+    };
     addListener: (eventName: string) => void;
     removeListeners: (count: number) => void;
 };
@@ -111,12 +183,15 @@ export type KeyboardEventData = {
     timestamp: number;
     target: number;
     type: NonNullable<TextInputProps["keyboardType"]>;
-    appearance: NonNullable<TextInputProps["keyboardAppearance"]>;
+    appearance: "dark" | "light";
 };
+export type IKeyboardState = {
+    isVisible: boolean;
+} & KeyboardEventData;
 export type KeyboardEventsModule = {
     addListener: (name: KeyboardControllerEvents, cb: (e: KeyboardEventData) => void) => EmitterSubscription;
 };
-export type FocusedInputAvailableEvents = "focusDidSet";
+export type FocusedInputAvailableEvents = "focusDidSet" | "layoutDidSynchronize";
 export type FocusedInputEventData = {
     current: number;
     count: number;

package/lib/typescript/utils/findNodeHandle/index.d.ts

@@ -0,0 +1,4 @@
+import type { findNodeHandle as findNodeHandleRN } from "react-native";
+type FindNodeHandleRN = typeof findNodeHandleRN;
+export declare const findNodeHandle: FindNodeHandleRN;
+export {};

package/lib/typescript/utils/findNodeHandle/index.native.d.ts

@@ -0,0 +1,2 @@
+import { findNodeHandle } from "react-native";
+export { findNodeHandle };

package/lib/typescript/views/KeyboardExtender/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type { KeyboardExtenderProps } from "../../types";
+import type { PropsWithChildren } from "react";
+declare const KeyboardExtender: ({ children, enabled, }: PropsWithChildren<KeyboardExtenderProps>) => React.JSX.Element;
+export default KeyboardExtender;

package/lib/typescript/views/index.d.ts

@@ -1 +1,2 @@
 export { default as OverKeyboardView } from "./OverKeyboardView";
+export { default as KeyboardExtender } from "./KeyboardExtender";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/react-native-keyboard-controller",
-  "version": "1.16.8",
+  "version": "1.17.0",
   "description": "Keyboard manager which works in identical way on iOS and Android and harmony",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -17,7 +17,6 @@
     "react-native-keyboard-controller.podspec",
     "jest",
     "!lib/typescript/example",
-    "!harmony/keyboard_controller/build",
     "!android/build",
     "!android/.gradle",
     "!android/gradle",
@@ -27,7 +26,8 @@
     "!ios/KeyboardControllerNative",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "!build"
   ],
   "scripts": {
     "format": "prettier '**/*' --ignore-unknown --write",
@@ -72,14 +72,14 @@
   "bugs": {
     "url": "https://gitcode.com/CPF-RN/rntpc_react-native-keyboard-controller/issues"
   },
-  "homepage": "https://gitcode.com/CPF-RN/rntpc_react-native-keyboard-controller/tree/br_rnoh0.77#readme",
+  "homepage": "https://gitcode.com/CPF-RN/rntpc_react-native-keyboard-controller/tree/br_rnoh0.82#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
     "@commitlint/config-conventional": "^11.0.0",
-    "@react-native/babel-preset": "0.77.0",
-    "@react-native/eslint-config": "0.77.0",
+    "@react-native/babel-preset": "0.82.0",
+    "@react-native/eslint-config": "0.82.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.13",
@@ -103,7 +103,7 @@
     "pod-install": "^0.1.0",
     "prettier": "^2.8.8",
     "react": "18.3.1",
-    "react-native": "0.77.1",
+    "react-native": "0.82.1",
     "react-native-builder-bob": "^0.18.0",
     "react-native-reanimated": "3.18.0",
     "react-test-renderer": "18.2.0",
@@ -114,7 +114,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-reanimated": ">=3.0.0",
-    "react-native-keyboard-controller": "1.16.5"
+    "react-native-keyboard-controller": "1.21.8"
   },
   "jest": {
     "preset": "react-native",
@@ -172,6 +172,12 @@
     }
   },
   "harmony": {
-    "alias": "react-native-keyboard-controller"
+    "alias": "react-native-keyboard-controller",
+    "autolinking": {
+      "etsPackageClassName": "RNKeyboardControllerPackage",
+      "cppPackageClassName": "RNKeyboardControllerPackage",
+      "cmakeLibraryTargetName": "rnoh_keyboard_controller",
+      "ohPackageName": "@react-native-ohos/react-native-keyboard-controller"
+    }
   }
 }

package/src/animated.tsx

@@ -1,11 +1,21 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { Animated, Platform, StyleSheet } from "react-native";
 import Reanimated, { useSharedValue } from "react-native-reanimated";
 
-import { KeyboardControllerView } from "./bindings";
+import {
+  FocusedInputEvents,
+  KeyboardControllerView,
+  KeyboardControllerViewCommands,
+} from "./bindings";
 import { KeyboardContext } from "./context";
 import { useAnimatedValue, useSharedHandlers } from "./internal";
-import { applyMonkeyPatch, revertMonkeyPatch } from "./monkey-patch";
+import { KeyboardController } from "./module";
 import {
   useAnimatedKeyboardHandler,
   useFocusedInputLayoutHandler,
@@ -19,6 +29,7 @@ import type {
   FocusedInputLayoutChangedEvent,
   KeyboardControllerProps,
   KeyboardHandler,
+  KeyboardProviderProps,
   NativeEvent,
 } from "./types";
 import type { ViewStyle } from "react-native";
@@ -27,7 +38,10 @@ const KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(
   Animated.createAnimatedComponent(
     KeyboardControllerView,
   ) as React.FC<KeyboardControllerProps>,
-);
+) as React.ComponentType<
+  KeyboardControllerProps &
+    React.RefAttributes<React.Component<KeyboardControllerProps>>
+>;
 
 type Styles = {
   container: ViewStyle;
@@ -44,43 +58,6 @@ const styles = StyleSheet.create<Styles>({
   },
 });
 
-type KeyboardProviderProps = {
-  children: React.ReactNode;
-  /**
-   * Set the value to `true`, if you use translucent status bar on Android.
-   * If you already control status bar translucency via `react-native-screens`
-   * or `StatusBar` component from `react-native`, you can ignore it.
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14
-   * @platform android
-   */
-  statusBarTranslucent?: boolean;
-  /**
-   * Set the value to `true`, if you use translucent navigation bar on Android.
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/119
-   * @platform android
-   */
-  navigationBarTranslucent?: boolean;
-  /**
-   * A boolean property indicating whether to keep edge-to-edge mode always enabled (even when you disable the module).
-   * Defaults to `false`.
-   *
-   * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/592
-   * @platform android
-   */
-  preserveEdgeToEdge?: boolean;
-  /**
-   * A boolean prop indicating whether the module is enabled. It indicate only initial state,
-   * i. e. if you try to change this prop after component mount it will not have any effect.
-   * To change the property in runtime use `useKeyboardController` hook and `setEnabled` method.
-   * Defaults to `true`.
-   */
-  enabled?: boolean;
-};
-
 // capture `Platform.OS` in separate variable to avoid deep workletization of entire RN package
 // see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/393 and https://github.com/kirillzyusko/react-native-keyboard-controller/issues/294 for more details
 const OS = Platform.OS;
@@ -91,7 +68,9 @@ export const KeyboardProvider = ({
   navigationBarTranslucent,
   preserveEdgeToEdge,
   enabled: initiallyEnabled = true,
+  preload = true,
 }: KeyboardProviderProps) => {
+  const viewRef = useRef<React.Component<KeyboardControllerProps>>(null);
   // state
   const [enabled, setEnabled] = useState(initiallyEnabled);
   // animated values
@@ -105,6 +84,21 @@ export const KeyboardProvider = ({
     useSharedHandlers<KeyboardHandler>();
   const [setInputHandlers, broadcastInputEvents] =
     useSharedHandlers<FocusedInputHandler>();
+  const update = useCallback(async () => {
+    KeyboardControllerViewCommands.synchronizeFocusedInputLayout(
+      viewRef.current,
+    );
+
+    await new Promise((resolve) => {
+      const subscription = FocusedInputEvents.addListener(
+        "layoutDidSynchronize",
+        () => {
+          subscription.remove();
+          resolve(null);
+        },
+      );
+    });
+  }, []);
   // memo
   const context = useMemo<KeyboardAnimationContext>(
     () => ({
@@ -112,11 +106,12 @@ export const KeyboardProvider = ({
       animated: { progress: progress, height: Animated.multiply(height,-1)  },
       reanimated: { progress: progressSV, height: heightSV },
       layout,
+      update,
       setKeyboardHandlers,
       setInputHandlers,
       setEnabled,
     }),
-    [enabled],
+    [enabled, update],
   );
   const style = useMemo(
     () => [
@@ -211,18 +206,16 @@ export const KeyboardProvider = ({
     },
     [],
   );
-  // effects
   useEffect(() => {
-    if (enabled) {
-      applyMonkeyPatch();
-    } else {
-      revertMonkeyPatch();
+    if (preload) {
+      KeyboardController.preload();
     }
-  }, [enabled]);
+  }, [preload]);
 
   return (
     <KeyboardContext.Provider value={context}>
       <KeyboardControllerViewAnimated
+        ref={viewRef}
         enabled={enabled}
         onKeyboardMoveReanimated={keyboardHandler}
         onKeyboardMoveStart={OS === "ios" ? onKeyboardMove : undefined}

package/src/architecture.ts

@@ -0,0 +1 @@
+export const IS_FABRIC = "nativeFabricUIManager" in global;

package/src/bindings.native.ts

@@ -1,14 +1,25 @@
-import { NativeEventEmitter, Platform } from "react-native";
+import React from "react";
+import {
+  NativeEventEmitter,
+  Platform,
+  useColorScheme,
+  View,
+} from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
+  KeyboardToolbarGroupViewProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
 } from "./types";
+import type { View as RNView } from "react-native";
 
 const LINKING_ERROR =
   `The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure: \n\n` +
@@ -16,6 +27,7 @@ const LINKING_ERROR =
   "- You rebuilt the app after installing the package\n" +
   "- You are not using Expo Go\n";
 
+const KeyboardControllerViewNativeComponentModule = require("./specs/KeyboardControllerViewNativeComponent");
 const RCTKeyboardController =
   require("./specs/NativeKeyboardController").default;
 
@@ -53,10 +65,33 @@ export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
     eventEmitter.addListener(KEYBOARD_CONTROLLER_NAMESPACE + name, cb),
 };
 export const KeyboardControllerView: React.FC<KeyboardControllerProps> =
-  require("./specs/KeyboardControllerViewNativeComponent").default;
+  KeyboardControllerViewNativeComponentModule.default;
+export const KeyboardControllerViewCommands =
+  KeyboardControllerViewNativeComponentModule.Commands;
 export const KeyboardGestureArea: React.FC<KeyboardGestureAreaProps> =
   (Platform.OS === "android" && Platform.Version >= 30) || Platform.OS === "ios"
     ? require("./specs/KeyboardGestureAreaNativeComponent").default
     : ({ children }: KeyboardGestureAreaProps) => children;
 export const RCTOverKeyboardView: React.FC<OverKeyboardViewProps> =
   require("./specs/OverKeyboardViewNativeComponent").default;
+export const ClippingScrollView: React.FC<ClippingScrollViewProps> =
+  Platform.OS === "android" || (Platform.OS as string) === "harmony"
+    ? require("./specs/ClippingScrollViewDecoratorViewNativeComponent").default
+    : ({ children }: ClippingScrollViewProps) => children;
+export const KeyboardBackgroundView = React.forwardRef<
+  RNView,
+  KeyboardBackgroundViewProps
+>(({ style, ...props }, ref) => {
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === "dark" ? "#2c2c2e" : "#eceff3";
+
+  return React.createElement(View, {
+    ref,
+    style: [{ backgroundColor }, style],
+    ...props,
+  });
+});
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;
+export const RCTKeyboardToolbarGroupView: React.FC<KeyboardToolbarGroupViewProps> =
+  require("./specs/KeyboardToolbarGroupViewNativeComponent").default;

package/src/bindings.ts

@@ -1,25 +1,37 @@
-import { View } from "react-native";
+import React from "react";
+import { useColorScheme, View } from "react-native";
 
 import type {
+  ClippingScrollViewProps,
   FocusedInputEventsModule,
+  KeyboardBackgroundViewProps,
   KeyboardControllerNativeModule,
   KeyboardControllerProps,
   KeyboardEventsModule,
+  KeyboardExtenderProps,
   KeyboardGestureAreaProps,
+  KeyboardToolbarGroupViewProps,
   OverKeyboardViewProps,
   WindowDimensionsEventsModule,
 } from "./types";
 import type { EmitterSubscription } from "react-native";
+import type { View as RNView } from "react-native";
 
 const NOOP = () => {};
 
 export const KeyboardControllerNative: KeyboardControllerNativeModule = {
   setDefaultMode: NOOP,
   setInputMode: NOOP,
+  preload: NOOP,
   dismiss: NOOP,
   setFocusTo: NOOP,
+  viewPositionInWindow: () =>
+    Promise.resolve({ x: 0, y: 0, width: 0, height: 0 }),
   addListener: NOOP,
   removeListeners: NOOP,
+  getConstants: () => ({
+    keyboardBorderRadius: 0,
+  }),
 };
 export const KeyboardEvents: KeyboardEventsModule = {
   addListener: () => ({ remove: NOOP } as EmitterSubscription),
@@ -36,7 +48,34 @@ export const WindowDimensionsEvents: WindowDimensionsEventsModule = {
 };
 export const KeyboardControllerView =
   View as unknown as React.FC<KeyboardControllerProps>;
+export const KeyboardControllerViewCommands = {
+  synchronizeFocusedInputLayout: (
+    _ref: React.Component<KeyboardControllerProps> | null,
+  ) => {},
+};
 export const KeyboardGestureArea =
   View as unknown as React.FC<KeyboardGestureAreaProps>;
 export const RCTOverKeyboardView =
   View as unknown as React.FC<OverKeyboardViewProps>;
+export const ClippingScrollView =
+  View as unknown as React.FC<ClippingScrollViewProps>;
+export const KeyboardBackgroundView = React.forwardRef<
+  RNView,
+  KeyboardBackgroundViewProps
+>(({ style, ...props }, ref) => {
+  const colorScheme = useColorScheme();
+  const backgroundColor = colorScheme === "dark" ? "#2c2c2e" : "#eceff3";
+
+  return React.createElement(View, {
+    ref,
+    style: [{ backgroundColor }, style],
+    ...props,
+  });
+});
+export const RCTKeyboardExtender =
+  View as unknown as React.FC<KeyboardExtenderProps>;
+/**
+ * A View that defines a group of `TextInput`s for toolbar navigation.
+ */
+export const RCTKeyboardToolbarGroupView =
+  View as unknown as React.FC<KeyboardToolbarGroupViewProps>;

package/src/compat.ts

@@ -0,0 +1,44 @@
+import { useSharedValue } from "react-native-reanimated";
+
+import { useKeyboardHandler } from "./hooks";
+
+export const KeyboardState = {
+  UNKNOWN: 0,
+  OPENING: 1,
+  OPEN: 2,
+  CLOSING: 3,
+  CLOSED: 4,
+};
+
+/** Compatibility layer for migrating from Reanimated's useAnimatedKeyboard. */
+export const useAnimatedKeyboard = () => {
+  const height = useSharedValue(0);
+  const state = useSharedValue(KeyboardState.UNKNOWN);
+
+  useKeyboardHandler(
+    {
+      onStart: (event) => {
+        "worklet";
+        state.value =
+          event.height > 0 ? KeyboardState.OPENING : KeyboardState.CLOSING;
+      },
+      onMove: (event) => {
+        "worklet";
+        height.value = event.height;
+      },
+      onInteractive: (event) => {
+        "worklet";
+        height.value = event.height;
+      },
+      onEnd: (event) => {
+        "worklet";
+        state.value =
+          event.height > 0 ? KeyboardState.OPEN : KeyboardState.CLOSED;
+        height.value = event.height;
+      },
+    },
+    [],
+  );
+
+  return { height, state };
+};

package/src/components/KeyboardAvoidingView/hooks.ts

@@ -2,21 +2,28 @@ import { useSharedValue } from "react-native-reanimated";
 
 import {useKeyboardHandler} from "../../hooks";
 import {useKeyboardContext} from "../../context";
-import { useState } from "react";
+import { useLayoutEffect } from "react";
 import { Platform } from "react-native";
 
 const OS = Platform.OS;
 
 export const useKeyboardAnimation = () => {
   const { reanimated } = useKeyboardContext();
-  // calculate it only once on mount, to avoid `SharedValue` reads during a render
-  const [initialHeight] = useState(() => -reanimated.height.value);
-  const [initialProgress] = useState(() => reanimated.progress.value);
-
-  const heightWhenOpened = useSharedValue(initialHeight);
-  const height = useSharedValue(initialHeight);
-  const progress = useSharedValue(initialProgress);
-  const isClosed = useSharedValue(initialProgress === 0);
+  const heightWhenOpened = useSharedValue(0);
+  const height = useSharedValue(0);
+  const progress = useSharedValue(0);
+  const isClosed = useSharedValue(true);
+
+  useLayoutEffect(() => {
+    const initialHeight = -reanimated.height.value;
+    const initialProgress = reanimated.progress.value;
+
+    // eslint-disable-next-line react-compiler/react-compiler
+    heightWhenOpened.value = initialHeight;
+    height.value = initialHeight;
+    progress.value = initialProgress;
+    isClosed.value = initialProgress === 0;
+  }, []);
 
   useKeyboardHandler(
     {
@@ -24,7 +31,6 @@ export const useKeyboardAnimation = () => {
         "worklet";
 
         if (e.height > 0) {
-          // eslint-disable-next-line react-compiler/react-compiler
           isClosed.value = false;
           heightWhenOpened.value = e.height;
         }
@@ -73,19 +79,20 @@ export const useKeyboardAnimation = () => {
 export const useTranslateAnimation = () => {
   const { reanimated } = useKeyboardContext();
 
-  // calculate it only once on mount, to avoid `SharedValue` reads during a render
-  const [initialProgress] = useState(() => reanimated.progress.value);
-
-  const padding = useSharedValue(initialProgress);
+  const padding = useSharedValue(0);
   const translate = useSharedValue(0);
 
+  useLayoutEffect(() => {
+    // eslint-disable-next-line react-compiler/react-compiler
+    padding.value = reanimated.progress.value;
+  }, []);
+
   useKeyboardHandler(
     {
       onStart: (e) => {
         "worklet";
 
         if (e.height === 0) {
-          // eslint-disable-next-line react-compiler/react-compiler
           padding.value = 0;
         }
         if (OS === "ios") {
@@ -95,7 +102,7 @@ export const useTranslateAnimation = () => {
       onMove: (e) => {
         "worklet";
 
-        if (OS === "android") {
+        if (OS !== "ios") {
           translate.value = e.progress;
         }
       },
@@ -111,7 +118,7 @@ export const useTranslateAnimation = () => {
 
         padding.value = e.progress;
 
-        if (OS === "android") {
+        if (OS !== "ios") {
           translate.value = e.progress;
         }
       },