@granite-js/react-native 1.0.18 → 1.0.19

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "1.0.18",
+  "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.18",
+    "@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.18",
+    "@granite-js/native": "1.0.19",
     "@types/react": "*",
     "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@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",
+    "@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,43 +1,7 @@
 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 === '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;
-  }
-}
+import { Animated, Keyboard } from 'react-native';
+import { getInitialKeyboardHeight } from './getInitialKeyboardHeight';
+import { getKeyboardEventNames } from './getKeyboardEventNames';
 
 /**
  * @category Hooks

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}`;
 }