@granite-js/react-native 0.1.34 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.34",
+  "version": "1.0.0",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -91,46 +91,49 @@
     "@babel/core": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@granite-js/native": "0.1.34",
+    "@granite-js/native": "1.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
-    "@types/node": "^22.10.2",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "^18",
+    "@types/node": "24.10.12",
+    "@types/react": "19.2.0",
+    "@types/react-dom": "19.2.3",
     "@vitest/coverage-v8": "^4.0.12",
-    "esbuild": "0.25.8",
+    "brick-module": "0.5.0",
+    "esbuild": "0.25.9",
     "eslint": "^9.7.0",
     "jsdom": "^25.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.72.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.84.0-rc.5",
     "tsup": "^8.5.0",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "vitest": "^4.0.12",
     "zod": "^4.1.12"
   },
   "peerDependencies": {
-    "@granite-js/native": "*",
+    "@granite-js/native": "1.0.0",
     "@types/react": "*",
+    "brick-module": "*",
     "react": "*",
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.34",
-    "@granite-js/image": "0.1.34",
-    "@granite-js/jest": "0.1.34",
-    "@granite-js/lottie": "0.1.34",
-    "@granite-js/mpack": "0.1.34",
-    "@granite-js/plugin-core": "0.1.34",
-    "@granite-js/style-utils": "0.1.34",
+    "@granite-js/blur-view": "1.0.0",
+    "@granite-js/cli": "1.0.0",
+    "@granite-js/jest": "1.0.0",
+    "@granite-js/mpack": "1.0.0",
+    "@granite-js/plugin-core": "1.0.0",
+    "@granite-js/style-utils": "1.0.0",
+    "@granite-js/video": "1.0.0",
     "@standard-schema/spec": "^1.0.0",
     "es-toolkit": "^1.39.8",
     "react-native-url-polyfill": "3.0.0"
   },
   "sideEffects": [
     "dist/async-bridges.*",
-    "dist/constant-bridges.*"
+    "dist/constant-bridges.*",
+    "src/types/global.ts"
   ]
 }

package/src/app/Granite.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, PropsWithChildren } from 'react';
+import { ComponentType, type JSX, PropsWithChildren } from 'react';
 import { AppRegistry } from 'react-native';
 import { ENTRY_BUNDLE_NAME } from '../constants';
 import type { InitialProps } from '../initial-props';
