@granite-js/react-native 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @granite-js/react-native
 
+## 0.1.2
+
+### Patch Changes
+
+- e1384cf: re-add previously excluded native module packages
+- Updated dependencies [e1384cf]
+  - @granite-js/lottie@0.1.2
+  - @granite-js/native@0.1.2
+  - @granite-js/image@0.1.2
+  - @granite-js/jest@0.1.2
+  - @granite-js/style-utils@0.1.2
+  - @granite-js/cli@0.1.2
+  - @granite-js/mpack@0.1.2
+
+## 0.1.1
+
+### Patch Changes
+
+- d675415: Improve scaffolding to provide a better showcase UI
+- 10a5f3f: empty
+- Updated dependencies [d675415]
+- Updated dependencies [10a5f3f]
+  - @granite-js/style-utils@0.1.1
+  - @granite-js/native@0.1.1
+  - @granite-js/image@0.1.1
+  - @granite-js/mpack@0.1.1
+  - @granite-js/jest@0.1.1
+  - @granite-js/cli@0.1.1
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import './types/global';
 export { Granite } from './app';
 export * from '@granite-js/style-utils';
 export * from '@granite-js/image';
+export * from '@granite-js/lottie';
 export * from './dev-entrypoint';
 export * from './native-modules/natives';
 export * from './visibility';
@@ -13,5 +14,6 @@ export * from './scroll-view-inertial-background';
 export * from './react';
 export * from './router/createRoute';
 export * from './event';
+export * from './video';
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/dist/initial-props/InitialProps.d.ts

@@ -8,14 +8,6 @@
  * @typedef {'light' | 'dark'} ColorPreference
  */
 export type ColorPreference = 'light' | 'dark';
-/**
- * @name NetworkStatus
- * @description
- * Type representing the network status.
- *
- * @typedef {'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE'} NetworkStatus
- */
-type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
 /**
  * @category Types
  * @name BaseInitialProps
@@ -24,18 +16,12 @@ type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
  *
  * @interface
  * @property {'ios' | 'android'} platform - Platform type
- * @property {string} appVersion - App version
  * @property {ColorPreference} initialColorPreference - Initial color
- * @property {NetworkStatus} networkStatus - Network status
- * @property {number} loadingStartTs - Timestamp when ReactNativeView started rendering in native
  * @property {string} [scheme] - Executed scheme
  */
 type BaseInitialProps = {
     platform: 'ios' | 'android';
-    appVersion: string;
     initialColorPreference: ColorPreference;
-    networkStatus: NetworkStatus;
-    loadingStartTs: number;
     scheme?: string;
 };
 /**
@@ -47,13 +33,9 @@ type BaseInitialProps = {
  * @interface
  * @augments BaseInitialProps
  * @property {'android'} platform - Platform name (Android)
- * @property {string} initialFontScale - Font scale set on the device
- * @property {string} distributionGroup - Distribution group
  */
 export type AndroidInitialProps = BaseInitialProps & {
     platform: 'android';
-    initialFontScale: string;
-    distributionGroup: string;
 };
 /**
  * @category Types
@@ -64,23 +46,10 @@ export type AndroidInitialProps = BaseInitialProps & {
  * @interface
  * @augments BaseInitialProps
  * @property {'ios'} platform - Platform (iOS)
- * @property {IOSFontSizeType} initialFontSize - Initial font size
- * @property {boolean} isVisible - Visibility status
  */
 export type IOSInitialProps = BaseInitialProps & {
     platform: 'ios';
-    initialFontSize: IOSFontSizeType;
-    isVisible: boolean;
 };
