@granite-js/react-native 1.0.17 → 1.0.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @granite-js/react-native
 
+## 1.0.18
+
+### Patch Changes
+
+- 96fe7c1: Use Android keyboard show/hide events in New Architecture for `useKeyboardAnimatedHeight`.
+  - @granite-js/blur-view@1.0.18
+  - @granite-js/cli@1.0.18
+  - @granite-js/jest@1.0.18
+  - @granite-js/mpack@1.0.18
+  - @granite-js/native@1.0.18
+  - @granite-js/plugin-core@1.0.18
+  - @granite-js/style-utils@1.0.18
+  - @granite-js/video@1.0.18
+
 ## 1.0.17
 
 ### Patch Changes

package/dist/keyboard/useKeyboardAnimatedHeight.d.ts

@@ -5,7 +5,7 @@ import { Animated } from 'react-native';
  * @description
  * A Hook that returns an animatable value (`Animated.Value`) representing the keyboard height changes when the keyboard appears or disappears. You can smoothly animate UI elements according to the keyboard height as it rises or falls.
  *
- * This Hook is primarily used on iOS. On Android, it does not detect keyboard height changes and always returns an `Animated.Value` with an initial value of `0`. In other words, animations are not applied in the Android environment.
+ * This Hook uses `keyboardWillShow`/`keyboardWillHide` on iOS, and `keyboardDidShow`/`keyboardDidHide` on Android when React Native New Architecture is enabled. On Android Old Architecture, it always returns an `Animated.Value` with an initial value of `0`.
  *
  * @returns {Animated.Value} - An animation value representing the keyboard height.
  * @example

package/dist/utils/isNewArchEnabled.d.ts

@@ -0,0 +1 @@
+export declare function isNewArchEnabled(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,7 +91,7 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "1.0.17",
+    "@granite-js/native": "1.0.18",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -113,20 +113,20 @@
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "@granite-js/native": "1.0.17",
+    "@granite-js/native": "1.0.18",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/blur-view": "1.0.17",
-    "@granite-js/cli": "1.0.17",
-    "@granite-js/jest": "1.0.17",
-    "@granite-js/mpack": "1.0.17",
-    "@granite-js/plugin-core": "1.0.17",
-    "@granite-js/style-utils": "1.0.17",
-    "@granite-js/video": "1.0.17",
+    "@granite-js/blur-view": "1.0.18",
+    "@granite-js/cli": "1.0.18",
+    "@granite-js/jest": "1.0.18",
+    "@granite-js/mpack": "1.0.18",
+    "@granite-js/plugin-core": "1.0.18",
+    "@granite-js/style-utils": "1.0.18",
+    "@granite-js/video": "1.0.18",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/keyboard/useKeyboardAnimatedHeight.tsx

@@ -1,8 +1,27 @@
 import { useEffect, useRef } from 'react';
 import { Animated, Keyboard, Platform } from 'react-native';
+import { isNewArchEnabled } from '../utils/isNewArchEnabled';
+
+function getKeyboardEventNames() {
+  if (Platform.OS === 'ios') {
+    return {
+      show: 'keyboardWillShow',
+      hide: 'keyboardWillHide',
+    } as const;
+  }
+
+  if (Platform.OS === 'android' && isNewArchEnabled()) {
+    return {
+      show: 'keyboardDidShow',
+      hide: 'keyboardDidHide',
+    } as const;
+  }
+
+  return null;
+}
 
 function getInitialKeyboardHeight() {
-  if (Platform.OS !== 'ios') {
+  if (Platform.OS === 'android' && !isNewArchEnabled()) {
     return 0;
   }
 
@@ -26,7 +45,7 @@ function getInitialKeyboardHeight() {
  * @description
  * A Hook that returns an animatable value (`Animated.Value`) representing the keyboard height changes when the keyboard appears or disappears. You can smoothly animate UI elements according to the keyboard height as it rises or falls.
  *
- * This Hook is primarily used on iOS. On Android, it does not detect keyboard height changes and always returns an `Animated.Value` with an initial value of `0`. In other words, animations are not applied in the Android environment.
+ * This Hook uses `keyboardWillShow`/`keyboardWillHide` on iOS, and `keyboardDidShow`/`keyboardDidHide` on Android when React Native New Architecture is enabled. On Android Old Architecture, it always returns an `Animated.Value` with an initial value of `0`.
  *
  * @returns {Animated.Value} - An animation value representing the keyboard height.
  * @example
@@ -42,31 +61,34 @@ export function useKeyboardAnimatedHeight(): Animated.Value {
   const keyboardHeight = useRef(new Animated.Value(getInitialKeyboardHeight())).current;
 
   useEffect(() => {
-    if (Platform.OS === 'ios') {
-      const willShowSubscription = Keyboard.addListener('keyboardWillShow', (event) => {
-        const height = event.endCoordinates.height;
+    const keyboardEventNames = getKeyboardEventNames();
 
-        Animated.spring(keyboardHeight, {
-          toValue: height,
-          useNativeDriver: true,
-          ...spring.quick,
-        }).start();
-      });
-
-      const willHideSubscription = Keyboard.addListener('keyboardWillHide', () => {
-        Animated.spring(keyboardHeight, {
-          toValue: 0,
-          useNativeDriver: true,
-          ...spring.quick,
-        }).start();
-      });
-      return () => {
-        willShowSubscription.remove();
-        willHideSubscription.remove();
-      };
-    } else {
+    if (keyboardEventNames == null) {
       return;
     }
+
+    const showSubscription = Keyboard.addListener(keyboardEventNames.show, (event) => {
+      const height = event.endCoordinates.height;
+
+      Animated.spring(keyboardHeight, {
+        toValue: height,
+        useNativeDriver: true,
+        ...spring.quick,
+      }).start();
+    });
+
+    const hideSubscription = Keyboard.addListener(keyboardEventNames.hide, () => {
+      Animated.spring(keyboardHeight, {
+        toValue: 0,
+        useNativeDriver: true,
+        ...spring.quick,
+      }).start();
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
   }, [keyboardHeight]);
 
   return keyboardHeight;

package/src/utils/isNewArchEnabled.ts

@@ -0,0 +1,13 @@
+export function isNewArchEnabled() {
+  const globalObject = globalThis as typeof globalThis & {
+    RN$Bridgeless?: boolean;
+    nativeFabricUIManager?: unknown;
+    __turboModuleProxy?: unknown;
+  };
+
+  return (
+    globalObject.RN$Bridgeless === true ||
+    globalObject.nativeFabricUIManager != null ||
+    globalObject.__turboModuleProxy != null
+  );
+}