@@ -95,7 +95,7 @@ const createApp = () => {
     registerHostApp(
       AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
       { appName }: Pick<GraniteProps, 'appName'>
-    ): (initialProps: InitialProps) => JSX.Element {
+    ): (initialProps: InitialProps) => React.JSX.Element {
       if (appName !== ENTRY_BUNDLE_NAME) {
         throw new Error(`Host appName must be 'shared'`);
       }

package/src/image/Image.tsx

@@ -0,0 +1,125 @@
+import GraniteImage, {
+  GraniteImageProps,
+  OnErrorEvent,
+  OnLoadEndEvent,
+  OnLoadStartEvent,
+  type GraniteImageSource,
+} from '@granite-js/native/react-native-fast-image';
+import { NativeSyntheticEvent, StyleSheet } from 'react-native';
+import { SvgImage } from './SvgImage';
+
+type Source = {
+  uri?: string;
+  headers?: Record<string, string>;
+  priority?: 'low' | 'normal' | 'high';
+  cache?: 'immutable' | 'web' | 'cacheOnly';
+};
+
+export interface ImageProps extends Omit<GraniteImageProps, 'source' | 'onError'> {
+  source?: Source;
+
+  onLoadStart?: (event: NativeSyntheticEvent<OnLoadStartEvent> | Readonly<{ type: 'svg' }>) => void;
+  onLoadEnd?: (event: NativeSyntheticEvent<OnLoadEndEvent> | Readonly<{ type: 'svg' }>) => void;
+  onError?: (event: NativeSyntheticEvent<OnErrorEvent> | Readonly<{ type: 'svg' }>) => void;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name Image
+ * @description You can use the `Image` component to load and render bitmap images (such as PNG, JPG) or vector images (SVG). It automatically renders with the appropriate method depending on the image format.
+ *
+ * @param {object} [props] - The `props` object passed to the component.
+ * @param {object} [props.style] - An object that defines the style for the image component. It can include layout-related properties like `width` and `height`.
+ * @param {object} [props.source] - An object containing information about the image resource to load.
+ * @param {string} [props.source.uri] - The URI address representing the image resource to load.
+ * @param {'immutable' | 'web' | 'cacheOnly'} [props.source.cache = 'immutable'] - An option to set the image caching strategy. This applies only to bitmap images. The default value is `immutable`.
+ * @param {() => void} [props.onLoadStart] - A callback function that is called when image loading starts.
+ * @param {() => void} [props.onLoadEnd] - A callback function that is called when image loading finishes.
+ * @param {() => void} [props.onError] - A callback function that is called when an error occurs during image loading.
+ *
+ * @example
+ * ### Example: Loading and rendering an image
+ *
+ * The following example shows how to load bitmap and vector image resources, and how to print an error message to `console.log` if an error occurs.
+ *
+ * ```tsx
+ * import { Image } from '@granite-js/react-native';
+ * import { View } from 'react-native';
+ *
+ * export function ImageExample() {
+ *   return (
+ *     <View>
+ *       <Image
+ *         source={{ uri: 'my-image-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *
+ *       <Image
+ *         source={{ uri: 'my-svg-link' }}
+ *         style={{
+ *           width: 300,
+ *           height: 300,
+ *           borderWidth: 1,
+ *         }}
+ *         onError={() => {
+ *           console.log('Failed to load image');
+ *         }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+function Image(props: ImageProps) {
+  if (typeof props.source === 'object' && props.source.uri?.endsWith('.svg')) {
+    const style = StyleSheet.flatten(props.style);
+    const width = style?.width;
+    const height = style?.height;
+
+    return (
+      <SvgImage
+        testID={props.testID}
+        url={props.source.uri!}
+        width={width}
+        height={height}
+        style={props.style}
+        onLoadStart={props.onLoadStart ? (e) => props.onLoadStart?.({ type: 'svg', ...e }) : undefined}
+        onLoadEnd={props.onLoadEnd ? (e) => props.onLoadEnd?.({ type: 'svg', ...e }) : undefined}
+        onError={props.onError ? () => props.onError?.({ type: 'svg' }) : undefined}
+      />
+    );
+  }
+
+  const source: GraniteImageSource | string | undefined = props.source
+    ? props.source.uri
+      ? {
+          uri: props.source.uri,
+          headers: props.source.headers,
+          priority: props.source.priority,
+          cache: props.source.cache,
+        }
+      : undefined
+    : undefined;
+
+  if (!source) {
+    return null;
+  }
+
+  const handleError = props.onError
+    ? (event: NativeSyntheticEvent<OnErrorEvent>) => {
+        props.onError?.(event);
+      }
+    : undefined;
+
+  return <GraniteImage {...props} source={source} onError={handleError} />;
+}
+
+export { Image };

package/src/image/SvgImage.tsx

@@ -0,0 +1,124 @@
+import { SvgUri, SvgXml } from '@granite-js/native/react-native-svg';
+import { createElement, useEffect, useCallback, useState } from 'react';
+import { View, type ViewStyle, type StyleProp } from 'react-native';
+import type { DimensionValue, NumberValue } from './types';
+import { usePreservedCallback } from '../utils/usePreservedCallback';
+
+export interface SvgImageProps {
+  url: string;
+  width?: DimensionValue;
+  height?: DimensionValue;
+  style?: StyleProp<any>;
+  testID?: string;
+  onLoadStart?: (event: object) => void;
+  onLoadEnd?: (event: object) => void;
+  onError?: () => void;
+}
+
+/**
+ * @name SvgImage
+ * @category Components
+ * @description The `SvgImage` component loads and renders SVG images from a given external URL.
+ * @link https://github.com/software-mansion/react-native-svg/tree/v13.14.0/README.md
+ *
+ * @param {object} props - The `props` object passed to the component.
+ * @param {string} props.url - The URI address of the SVG image to load.
+ * @param {number | string} [props.width = '100%'] - Sets the horizontal size of the SVG image. Default value is '`100%`'.
+ * @param {number | string} [props.height = '100%'] - Sets the vertical size of the SVG image. Default value is '`100%`'.
+ * @param {object} props.style - Sets the style of the image component.
+ * @param {() => void} props.onLoadStart - A callback function called when the SVG image resource starts loading.
+ * @param {() => void} props.onLoadEnd - A callback function called after the SVG image resource is loaded.
+ * @param {() => void} props.onError - A callback function called when an error occurs during SVG image loading.
+ *
+ * @example
+ * ```tsx
+ * import { SvgImage } from './SvgImage';
+ * import { View } from 'react-native';
+ *
+ * function MyComponent() {
+ *   return (
+ *     <View>
+ *       <SvgImage
+ *         url="https://example.com/icon.svg"
+ *         width={100}
+ *         height={100}
+ *         onError={() => console.log('An error occurred while loading the SVG')}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function SvgImage({
+  url,
+  width = '100%',
+  height = '100%',
+  style,
+  testID,
+  onLoadStart: _onLoadStart,
+  onLoadEnd: _onLoadEnd,
+  onError: _onError,
+}: SvgImageProps) {
+  const svgStyle = { width, height } as { width: NumberValue; height: NumberValue };
+  const [data, setData] = useState<string | undefined>(undefined);
+  const [isError, setIsError] = useState(false);
+
+  const onLoadStart = usePreservedCallback(() => _onLoadStart?.({}));
+  const onLoadEnd = usePreservedCallback(() => _onLoadEnd?.({}));
+  const onError = usePreservedCallback(() => _onError?.());
+
+  // Component to occupy layout space when the image is not yet rendered
+  const Fallback = useCallback(
+    () => createElement(View, { style: { width, height } as ViewStyle }, null),
+    [width, height]
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+
+    /**
+     * First attempts to fetch the XML resource, and if that fails, tries to load directly by passing the URI to the Svg component
+     */
+    async function fetchSvg() {
+      onLoadStart();
+
+      try {
+        const response = await fetch(url);
+        const svg = await response.text();
+
+        if (isMounted) {
+          onLoadEnd();
+          setData(svg);
+        }
+      } catch {
+        setIsError(true);
+      }
+    }
+
+    fetchSvg();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [onLoadStart, onLoadEnd, url]);
+
+  if (data == null) {
+    return <Fallback />;
+  }
+
+  if (isError) {
+    return (
+      <SvgUri
+        testID={testID}
+        uri={url}
+        style={style}
+        {...svgStyle}
+        onError={onError}
+        onLoad={onLoadEnd}
+        fallback={<Fallback />}
+      />
+    );
+  }
+
+  return <SvgXml testID={testID} xml={data} style={style} {...svgStyle} fallback={<Fallback />} />;
+}

package/src/image/index.ts

@@ -0,0 +1 @@
+export { Image, type ImageProps } from './Image';

package/src/image/types.ts

@@ -0,0 +1,6 @@
+import type { Animated } from 'react-native';
+
+// FIXME: DimensionValue type is not available in React Native 0.68, so it's defined separately
+export type DimensionValue = string | number | 'auto' | `${number}%` | Animated.AnimatedNode | null;
+
+export type NumberValue = number | string;

package/src/index.ts

@@ -2,8 +2,19 @@ import './types/global';
 
 export { Granite, useInitialSearchParams, useInitialProps } from './app';
 export * from '@granite-js/style-utils';
-export * from '@granite-js/image';
-export * from '@granite-js/lottie';
+export {
+  type GraniteImageSource,
+  type GraniteImageStatic,
+  type ResizeMode,
+  type CachePolicy,
+  type Priority,
+  type OnLoadEvent,
+  type OnProgressEvent,
+} from '@granite-js/native/react-native-fast-image';
+
+// Image with SVG support
+export * from './image';
+export * from './lottie';
 
 export * from './dev-entrypoint';
 export * from './native-modules/natives';
@@ -18,7 +29,7 @@ export * from './router/hooks/useIsInitialScreen';
 export * from './event';
 export * from './video';
 export * from './status-bar';
-export * from './blur';
+export * from '@granite-js/blur-view';
 
 export { BackButton, useRouterBackHandler } from './router';
 

package/src/intersection-observer/IOFlatList.ts

@@ -1,4 +1,4 @@
-import { RefAttributes } from 'react';
+import React, { RefAttributes } from 'react';
 import { FlatList, FlatListProps } from 'react-native';
 import withIO, { IOComponentProps } from './withIO';
 
@@ -67,6 +67,6 @@ const IOFlatList = withIO(FlatList, [
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare function IOFlatListFunction<ItemT = any>(
   props: IOFlatListProps<ItemT> & RefAttributes<IOFlatListController>
-): JSX.Element;
+): React.JSX.Element;
 
 export default IOFlatList;

package/src/intersection-observer/withIO.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps, PureComponent, RefObject, createRef } from 'react';
-import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, findNodeHandle } from 'react-native';
+import { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, View } from 'react-native';
 import IOContext, { IOContextValue } from './IOContext';
 import IOManager from './IOManager';
 import { Root, RootMargin } from './IntersectionObserver';
@@ -40,6 +40,7 @@ function withIO<
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const self = this;
       this.scroller = createRef();
+      this.node = null;
       this.root = {
         get node() {
           return self.node;
@@ -82,7 +83,9 @@ function withIO<
     }
 
     componentDidMount() {
-      this.node = findNodeHandle(this.scroller.current);
+      // Prefer a native scroll ref (FlatList/VirtualizedList),
+      // otherwise fall back to the host ref (ScrollView).
+      this.node = this.resolveRootNode();
       methods.forEach((method) => {
         (this as any)[method] = (...args: any) => {
           this.scroller.current?.[method]?.(...args);
@@ -90,6 +93,72 @@ function withIO<
       });
     }
 
+    render() {
+      return (
+        <IOContext.Provider value={this.contextValue}>
+          <BaseComponent
+            scrollEventThrottle={16}
+            {...this.props}
+            ref={this.scroller}
+            onContentSizeChange={this.handleContentSizeChange}
+            onLayout={this.handleLayout}
+            onScroll={this.handleScroll}
+          />
+        </IOContext.Provider>
+      );
+    }
+
+    // Private helpers to keep type-safety encapsulated
+    private isRefObject<T>(v: unknown): v is RefObject<T> {
+      return typeof v === 'object' && v !== null && 'current' in (v as Record<string, unknown>);
+    }
+
+    private toView(v: RefObject<View> | View | null | undefined): View | null {
+      if (!v) {
+        return null;
+      }
+      return this.isRefObject<View>(v) ? (v.current ?? null) : v;
+    }
+
+    private callIfFunction<T extends object, K extends string>(obj: T | null | undefined, key: K): unknown {
+      if (!obj) {
+        return null;
+      }
+      const rec = obj as unknown as Record<string, unknown>;
+      const fn = rec[String(key)];
+      if (typeof fn === 'function') {
+        return fn.call(obj);
+      }
+      return null;
+    }
+
+    protected resolveRootNode = (): View | null => {
+      const instance = this.scroller.current as unknown;
+
+      // 1) Prefer native scroll ref (FlatList/VirtualizedList on Fabric)
+      const viaNativeRef = this.callIfFunction(instance as object, 'getNativeScrollRef');
+      const nativeFromNativeRef = this.toView(viaNativeRef as RefObject<View> | View | null | undefined);
+      if (nativeFromNativeRef) {
+        return nativeFromNativeRef;
+      }
+
+      // 2) Fallback to getScrollRef
+      const viaScrollRef = this.callIfFunction(instance as object, 'getScrollRef');
+      const nativeFromScrollRef = this.toView(viaScrollRef as RefObject<View> | View | null | undefined);
+      if (nativeFromScrollRef) {
+        return nativeFromScrollRef;
+      }
+
+      // 3) Fallback to getScrollableNode (exclude numeric handles)
+      const scrollable = this.callIfFunction(instance as object, 'getScrollableNode');
+      if (scrollable && typeof scrollable !== 'number') {
+        return scrollable as View;
+      }
+
+      // 4) Lastly, treat the instance itself as a View or RefObject<View>
+      return this.toView(instance as RefObject<View> | View | null | undefined);
+    };
+
     protected handleContentSizeChange = (width: number, height: number) => {
       const { contentSize } = this.root.current;
       if (width !== contentSize.width || height !== contentSize.height) {
@@ -128,21 +197,6 @@ function withIO<
         onScroll(event);
       }
     };
-
-    render() {
-      return (
-        <IOContext.Provider value={this.contextValue}>
-          <BaseComponent
-            scrollEventThrottle={16}
-            {...this.props}
-            ref={this.scroller}
-            onContentSizeChange={this.handleContentSizeChange}
-            onLayout={this.handleLayout}
-            onScroll={this.handleScroll}
-          />
-        </IOContext.Provider>
-      );
-    }
   };
 
   return IOScrollableComponent as typeof BaseComponent;

package/src/lottie/Lottie.tsx

@@ -0,0 +1,87 @@
+import LottieView, { type AnimationObject } from '@granite-js/native/lottie-react-native';
+import type { ComponentProps } from 'react';
+import { View } from 'react-native';
+import { ensureSafeLottie, hasFonts } from './ensureSafeLottie';
+import { useFetchResource } from './useFetchResource';
+
+type LottieViewProps = ComponentProps<typeof LottieView>;
+type BaseProps = Omit<LottieViewProps, 'source'> & {
+  /**
+   * Height is required to prevent layout shifting.
+   */
+  height: number | '100%';
+  width?: number | '100%';
+  maxWidth?: number;
+};
+
+export type RemoteLottieProps = BaseProps & {
+  src: string;
+};
+
+export type AnimationObjectLottieProps = BaseProps & {
+  animationObject: AnimationObject;
+};
+
+export function Lottie({
+  width,
+  maxWidth,
+  height,
+  src,
+  autoPlay = true,
+  speed = 1,
+  style,
+  onAnimationFailure,
+  ...props
+}: RemoteLottieProps) {
+  const handleAnimationFailure = onAnimationFailure
+    ? (error: string) => {
+        onAnimationFailure(error);
+      }
+    : undefined;
+
+  const jsonData = useFetchResource(src, handleAnimationFailure);
+
+  if (jsonData == null) {
+    return <View testID="lottie-placeholder" style={[{ opacity: 1, width, height }, style]} />;
+  }
+
+  if (hasFonts(jsonData) && __DEV__) {
+    throw new Error(
+      `The Lottie resource contains custom fonts which is unsafe. Please remove the custom fonts. source: ${src}`
+    );
+  }
+
+  return (
+    <LottieView
+      source={ensureSafeLottie(jsonData)}
+      autoPlay={autoPlay}
+      speed={speed}
+      style={[{ width, height, maxWidth }, style]}
+      onAnimationFailure={onAnimationFailure}
+      {...props}
+    />
+  );
+}
+
+Lottie.AnimationObject = function LottieWithAnimationObject({
+  width,
+  maxWidth,
+  height,
+  animationObject,
+  autoPlay = true,
+  speed = 1,
+  style,
+  onAnimationFailure,
+  ...props
+}: AnimationObjectLottieProps) {
+  return (
+    <LottieView
+      source={animationObject}
+      autoPlay={autoPlay}
+      speed={speed}
+      style={[{ width, height, maxWidth }, style]}
+      onAnimationFailure={onAnimationFailure}
+      {...props}
+    />
+  );
+};

package/src/lottie/ensureSafeLottie.ts

@@ -0,0 +1,15 @@
+import type { AnimationObject } from '@granite-js/native/lottie-react-native';
+
+type AnimationObjectWithFonts = AnimationObject & {
+  fonts?: { list?: unknown[] };
+};
+
+export function hasFonts(animationData: AnimationObject): boolean {
+  const data = animationData as AnimationObjectWithFonts;
+  return Array.isArray(data.fonts?.list) && data.fonts.list.length > 0;
+}
+
+export function ensureSafeLottie(animationData: AnimationObject): AnimationObject {
+  const { fonts, ...safeData } = animationData as AnimationObjectWithFonts;
+  return safeData as AnimationObject;
+}

package/src/lottie/index.ts

@@ -0,0 +1 @@
+export { Lottie, type RemoteLottieProps, type AnimationObjectLottieProps } from './Lottie';

package/src/lottie/useFetchResource.ts

@@ -0,0 +1,31 @@
+import type { AnimationObject } from '@granite-js/native/lottie-react-native';
+import { useState, useEffect } from 'react';
+
+export function useFetchResource(src: string, onAnimationFailure?: (error: string) => void): AnimationObject | null {
+  const [jsonData, setJsonData] = useState<AnimationObject | null>(null);
+
+  useEffect(() => {
+    let canceled = false;
+
+    fetch(src)
+      .then((res) => res.json())
+      .then((data) => {
+        if (!canceled) {
+          setJsonData(data);
+        }
+      })
+      .catch((error) => {
+        if (error instanceof Error) {
+          onAnimationFailure?.(error.message);
+        } else {
+          onAnimationFailure?.('Unknown error');
+        }
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [src, onAnimationFailure]);
+
+  return jsonData;
+}

package/src/native-modules/index.ts

@@ -1,3 +1,2 @@
 /** Bridges API */
 export * from './natives';
-export { GraniteCoreModule } from './core/GraniteCoreModule';

package/src/native-modules/natives/GraniteBrownfieldModule.brick.ts

@@ -0,0 +1,15 @@
+import { BrickModule, BrickModuleSpec } from 'brick-module';
+import { CodegenTypes } from 'react-native';
+
+interface GraniteBrownfieldModuleSpec extends BrickModuleSpec {
+  readonly moduleName: 'GraniteBrownfieldModule';
+  readonly onVisibilityChanged: CodegenTypes.EventEmitter<{ visible: boolean }>;
+
+  getConstants(): {
+    schemeUri: string;
+  };
+
+  closeView(): Promise<void>;
+}
+
+export const GraniteModule = BrickModule.get<GraniteBrownfieldModuleSpec>('GraniteBrownfieldModule');