@granite-js/react-native 1.0.17 → 1.0.19

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @granite-js/react-native
 
+## 1.0.19
+
+### Patch Changes
+
+- adfe616: perf(react-native): without new URL optimize
+- b084323: feat: add useKeyboardHeight
+  - @granite-js/native@1.0.19
+  - @granite-js/blur-view@1.0.19
+  - @granite-js/jest@1.0.19
+  - @granite-js/style-utils@1.0.19
+  - @granite-js/cli@1.0.19
+  - @granite-js/mpack@1.0.19
+  - @granite-js/plugin-core@1.0.19
+  - @granite-js/video@1.0.19
+
+## 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/app/context/getSearchParamsFromUrl.d.ts

@@ -0,0 +1 @@
+export declare function getSearchParamsFromUrl(url: string): Record<string, string>;

package/dist/app/context/useInitialSearchParams.d.ts

@@ -18,6 +18,4 @@
  * }
  * ```
  */
-export declare function useInitialSearchParams(): {
-    [k: string]: string;
-};
+export declare function useInitialSearchParams(): Record<string, string>;

package/dist/keyboard/getInitialKeyboardHeight.d.ts

@@ -0,0 +1 @@
+export declare function getInitialKeyboardHeight(): number;

package/dist/keyboard/getKeyboardEventNames.d.ts

@@ -0,0 +1,7 @@
+export declare function getKeyboardEventNames(): {
+    readonly show: "keyboardWillShow";
+    readonly hide: "keyboardWillHide";
+} | {
+    readonly show: "keyboardDidShow";
+    readonly hide: "keyboardDidHide";
+} | null;

package/dist/keyboard/index.d.ts

@@ -1,2 +1,3 @@
 export { KeyboardAboveView } from './KeyboardAboveView';
 export { useKeyboardAnimatedHeight } from './useKeyboardAnimatedHeight';
+export { useKeyboardHeight } from './useKeyboardHeight';

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/keyboard/useKeyboardHeight.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @category Hooks
+ * @name useKeyboardHeight
+ * @description
+ * A Hook that returns the current keyboard height as a number when the keyboard appears or disappears. Unlike `useKeyboardAnimatedHeight`, this Hook does not animate the value — it simply reflects the latest keyboard height.
+ *
+ * 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 `0`.
+ *
+ * @returns {number} - The current keyboard height.
+ * @example
+ * ```typescript
+ * const keyboardHeight = useKeyboardHeight();
+ *
+ * <View style={{ marginBottom: keyboardHeight }}>
+ *  {children}
+ * </View>
+ * ```
+ */
+export declare function useKeyboardHeight(): number;

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.19",
   "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.19",
     "@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.19",
     "@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.19",
+    "@granite-js/cli": "1.0.19",
+    "@granite-js/jest": "1.0.19",
+    "@granite-js/mpack": "1.0.19",
+    "@granite-js/plugin-core": "1.0.19",
+    "@granite-js/style-utils": "1.0.19",
+    "@granite-js/video": "1.0.19",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"

package/src/app/context/getSearchParamsFromUrl.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { getSearchParamsFromUrl } from './getSearchParamsFromUrl';
+
+describe('getSearchParamsFromUrl', () => {
+  it('returns query parameters from a custom scheme URL', () => {
+    expect(getSearchParamsFromUrl('myapp://home?userId=42&theme=dark')).toEqual({
+      userId: '42',
+      theme: 'dark',
+    });
+  });
+
+  it('decodes query parameters the same way as URLSearchParams', () => {
+    expect(getSearchParamsFromUrl('myapp://home?name=foo+bar&message=hello%20world')).toEqual({
+      name: 'foo bar',
+      message: 'hello world',
+    });
+  });
+
+  it('ignores the hash fragment and keeps the last duplicated key', () => {
+    expect(getSearchParamsFromUrl('myapp://home?a=1&a=2#section')).toEqual({
+      a: '2',
+    });
+  });
+
+  it('returns an empty object for URLs without a query string', () => {
+    expect(getSearchParamsFromUrl('myapp://home')).toEqual({});
+  });
+
+  it('returns an empty object for invalid URLs', () => {
+    expect(getSearchParamsFromUrl('not a url')).toEqual({});
+  });
+});

package/src/app/context/getSearchParamsFromUrl.ts

@@ -0,0 +1,26 @@
+export function getSearchParamsFromUrl(url: string): Record<string, string> {
+  if (typeof URLSearchParams === 'undefined') {
+    return {};
+  }
+
+  const queryString = getQueryString(url);
+
+  if (queryString == null || queryString.length === 0) {
+    return {};
+  }
+
+  return Object.fromEntries(new URLSearchParams(queryString));
+}
+
+function getQueryString(url: string) {
+  const questionMarkIndex = url.indexOf('?');
+
+  if (questionMarkIndex === -1) {
+    return null;
+  }
+
+  const fragmentIndex = url.indexOf('#', questionMarkIndex + 1);
+  const queryEndIndex = fragmentIndex === -1 ? url.length : fragmentIndex;
+
+  return url.slice(questionMarkIndex + 1, queryEndIndex);
+}

package/src/app/context/useInitialSearchParams.ts

@@ -1,4 +1,6 @@
+import { useMemo } from 'react';
 import { useInitialProps } from './InitialPropsContext';
+import { getSearchParamsFromUrl } from './getSearchParamsFromUrl';
 import { getSchemeUri } from '../../native-modules';
 
 /**
@@ -24,9 +26,5 @@ import { getSchemeUri } from '../../native-modules';
 export function useInitialSearchParams() {
   const scheme = useInitialProps().scheme ?? getSchemeUri();
 
-  try {
-    return Object.fromEntries(new URL(scheme).searchParams);
-  } catch {
-    return {};
-  }
+  return useMemo(() => getSearchParamsFromUrl(scheme), [scheme]);
 }

package/src/keyboard/getInitialKeyboardHeight.ts

@@ -0,0 +1,21 @@
+import { Platform, Keyboard } from "react-native";
+import { isNewArchEnabled } from "../utils/isNewArchEnabled";
+
+export function getInitialKeyboardHeight() {
+    if (Platform.OS === 'android' && !isNewArchEnabled()) {
+      return 0;
+    }
+
+    /**
+     * Branch handling for React Native 0.68.0 version where `metrics()` does not exist
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (typeof Keyboard?.metrics === 'function') {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return Keyboard.metrics()?.height ?? 0;
+    } else {
+      return 0;
+    }
+}

package/src/keyboard/getKeyboardEventNames.ts

@@ -0,0 +1,20 @@
+import { Platform } from "react-native";
+import { isNewArchEnabled } from "../utils/isNewArchEnabled";
+
+export 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;
+  }

package/src/keyboard/index.ts

@@ -1,2 +1,3 @@
 export { KeyboardAboveView } from './KeyboardAboveView';
 export { useKeyboardAnimatedHeight } from './useKeyboardAnimatedHeight';
+export { useKeyboardHeight } from './useKeyboardHeight';

package/src/keyboard/useKeyboardAnimatedHeight.tsx

@@ -1,24 +1,7 @@
 import { useEffect, useRef } from 'react';
-import { Animated, Keyboard, Platform } from 'react-native';
-
-function getInitialKeyboardHeight() {
-  if (Platform.OS !== 'ios') {
-    return 0;
-  }
-
-  /**
-   * Branch handling for React Native 0.68.0 version where `metrics()` does not exist
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  if (typeof Keyboard?.metrics === 'function') {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    return Keyboard.metrics()?.height ?? 0;
-  } else {
-    return 0;
-  }
-}
+import { Animated, Keyboard } from 'react-native';
+import { getInitialKeyboardHeight } from './getInitialKeyboardHeight';
+import { getKeyboardEventNames } from './getKeyboardEventNames';
 
 /**
  * @category Hooks
@@ -26,7 +9,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 +25,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;
-
-        Animated.spring(keyboardHeight, {
-          toValue: height,
-          useNativeDriver: true,
-          ...spring.quick,
-        }).start();
-      });
+    const keyboardEventNames = getKeyboardEventNames();
 
-      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/keyboard/useKeyboardHeight.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { getInitialKeyboardHeight } from './getInitialKeyboardHeight';
+import { getKeyboardEventNames } from './getKeyboardEventNames';
+
+/**
+ * @category Hooks
+ * @name useKeyboardHeight
+ * @description
+ * A Hook that returns the current keyboard height as a number when the keyboard appears or disappears. Unlike `useKeyboardAnimatedHeight`, this Hook does not animate the value — it simply reflects the latest keyboard height.
+ *
+ * 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 `0`.
+ *
+ * @returns {number} - The current keyboard height.
+ * @example
+ * ```typescript
+ * const keyboardHeight = useKeyboardHeight();
+ *
+ * <View style={{ marginBottom: keyboardHeight }}>
+ *  {children}
+ * </View>
+ * ```
+ */
+export function useKeyboardHeight(): number {
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(getInitialKeyboardHeight);
+
+  useEffect(() => {
+    const keyboardEventNames = getKeyboardEventNames();
+
+    if (keyboardEventNames == null) {
+      return;
+    }
+
+    const showSubscription = Keyboard.addListener(keyboardEventNames.show, (event) => {
+      setKeyboardHeight(event.endCoordinates.height);
+    });
+
+    const hideSubscription = Keyboard.addListener(keyboardEventNames.hide, () => {
+      setKeyboardHeight(0);
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return keyboardHeight;
+}

package/src/utils/getSchemePrefix.ts

@@ -1,5 +1,3 @@
 export function getSchemePrefix({ scheme, appName, host }: { scheme: string; appName: string; host: string }) {
-  const base = host.length > 0 ? `${scheme}://${host}/` : `${scheme}://`;
-
-  return new URL(`${base}${appName}`).toString();
+  return host.length > 0 ? `${scheme}://${host}/${appName}` : `${scheme}://${appName}`;
 }

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
+  );
+}