@granite-js/react-native 0.0.0-dev-20250725013859

package/dist/visibility/useVisibilityChange.d.ts

@@ -0,0 +1,51 @@
+/**
+ * String representing whether the screen is visible.
+ * @typedef {string} VisibilityState
+ * @property {'visible'} visible - The screen is visible.
+ * @property {'hidden'} hidden - The screen is not visible.
+ */
+export type VisibilityState = 'visible' | 'hidden';
+/**
+ * @callback VisibilityCallback
+ * @param {VisibilityState} state - String representing the visibility state of the screen.
+ */
+export type VisibilityCallback = (state: VisibilityState) => void;
+/**
+ * @public
+ * @category Screen Control
+ * @name useVisibilityChange
+ * @kind function
+ * @description
+ * Calls a callback function with the visibility state when the screen's visibility changes.
+ * The callback function receives the return value from [useVisibility](/en/reference/react-native/Screen%20Control/useVisibility). If the return value is `true`, it passes 'visible', and if `false`, it passes 'hidden'.
+ *
+ * @param {VisibilityCallback} callback - Calls a callback function that receives visibility changes when the screen's visibility changes.
+ * @example
+ *
+ * ### Example of logging when screen visibility changes
+ *
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Text, View } from 'react-native';
+ * import { useVisibilityChange, VisibilityState } from '@granite-js/react-native';
+ *
+ * export function UseVisibilityChangeExample() {
+ *   const [visibilityHistory, setVisibilityHistory] = useState<VisibilityState[]>([]);
+ *
+ *   useVisibilityChange((visibility) => {
+ *     setVisibilityHistory((prev) => [...prev, visibility]);
+ *   });
+ *
+ *   return (
+ *     <View>
+ *       <Text>Logs are created when leaving and returning to the home screen.</Text>
+ *
+ *       {visibilityHistory.map((visibility, index) => (
+ *         <Text key={index}>{JSON.stringify(visibility)}</Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export declare function useVisibilityChange(callback: VisibilityCallback): void;

package/dist/visibility/useVisibilityChanged.d.ts

@@ -0,0 +1,41 @@
+import { PropsWithChildren, ReactElement } from 'react';
+/**
+ * @name VisibilityChangedProvider
+ * @kind function
+ * @description
+ * A Provider that manages whether a React Native screen is visible.
+ * It subscribes to the app's `visibilityChanged` event to detect and manage screen visibility.
+ *
+ * @param {ReactNode | undefined} children - Child components that check screen visibility.
+ * @param {boolean} isVisible - A boolean value indicating whether the screen is visible.
+ * @returns {ReactElement} - A React Provider component wrapped with `VisibilityChangedContext.Provider`.
+ * @example
+ * ```typescript
+ * export function VisibilityProvider({ isVisible, children }: Props) {
+ *   return (
+ *     <VisibilityChangedProvider isVisible={isVisible}>
+ *       {children}
+ *     </VisibilityChangedProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function VisibilityChangedProvider({ children, isVisible, }: PropsWithChildren<{
+    isVisible: boolean;
+}>): ReactElement;
+/**
+ * @name useVisibilityChanged
+ * @category Hooks
+ * @kind function
+ * @description
+ * A Hook that returns whether a React Native screen is visible.
+ * @returns {boolean} - Returns whether the screen is visible.
+ * @throws {Error} Throws an error when not used within a `VisibilityChangedProvider`.
+ * @example
+ * ```typescript
+ * const isVisible = useVisibilityChanged();
+ * console.log(isVisible);
+ * // true or false
+ * ```
+ */
+export declare function useVisibilityChanged(): boolean;

package/dist/visibility/utils/usePrevious.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @name usePrevious
+ * @category Hooks
+ * @kind function
+ * @description
+ * A Hook that returns the previous value.
+ * @param {T} value - The value to return the previous value of.
+ * @returns {T} - Returns the previous value.
+ * @example
+ * ```typescript
+ *  const isVisible = useVisibility();
+ *  const prevValue = usePrevious<boolean>(isVisible) ?? false;
+ * ```
+ */
+export declare function usePrevious<T>(value: T): T;