-/**
- * @category Types
- * @name IOSFontSizeType
- * @description
- * Type representing iOS font size type.
- *
- * @typedef {'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge'} IOSFontSizeType
- */
-type IOSFontSizeType = 'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge';
 /**
  * @public
  * @category Core
@@ -93,11 +62,7 @@ type IOSFontSizeType = 'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxL
  *
  * @property {'ios' | 'android'} platform - The platform on which the app is currently running. Has a value of either `ios` or `android`.
  * @property {ColorPreference} initialColorPreference - The initial color theme. Represents the color theme set by the user.
- * @property {NetworkStatus} networkStatus - The current device's network connection status and connected network.
  * @property {string} [scheme] - The URL scheme used to enter the current screen.
- * @property {`xSmall` | `Small` | `Medium` | `Large` | `xLarge` | `xxLarge` | `xxxLarge` | `A11y_Medium` | `A11y_Large` | `A11y_xLarge` | `A11y_xxLarge` | `A11y_xxxLarge`} initialFontSize (iOS only) iOS system font size. Each value represents a specific font size. Default value is `Large`.
- * @property {boolean} isVisible (iOS only) Whether the screen is currently visible in iOS. Initial value is passed as `true`.
- * @property {string} initialFontScale (Android only) Android system font scale. The font size scale adjusted by the user in Android device's accessibility settings. This value is multiplied by the base font size to determine the final font size.
  *
  * @example
  *
@@ -120,8 +85,8 @@ type IOSFontSizeType = 'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxL
  *   appName: APP_NAME,
  *   context,
  * });
- * :::
  * ```
+ * :::
  */
 export type InitialProps = AndroidInitialProps | IOSInitialProps;
 export {};

package/dist/video/Video.d.ts

@@ -0,0 +1,67 @@
+import type { default as VideoRef } from '@granite-js/native/react-native-video';
+import { ComponentProps } from 'react';
+import { Animated } from 'react-native';
+import * as instance from './instance';
+declare const AnimatedRNVideo: Animated.AnimatedComponent<import("react").ComponentType<instance.VideoNativeProps>>;
+type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
+/**
+ * @public
+ * @name Video
+ * @category UI
+ * @description
+ * The Video component implements audio focus control logic to prevent the sandbox app from stopping music playing in other apps. It automatically plays or pauses based on the app's state. For example, when the app transitions to the background, the video automatically pauses.
+ *
+ * ::: warning
+ * The Video component uses [react-native-video version (6.0.0-alpha.6)](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6). Therefore, some types or features may not be compatible with the latest version.
+ * :::
+ *
+ * @property {boolean} [isAvailable] Value to check if the `Video` component can be used. You can check this value to determine if the user can render the video or if video functionality is unavailable due to environmental constraints (e.g., network connection issues, unsupported devices). If this value is `false`, you should handle it by not rendering the video or providing alternative content.
+ *
+ * @param {VideoProperties} [props] Properties provided by [`react-native-video`](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6).
+ * @param {string} [props.source.uri] Source of the video to play. Can be set to a file path or URL.
+ * @param {boolean} [props.muted=false] Controls the mute state of the video. If `true`, the video's audio is muted; if `false`, the audio plays. Default is `false`.
+ * @param {boolean} [props.paused=false] Property to control video playback. If `true`, the video is paused; if `false`, the video plays. Default is `false`, and it autoplays.
+ * @param {OnAudioFocusChanged} [props.onAudioFocusChanged] Callback function called when audio focus changes. Must be implemented when `muted` is `false`. For more details, see [OnAudioFocusChanged](/reference/react-native/Types/OnAudioFocusChanged.html).
+ * @param {Ref<VideoRef>} ref Reference object to access the video instance. Through this ref, you can access various methods of the video instance.
+ *
+ * @returns {JSX.Element} Returns a JSX element that renders the video. Uses `Animated` to provide smooth animation effects during video playback.
+ *
+ * @see [react-native-video] https://github.com/react-native-video/react-native-video
+ * For detailed properties of the video component, please refer to the official documentation.
+ * @see [react-native-video-6.0.0] https://github.com/TheWidlarzGroup/react-native-video/releases/tag/v6.0.0
+ * This is the source code of the version currently installed in the sandbox app.
+ *
+ * @example
+ *
+ * ### Video Autoplay Example
+ *
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { View } from 'react-native';
+ * import { Video } from '@granite-js/react-native';
+ *
+ * export function VideoExample() {
+ *   const videoRef = useRef(null);
+ *
+ *   return (
+ *     <View>
+ *       <Video
+ *         ref={videoRef}
+ *         source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
+ *         muted={true}
+ *         paused={false}
+ *         resizeMode="cover"
+ *         style={{ width: 300, height: 200, borderWidth: 1 }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+declare const Video: import("react").ForwardRefExoticComponent<Omit<import("react-native-video").VideoProperties, "onAudioFocusChanged"> & {
+    onAudioFocusChanged?: (event: {
+        hasAudioFocus: boolean;
+    }) => void;
+} & import("react").RefAttributes<VideoRef>>;
+export { Video };
+export type { VideoRef, VideoProps };

package/dist/video/index.d.ts

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

package/dist/video/instance.d.ts

@@ -0,0 +1,9 @@
+import type { VideoProperties } from '@granite-js/native/react-native-video';
+import { type ComponentType } from 'react';
+export type VideoNativeProps = Omit<VideoProperties, 'onAudioFocusChanged'> & {
+    onAudioFocusChanged?: (event: {
+        hasAudioFocus: boolean;
+    }) => void;
+};
+export declare const Component: ComponentType<VideoNativeProps>;
+export declare const isAvailable: boolean;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
-    "test": "vitest --no-watch",
+    "test": "vitest --no-watch --coverage",
     "lint": "eslint .",
     "build": "tsup && tsc -p tsconfig.build.json",
     "prepack": "yarn build"
@@ -56,7 +56,7 @@
     "@babel/core": "^7.24.9",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@granite-js/native": "0.1.0",
+    "@granite-js/native": "0.1.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -64,6 +64,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",
@@ -81,11 +82,12 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@granite-js/cli": "0.1.0",
-    "@granite-js/image": "0.1.0",
-    "@granite-js/jest": "0.1.0",
-    "@granite-js/mpack": "0.1.0",
-    "@granite-js/style-utils": "0.1.0",
+    "@granite-js/cli": "0.1.2",
+    "@granite-js/image": "0.1.2",
+    "@granite-js/jest": "0.1.2",
+    "@granite-js/lottie": "0.1.2",
+    "@granite-js/mpack": "0.1.2",
+    "@granite-js/style-utils": "0.1.2",
     "es-toolkit": "^1.34.1",
     "react-native-url-polyfill": "1.3.0"
   }

package/src/index.ts

@@ -3,6 +3,8 @@ import './types/global';
 export { Granite } from './app';
 export * from '@granite-js/style-utils';
 export * from '@granite-js/image';
+export * from '@granite-js/lottie';
+
 export * from './dev-entrypoint';
 export * from './native-modules/natives';
 export * from './visibility';
@@ -14,6 +16,7 @@ export * from './scroll-view-inertial-background';
 export * from './react';
 export * from './router/createRoute';
 export * from './event';
+export * from './video';
 
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/src/initial-props/InitialProps.ts

@@ -9,15 +9,6 @@
  */
 export type ColorPreference = 'light' | 'dark';
 
