@granite-js/react-native 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @granite-js/react-native
 
+## 0.1.4
+
+### Patch Changes
+
+- ecaae2b: add BlurView
+  - @granite-js/cli@0.1.4
+  - @granite-js/image@0.1.4
+  - @granite-js/jest@0.1.4
+  - @granite-js/lottie@0.1.4
+  - @granite-js/mpack@0.1.4
+  - @granite-js/native@0.1.4
+  - @granite-js/style-utils@0.1.4
+
+## 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

package/dist/blur/BlurView.d.ts

@@ -0,0 +1,78 @@
+import type { BlurViewProps as InternalBlurViewProps } from '@granite-js/native/@react-native-community/blur';
+import { ViewProps } from 'react-native';
+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 declare function BlurView({ blurType, blurAmount, reducedTransparencyFallbackColor, vibrancyEffect, ...viewProps }: BlurViewProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BlurView {
+    var isSupported: boolean;
+}

package/dist/blur/ReactNativeBlurModule.d.ts

@@ -0,0 +1,6 @@
+import type { BlurView, VibrancyView } from '@granite-js/native/@react-native-community/blur';
+declare const ReactNativeBlurModule: {
+    BlurView: typeof BlurView;
+    VibrancyView: typeof VibrancyView;
+} | undefined;
+export { ReactNativeBlurModule };

package/dist/blur/constants.d.ts

@@ -0,0 +1 @@
+export declare const isBlurNativeModuleSupported: boolean;

package/dist/blur/index.d.ts

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

package/dist/index.d.ts

@@ -15,5 +15,7 @@ export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';
+export * from './status-bar';
+export * from './blur';
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "The Granite Framework",
   "bin": {
     "granite": "./bin/cli.js"
@@ -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.2",
+    "@granite-js/native": "0.1.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
     "@types/babel__core": "^7",
@@ -82,12 +82,12 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@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",
+    "@granite-js/cli": "0.1.4",
+    "@granite-js/image": "0.1.4",
+    "@granite-js/jest": "0.1.4",
+    "@granite-js/lottie": "0.1.4",
+    "@granite-js/mpack": "0.1.4",
+    "@granite-js/style-utils": "0.1.4",
     "es-toolkit": "^1.34.1",
     "react-native-url-polyfill": "1.3.0"
   }

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,20 @@
+import type { BlurView, VibrancyView } from '@granite-js/native/@react-native-community/blur';
+import { isBlurNativeModuleSupported } from './constants';
+
+const ReactNativeBlurModule = (() => {
+  if (!isBlurNativeModuleSupported) {
+    return undefined;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    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/index.ts

@@ -17,6 +17,8 @@ export * from './react';
 export * from './router/createRoute';
 export * from './event';
 export * from './video';
+export * from './status-bar';
+export * from './blur';
 
 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';
+}