package/jest.d.ts

@@ -0,0 +1 @@
+export * from './dist/jest';

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@granite-js/react-native",
+  "version": "0.0.0-dev-20250725013859",
+  "description": "The Granite Framework",
+  "bin": {
+    "granite": "./bin/cli.js"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest --no-watch --coverage",
+    "lint": "eslint .",
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "prepack": "yarn build"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./src/index.ts"
+    },
+    "./async-bridges": {
+      "types": "./src/async-bridges.ts",
+      "default": "./src/async-bridges.ts"
+    },
+    "./constant-bridges": {
+      "types": "./src/constant-bridges.ts",
+      "default": "./src/constant-bridges.ts"
+    },
+    "./jest": {
+      "types": "./dist/jest/index.d.ts",
+      "default": "./dist/jest/index.js"
+    },
+    "./cli": {
+      "types": "./cli.d.ts",
+      "default": "./cli.js"
+    },
+    "./config": {
+      "types": "./config.d.ts",
+      "default": "./config.js"
+    },
+    "./types": {
+      "types": "./dist/types/global.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "dist",
+    "bin",
+    "config.js",
+    "cli.js",
+    "*.d.ts"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-typescript": "^7.24.7",
+    "@granite-js/native": "workspace:*",
+    "@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",
+    "@vitest/coverage-v8": "^2.1.8",
+    "esbuild": "^0.25.4",
+    "eslint": "^9.7.0",
+    "jsdom": "^25.0.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.6",
+    "tsup": "^8.5.0",
+    "typescript": "5.8.3",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "@granite-js/native": "0.0.0-dev-20250725013859",
+    "@types/react": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "dependencies": {
+    "@granite-js/cli": "workspace:*",
+    "@granite-js/image": "workspace:*",
+    "@granite-js/jest": "workspace:*",
+    "@granite-js/lottie": "workspace:*",
+    "@granite-js/mpack": "workspace:*",
+    "@granite-js/style-utils": "workspace:*",
+    "es-toolkit": "^1.34.1",
+    "react-native-url-polyfill": "1.3.0"
+  }
+}

package/presets.d.ts

@@ -0,0 +1 @@
+export * from './dist/presets';

package/src/app/App/index.android.tsx

@@ -0,0 +1,6 @@
+import { VisibilityProvider } from '../../visibility';
+import { Props } from '.';
+
+export function App({ children }: Props) {
+  return <VisibilityProvider isVisible={true}>{children}</VisibilityProvider>;
+}

package/src/app/App/index.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+import { InitialProps } from '../../initial-props';
+
+export type Props = PropsWithChildren<InitialProps>;
+
+export declare function App(props: Props): JSX.Element;

package/src/app/App/index.ios.tsx

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { VisibilityProvider } from '../../visibility';
+import { Props } from '.';
+
+type IOSInitialProps = Props & {
+  isVisible: boolean;
+};
+
+export function App({ children, ...props }: IOSInitialProps) {
+  const { isVisible } = useMemo(() => props, [props]);
+
+  return <VisibilityProvider isVisible={isVisible}>{children}</VisibilityProvider>;
+}

package/src/app/AppRoot.tsx