-/**
- * @name NetworkStatus
- * @description
- * Type representing the network status.
- *
- * @typedef {'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE'} NetworkStatus
- */
-type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
-
 /**
  * @category Types
  * @name BaseInitialProps
@@ -26,18 +17,12 @@ type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
  *
  * @interface
  * @property {'ios' | 'android'} platform - Platform type
- * @property {string} appVersion - App version
  * @property {ColorPreference} initialColorPreference - Initial color
- * @property {NetworkStatus} networkStatus - Network status
- * @property {number} loadingStartTs - Timestamp when ReactNativeView started rendering in native
  * @property {string} [scheme] - Executed scheme
  */
 type BaseInitialProps = {
   platform: 'ios' | 'android';
-  appVersion: string;
   initialColorPreference: ColorPreference;
-  networkStatus: NetworkStatus;
-  loadingStartTs: number;
   scheme?: string;
 };
 
@@ -50,13 +35,9 @@ type BaseInitialProps = {
  * @interface
  * @augments BaseInitialProps
  * @property {'android'} platform - Platform name (Android)
- * @property {string} initialFontScale - Font scale set on the device
- * @property {string} distributionGroup - Distribution group
  */
 export type AndroidInitialProps = BaseInitialProps & {
   platform: 'android';
-  initialFontScale: string;
-  distributionGroup: string;
 };
 
 /**
@@ -68,37 +49,11 @@ export type AndroidInitialProps = BaseInitialProps & {
  * @interface
  * @augments BaseInitialProps
  * @property {'ios'} platform - Platform (iOS)
- * @property {IOSFontSizeType} initialFontSize - Initial font size
- * @property {boolean} isVisible - Visibility status
  */
 export type IOSInitialProps = BaseInitialProps & {
   platform: 'ios';
-  initialFontSize: IOSFontSizeType;
-  isVisible: boolean;
 };
 
-/**
- * @category Types
- * @name IOSFontSizeType
- * @description
- * Type representing iOS font size type.
- *
- * @typedef {'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge'} IOSFontSizeType
- */
-type IOSFontSizeType =
-  | 'xSmall'
-  | 'Small'
-  | 'Medium'
-  | 'Large'
-  | 'xLarge'
-  | 'xxLarge'
-  | 'xxxLarge'
-  | 'A11y_Medium'
-  | 'A11y_Large'
-  | 'A11y_xLarge'
-  | 'A11y_xxLarge'
-  | 'A11y_xxxLarge';
-
 /**
  * @public
  * @category Core
@@ -111,11 +66,7 @@ type IOSFontSizeType =
  *
  * @property {'ios' | 'android'} platform - The platform on which the app is currently running. Has a value of either `ios` or `android`.
  * @property {ColorPreference} initialColorPreference - The initial color theme. Represents the color theme set by the user.
- * @property {NetworkStatus} networkStatus - The current device's network connection status and connected network.
  * @property {string} [scheme] - The URL scheme used to enter the current screen.
- * @property {`xSmall` | `Small` | `Medium` | `Large` | `xLarge` | `xxLarge` | `xxxLarge` | `A11y_Medium` | `A11y_Large` | `A11y_xLarge` | `A11y_xxLarge` | `A11y_xxxLarge`} initialFontSize (iOS only) iOS system font size. Each value represents a specific font size. Default value is `Large`.
- * @property {boolean} isVisible (iOS only) Whether the screen is currently visible in iOS. Initial value is passed as `true`.
- * @property {string} initialFontScale (Android only) Android system font scale. The font size scale adjusted by the user in Android device's accessibility settings. This value is multiplied by the base font size to determine the final font size.
  *
  * @example
  *
@@ -138,7 +89,7 @@ type IOSFontSizeType =
  *   appName: APP_NAME,
  *   context,
  * });
- * :::
  * ```
+ * :::
  */
 export type InitialProps = AndroidInitialProps | IOSInitialProps;

package/src/video/Video.tsx

@@ -0,0 +1,104 @@
+import type { default as VideoRef } from '@granite-js/native/react-native-video';
+import { ComponentProps, forwardRef, useMemo, useState } from 'react';
+import { Animated, Platform } from 'react-native';
+import * as instance from './instance';
+import { useVisibility } from '../visibility';
+
+const AnimatedRNVideo = Animated.createAnimatedComponent(instance.Component);
+
+type VideoProps = ComponentProps<typeof AnimatedRNVideo>;
+
+/**
+ * @public
+ * @name Video
+ * @category UI
+ * @description
+ * The Video component implements audio focus control logic to prevent the sandbox app from stopping music playing in other apps. It automatically plays or pauses based on the app's state. For example, when the app transitions to the background, the video automatically pauses.
+ *
+ * ::: warning
+ * The Video component uses [react-native-video version (6.0.0-alpha.6)](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6). Therefore, some types or features may not be compatible with the latest version.
+ * :::
+ *
+ * @property {boolean} [isAvailable] Value to check if the `Video` component can be used. You can check this value to determine if the user can render the video or if video functionality is unavailable due to environmental constraints (e.g., network connection issues, unsupported devices). If this value is `false`, you should handle it by not rendering the video or providing alternative content.
+ *
+ * @param {VideoProperties} [props] Properties provided by [`react-native-video`](https://github.com/TheWidlarzGroup/react-native-video/tree/v6.0.0-alpha.6).
+ * @param {string} [props.source.uri] Source of the video to play. Can be set to a file path or URL.
+ * @param {boolean} [props.muted=false] Controls the mute state of the video. If `true`, the video's audio is muted; if `false`, the audio plays. Default is `false`.
+ * @param {boolean} [props.paused=false] Property to control video playback. If `true`, the video is paused; if `false`, the video plays. Default is `false`, and it autoplays.
+ * @param {OnAudioFocusChanged} [props.onAudioFocusChanged] Callback function called when audio focus changes. Must be implemented when `muted` is `false`. For more details, see [OnAudioFocusChanged](/reference/react-native/Types/OnAudioFocusChanged.html).
+ * @param {Ref<VideoRef>} ref Reference object to access the video instance. Through this ref, you can access various methods of the video instance.
+ *
+ * @returns {JSX.Element} Returns a JSX element that renders the video. Uses `Animated` to provide smooth animation effects during video playback.
+ *
+ * @see [react-native-video] https://github.com/react-native-video/react-native-video
+ * For detailed properties of the video component, please refer to the official documentation.
+ * @see [react-native-video-6.0.0] https://github.com/TheWidlarzGroup/react-native-video/releases/tag/v6.0.0
+ * This is the source code of the version currently installed in the sandbox app.
+ *
+ * @example
+ *
+ * ### Video Autoplay Example
+ *
+ * ```tsx
+ * import { useRef } from 'react';
+ * import { View } from 'react-native';
+ * import { Video } from '@granite-js/react-native';
+ *
+ * export function VideoExample() {
+ *   const videoRef = useRef(null);
+ *
+ *   return (
+ *     <View>
+ *       <Video
+ *         ref={videoRef}
+ *         source={{ uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' }}
+ *         muted={true}
+ *         paused={false}
+ *         resizeMode="cover"
+ *         style={{ width: 300, height: 200, borderWidth: 1 }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+const Video = forwardRef<VideoRef, instance.VideoNativeProps>((props, ref) => {
+  const [isFocused, setIsFocused] = useState(props.muted || props.paused);
+  const visible = useVisibility();
+
+  // If focus state is not managed directly by the service through onAudioFocusChanged, control the paused value based on internal state.
+  const paused = useMemo(
+    () => !visible || props.paused || (!props.onAudioFocusChanged && !isFocused),
+    [props.onAudioFocusChanged, props.paused, visible, isFocused]
+  );
+
+  const disableFocus = props.muted || props.paused;
+  const mixWithOthers = props.muted ? 'mix' : undefined;
+
+  return (
+    <AnimatedRNVideo
+      ref={ref as any}
+      progressUpdateInterval={16}
+      disableFocus={Platform.OS === 'ios' ? false : disableFocus}
+      playWhenInactive
+      onAudioFocusChanged={(event: any) => {
+        setIsFocused(event.hasAudioFocus);
+        props.onAudioFocusChanged?.(event);
+      }}
+      {...props}
+      // Internal state is used to control the component's states.
+      paused={paused}
+      mixWithOthers={mixWithOthers}
+    />
+  );
+});
+
+Object.defineProperty(Video, 'isAvailable', {
+  value: instance.isAvailable,
+  enumerable: true,
+  writable: false,
+  configurable: false,
+});
+
+export { Video };
+export type { VideoRef, VideoProps };

package/src/video/index.ts

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

package/src/video/instance.tsx

@@ -0,0 +1,28 @@
+import type { VideoProperties } from '@granite-js/native/react-native-video';
+import { Component as ReactComponent, forwardRef, type ComponentType, type ForwardedRef } from 'react';
+import { View } from 'react-native';
+
+export type VideoNativeProps = Omit<VideoProperties, 'onAudioFocusChanged'> & {
+  onAudioFocusChanged?: (event: { hasAudioFocus: boolean }) => void;
+};
+
+class FallbackComponent extends ReactComponent<VideoNativeProps & { innerRef: ForwardedRef<View> }> {
+  render() {
+    return <View ref={this.props.innerRef} />;
+  }
+}
+
+const ForwardedComponent = forwardRef<View, VideoNativeProps>((props: VideoNativeProps, ref) => (
+  <FallbackComponent {...props} innerRef={ref} />
+));
+
+function getVideoComponent(): ComponentType<VideoNativeProps> {
+  try {
+    return require('@granite-js/native/react-native-video')?.default;
+  } catch {
+    return ForwardedComponent;
+  }
+}
+
+export const Component = getVideoComponent();
+export const isAvailable = Component !== ForwardedComponent;