@granite-js/react-native 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @granite-js/react-native
 
+## 0.1.3
+
+### Patch Changes
+
+- 1adad4c: add StatusBar API
+- a4783c8: expose keyboard utils
+  - @granite-js/cli@0.1.3
+  - @granite-js/image@0.1.3
+  - @granite-js/jest@0.1.3
+  - @granite-js/lottie@0.1.3
+  - @granite-js/mpack@0.1.3
+  - @granite-js/native@0.1.3
+  - @granite-js/style-utils@0.1.3
+
+## 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

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,7 @@ export * from './scroll-view-inertial-background';
 export * from './react';
 export * from './router/createRoute';
 export * from './event';
+export * from './video';
+export * from './status-bar';
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/dist/keyboard/index.d.ts

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

package/dist/status-bar/StatusBar.android.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function useStatusBar({ style, animated, hidden, backgroundColor, translucent }: StatusBarProps): void;

package/dist/status-bar/StatusBar.ios.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarProps } from './types';
+export declare function StatusBar(props: StatusBarProps): null;
+export declare function useStatusBar({ style, hidden }: StatusBarProps): void;

package/dist/status-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/dist/status-bar/types.d.ts

@@ -0,0 +1,20 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+export type StatusBarProps = {
+    /**
+     * @default 'auto'
+     */
+    style?: StatusBarStyle;
+    hidden?: boolean;
+    /**
+     * @platform android
+     */
+    animated?: boolean;
+    /**
+     * @platform android
+     */
+    backgroundColor?: string;
+    /**
+     * @platform android
+     */
+    translucent?: boolean;
+};

package/dist/status-bar/utils.d.ts

@@ -0,0 +1,3 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+export declare function toStatusBarContentStyle(statusBarStyle?: StatusBarStyle, colorPreference?: ColorPreference): 'light-content' | 'dark-content';

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.1",
+  "version": "0.1.3",
   "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.1",
+    "@granite-js/native": "0.1.3",
     "@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.1",
-    "@granite-js/image": "0.1.1",
-    "@granite-js/jest": "0.1.1",
-    "@granite-js/mpack": "0.1.1",
-    "@granite-js/style-utils": "0.1.1",
+    "@granite-js/cli": "0.1.3",
+    "@granite-js/image": "0.1.3",
+    "@granite-js/jest": "0.1.3",
+    "@granite-js/lottie": "0.1.3",
+    "@granite-js/mpack": "0.1.3",
+    "@granite-js/style-utils": "0.1.3",
     "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,8 @@ export * from './scroll-view-inertial-background';
 export * from './react';
 export * from './router/createRoute';
 export * from './event';
+export * from './video';
+export * from './status-bar';
 
 export type { InitialProps, ColorPreference } from './initial-props';
 export type { GraniteProps } from './app';

package/src/keyboard/index.ts

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

package/src/status-bar/StatusBar.android.tsx

@@ -0,0 +1,36 @@
+import { useLayoutEffect } from 'react';
+import { StatusBar as BaseStatusBar, useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+
+export function StatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  return (
+    <BaseStatusBar
+      translucent={translucent}
+      barStyle={toStatusBarContentStyle(style, colorScheme)}
+      backgroundColor={translucentWithNoBackgroundColor ? 'transparent' : backgroundColor}
+      animated={animated}
+      hidden={hidden}
+    />
+  );
+}
+
+export function useStatusBar({ style, animated, hidden, backgroundColor, translucent = true }: StatusBarProps) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const translucentWithNoBackgroundColor = translucent && backgroundColor == null;
+
+  useLayoutEffect(() => {
+    BaseStatusBar.setTranslucent(translucent);
+    BaseStatusBar.setBarStyle(toStatusBarContentStyle(style, colorScheme));
+    BaseStatusBar.setBackgroundColor(
+      translucentWithNoBackgroundColor ? 'transparent' : (backgroundColor ?? 'transparent')
+    );
+
+    if (hidden !== undefined) {
+      BaseStatusBar.setHidden(hidden);
+    }
+  }, [colorScheme, translucentWithNoBackgroundColor, style, animated, hidden, backgroundColor, translucent]);
+}

package/src/status-bar/StatusBar.d.ts

@@ -0,0 +1,4 @@
+import type { StatusBarProps } from './types';
+
+export declare function StatusBar(props: StatusBarProps): JSX.Element;
+export declare function useStatusBar(props: StatusBarProps): void;

package/src/status-bar/StatusBar.ios.tsx

@@ -0,0 +1,34 @@
+import { useLayoutEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import type { StatusBarProps } from './types';
+import { toStatusBarContentStyle } from './utils';
+import { useNavigation } from '../router/createRoute';
+
+export function StatusBar(props: StatusBarProps) {
+  useStatusBar(props);
+
+  return null;
+}
+
+export function useStatusBar({ style, hidden }: StatusBarProps) {
+  const navigation = useNavigation();
+  const colorScheme = useColorScheme() ?? 'light';
+
+  useLayoutEffect(() => {
+    let statusBarStyle: 'light' | 'dark';
+
+    switch (toStatusBarContentStyle(style, colorScheme)) {
+      case 'light-content':
+        statusBarStyle = 'light';
+        break;
+      case 'dark-content':
+        statusBarStyle = 'dark';
+        break;
+    }
+
+    navigation.setOptions({
+      statusBarStyle,
+      statusBarHidden: hidden,
+    });
+  }, [navigation, colorScheme, style, hidden]);
+}

package/src/status-bar/index.ts

@@ -0,0 +1,2 @@
+export { StatusBar, useStatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarStyle } from './types';

package/src/status-bar/types.ts

@@ -0,0 +1,21 @@
+export type StatusBarStyle = 'light' | 'dark' | 'auto' | 'inverted';
+
+export type StatusBarProps = {
+  /**
+   * @default 'auto'
+   */
+  style?: StatusBarStyle;
+  hidden?: boolean;
+  /**
+   * @platform android
+   */
+  animated?: boolean;
+  /**
+   * @platform android
+   */
+  backgroundColor?: string;
+  /**
+   * @platform android
+   */
+  translucent?: boolean;
+};

package/src/status-bar/utils.ts

@@ -0,0 +1,20 @@
+import type { StatusBarStyle } from './types';
+import type { ColorPreference } from '../initial-props';
+
+export function toStatusBarContentStyle(
+  statusBarStyle: StatusBarStyle = 'auto',
+  colorPreference: ColorPreference = 'light'
+): 'light-content' | 'dark-content' {
+  const resolvedStyle = (() => {
+    switch (statusBarStyle) {
+      case 'auto':
+        return colorPreference === 'light' ? 'dark' : 'light';
+      case 'inverted':
+        return colorPreference === 'light' ? 'light' : 'dark';
+      default:
+        return statusBarStyle;
+    }
+  })();
+
+  return resolvedStyle === 'light' ? 'light-content' : 'dark-content';
+}

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;