@@ -0,0 +1,39 @@
+import { SafeAreaProvider } from '@granite-js/native/react-native-safe-area-context';
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { GraniteProps } from './Granite';
+import type { InitialProps } from '../initial-props';
+import { BackEventProvider, useBackEventState } from '../use-back-event';
+import { App } from './App';
+import { Router } from '../router';
+
+/**
+ * @internal
+ */
+interface AppRootProps extends GraniteProps {
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export function AppRoot({ appName, context, container: Container, initialProps, router }: AppRootProps) {
+  const backEventState = useBackEventState();
+  const scheme = global.__granite.app.scheme;
+  const baseScheme = `${scheme}://${appName}`;
+
+  return (
+    <App {...initialProps}>
+      <SafeAreaProvider>
+        <BackEventProvider backEvent={backEventState}>
+          <Router
+            context={context}
+            initialProps={initialProps}
+            container={Container}
+            canGoBack={!backEventState.hasBackEvent}
+            onBack={backEventState.onBack}
+            prefix={baseScheme}
+            {...router}
+          />
+        </BackEventProvider>
+      </SafeAreaProvider>
+    </App>
+  );
+}

package/src/app/Granite.tsx

@@ -0,0 +1,128 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import { AppRegistry } from 'react-native';
+import { ENTRY_BUNDLE_NAME } from '../constants';
+import type { InitialProps } from '../initial-props';
+import type { RouterProps, RequireContext } from '../router';
+import { AppRoot } from './AppRoot';
+import { HostAppRoot } from './HostAppRoot';
+
+export interface GraniteProps {
+  /**
+   * @description
+   * The name of the app.
+   */
+  appName: string;
+  /**
+   * @description
+   * The context of the app.
+   *
+   * @TODO Hide context
+   */
+  context: RequireContext;
+  /**
+   * @description
+   * Configuration object to be passed to the router.
+   */
+  router?: RouterProps;
+}
+
+const createApp = () => {
+  let _appName: string | null = null;
+
+  function registerComponent(appKey: string, component: React.ComponentType<any>): string {
+    if (AppRegistry.getAppKeys().includes(appKey)) {
+      throw new Error(`App with key '${appKey}' already registered`);
+    }
+
+    return AppRegistry.registerComponent(appKey, () => component);
+  }
+
+  return {
+    registerApp(
+      AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
+      { appName, context, router }: GraniteProps
+    ): (initialProps: InitialProps) => JSX.Element {
+      if (appName === ENTRY_BUNDLE_NAME) {
+        throw new Error(`Reserved app name 'shared' cannot be used`);
+      }
+
+      function Root(initialProps: InitialProps) {
+        return (
+          <AppRoot
+            container={AppContainer}
+            initialProps={initialProps}
+            appName={appName}
+            context={context}
+            router={router}
+          />
+        );
+      }
+
+      registerComponent(appName, Root);
+      _appName = appName;
+
+      return Root;
+    },
+
+    registerHostApp(
+      AppContainer: ComponentType<PropsWithChildren<InitialProps>>,
+      { appName }: Pick<GraniteProps, 'appName'>
+    ): (initialProps: InitialProps) => JSX.Element {
+      if (appName !== ENTRY_BUNDLE_NAME) {
+        throw new Error(`Host appName must be 'shared'`);
+      }
+
+      function Root(initialProps: InitialProps) {
+        return <HostAppRoot container={AppContainer} initialProps={initialProps} />;
+      }
+
+      registerComponent(appName, Root);
+      _appName = appName;
+
+      return Root;
+    },
+
+    get appName(): string {
+      if (_appName === null) {
+        throw new Error('Granite.appName can only be used after registerApp or registerHostApp has been called.');
+      }
+      return _appName;
+    },
+  };
+};
+
+/**
+ * @public
+ * @category Core
+ * @name Granite
+ * @description
+ *
+ * @property {RegisterService} registerApp - This function sets up the basic environment for your service and helps you start service development quickly without needing complex configuration. By just passing `appName`, you can immediately use various features such as file-based routing, query parameter handling, and back navigation control.
+ *
+ * The features provided by the `Granite.registerApp` function are as follows:
+ * - Routing: URLs are automatically mapped according to file paths. It works similarly to Next.js's file-based routing. For example, the `/my-service/pages/index.ts` file can be accessed at `scheme://my-service`, and the `/my-service/pages/home.ts` file can be accessed at `scheme://my-service/home`.
+ * - Query Parameters: You can easily use query parameters received through URL schemes. For example, you can receive a `referrer` parameter and log it.
+ * - Back Navigation Control: You can control back navigation events. For example, when a user presses back on a screen, you can show a dialog or close the screen.
+ * - Screen Visibility: You can determine whether a screen is visible or hidden from the user. For example, you can use this value to handle specific actions when a user leaves for the home screen.
+ *
+ * @example
+ *
+ * ### Example of creating with the `Granite` component
+ *
+ * ```tsx
+ * import { PropsWithChildren } from 'react';
+ * import { Granite, InitialProps } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * function AppContainer({ children }: PropsWithChildren<InitialProps>) {
+ *  return <>{children}</>;
+ * }
+ *
+ * export default Granite.registerApp(AppContainer, {
+ *  appName: 'my-app',
+ *  context,
+ * });
+ *
+ * ```
+ */
+export const Granite = createApp();

package/src/app/HostAppRoot.tsx

@@ -0,0 +1,19 @@
+import type { ComponentType, PropsWithChildren } from 'react';
+import type { InitialProps } from '../initial-props';
+import { App } from './App';
+
+/**
+ * @internal
+ */
+interface HostAppRootProps {
+  container: ComponentType<PropsWithChildren<InitialProps>>;
+  initialProps: InitialProps;
+}
+
+export function HostAppRoot({ container: Container, initialProps }: HostAppRootProps) {
+  return (
+    <App {...initialProps}>
+      <Container {...initialProps} />
+    </App>
+  );
+}

package/src/app/index.ts

@@ -0,0 +1,2 @@
+export { Granite } from './Granite';
+export type { GraniteProps } from './Granite';

package/src/async-bridges.ts

@@ -0,0 +1,2 @@
+export * from './native-modules/natives/closeView';
+export * from './native-modules/natives/openURL';

package/src/blur/BlurView.tsx

@@ -0,0 +1,103 @@
+import type { BlurViewProps as InternalBlurViewProps } from '@granite-js/native/@react-native-community/blur';
+import { View, ViewProps } from 'react-native';
+import { ReactNativeBlurModule } from './ReactNativeBlurModule';
+import { isBlurNativeModuleSupported } from './constants';
+
+export type BlurType = InternalBlurViewProps['blurType'];
+
+export interface BlurViewProps extends ViewProps {
+  blurType?: BlurType;
+  blurAmount?: number;
+  vibrancyEffect?: boolean;
+  reducedTransparencyFallbackColor?: string;
+}
+
+/**
+ * @public
+ * @category UI
+ * @name BlurView
+ * @description
+ * `BlurView` adds a blurred background effect, primarily on iOS. It creates a visual blur on the background view.
+ *
+ * This component is supported only on iOS. On Android, it simply renders a regular [`View`](https://reactnative.dev/docs/0.72/view) without any blur effect.
+ *
+ * You can control the blur intensity and optionally enable the [vibrancy effect](https://developer.apple.com/documentation/uikit/uivibrancyeffect?language=objc), which enhances the visual impact of content displayed over a blurred background.
+ *
+ * If blur is not supported or doesn't render properly, you can use the `reducedTransparencyFallbackColor` prop to set a fallback background color.
+ *
+ * Use the `isSupported` property to check whether the current device supports blur. Blur is available on iOS from version 5.126.0 and not supported on Android.
+ *
+ * @param {BlurViewProps} [props] The props you can pass to `BlurView`. It extends `react-native`'s `ViewProps`, so you can use layout and style properties. The props align with those of [`@react-native-community/blur`](https://github.com/Kureev/react-native-blur/tree/v4.3.2?tab=readme-ov-file#blurview).
+ * @param {BlurType} [props.blurType] Type of blur to apply, such as `light`, `dark`, or `extraDark`.
+ * @param {number} [props.blurAmount=10] Intensity of the blur effect. Higher values make the blur stronger. Accepts values from `0` to `100`. Default is `10`.
+ * @param {boolean} [props.vibrancyEffect=false] Enables the vibrancy effect. This effect enhances content displayed on top of the blur. Only supported on iOS. Default is `false`.
+ * @param {string} [props.reducedTransparencyFallbackColor] Fallback background color used when blur cannot be applied due to system settings or device limitations.
+ *
+ * @returns {JSX.Element} On iOS, returns a blurred `BlurView` or `VibrancyView` component. On Android, returns a regular `View` without blur.
+ *
+ * ::: warning Note
+ * `BlurView` is only supported on iOS. On Android, it renders a regular `View` without any blur effect.
+ * :::
+ *
+ * @example
+ *
+ * ### Blurring background behind a text
+ *
+ * ```tsx
+ * import { BlurView } from '@granite-js/react-native';
+ * import { View, Text, StyleSheet } from 'react-native';
+ *
+ * export function BlurViewExample() {
+ *   return (
+ *     <View style={styles.container}>
+ *       <Text style={styles.absolute}>Blurred Text</Text>
+ *       <BlurView style={styles.absolute} blurType="light" blurAmount={1} />
+ *       <Text>Non Blurred Text</Text>
+ *     </View>
+ *   );
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *   container: {
+ *     justifyContent: 'center',
+ *     alignItems: 'center',
+ *     width: '100%',
+ *     height: 300,
+ *   },
+ *   absolute: {
+ *     position: 'absolute',
+ *     top: 0,
+ *     left: 0,
+ *     bottom: 0,
+ *     right: 0,
+ *   },
+ * });
+ * ```
+ *
+ * @see [iOS Vibrancy Effect Documentation](https://developer.apple.com/documentation/uikit/uivibrancyeffect)
+ * @see [Zeddios Blog Explanation](https://zeddios.tistory.com/1140)
+ */
+export function BlurView({
+  blurType,
+  blurAmount = 10,
+  reducedTransparencyFallbackColor,
+  vibrancyEffect = false,
+  ...viewProps
+}: BlurViewProps) {
+  if (!isBlurNativeModuleSupported || ReactNativeBlurModule == null) {
+    return <View {...viewProps} />;
+  }
+
+  const Component = vibrancyEffect ? ReactNativeBlurModule.VibrancyView : ReactNativeBlurModule.BlurView;
+
+  return (
+    <Component
+      blurAmount={blurAmount}
+      blurType={blurType}
+      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+      {...viewProps}
+    />
+  );
+}
+
+BlurView.isSupported = isBlurNativeModuleSupported;

package/src/blur/ReactNativeBlurModule.ts

@@ -0,0 +1,19 @@
+import type { BlurView, VibrancyView } from '@granite-js/native/@react-native-community/blur';
+import { isBlurNativeModuleSupported } from './constants';
+
+const ReactNativeBlurModule = (() => {
+  if (!isBlurNativeModuleSupported) {
+    return undefined;
+  }
+
+  try {
+    return require('@granite-js/native/@react-native-community/blur') as {
+      BlurView: typeof BlurView;
+      VibrancyView: typeof VibrancyView;
+    };
+  } catch {
+    return undefined;
+  }
+})();
+
+export { ReactNativeBlurModule };

package/src/blur/constants.ts

@@ -0,0 +1,3 @@
+import { Platform } from 'react-native';
+
+export const isBlurNativeModuleSupported = Platform.OS === 'ios';

package/src/blur/index.ts

@@ -0,0 +1 @@
+export * from './BlurView';

package/src/constant-bridges.ts

@@ -0,0 +1 @@
+export * from './native-modules/natives/getSchemeUri';

package/src/constants.ts

@@ -0,0 +1 @@
+export const ENTRY_BUNDLE_NAME = 'shared';

package/src/dev-entrypoint/index.tsx

@@ -0,0 +1,17 @@
+import type { ComponentType } from 'react';
+import { AppRegistry } from 'react-native';
+import { ENTRY_BUNDLE_NAME } from '../constants';
+import { setup } from '../rn-polyfills';
+
+setup();
+
+export function register(Component: ComponentType<any>) {
+  if (AppRegistry.getAppKeys().includes(ENTRY_BUNDLE_NAME)) {
+    console.warn('Granite entrypoint is already registered');
+    return;
+  }
+
+  const component = (props: any) => <Component {...props} />;
+
+  AppRegistry.registerComponent(ENTRY_BUNDLE_NAME, () => component);
+}