@granite-js/blur-view 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @granite-js/blur-view
+
+## 1.0.0
+
+### Major Changes
+
+- 260daab: feat: introduce support react native 0.84
+
+### Patch Changes
+
+- Updated dependencies [260daab]
+  - @granite-js/native@1.0.0

package/dist/module/BlurView.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import { View } from 'react-native';
+import { ReactNativeBlurModule } from "./ReactNativeBlurModule.js";
+import { isBlurNativeModuleSupported } from "./constants.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @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
+}) {
+  if (!isBlurNativeModuleSupported || ReactNativeBlurModule == null) {
+    return /*#__PURE__*/_jsx(View, {
+      ...viewProps
+    });
+  }
+  const Component = vibrancyEffect ? ReactNativeBlurModule.VibrancyView : ReactNativeBlurModule.BlurView;
+  return /*#__PURE__*/_jsx(Component, {
+    blurAmount: blurAmount,
+    blurType: blurType,
+    reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
+    ...viewProps
+  });
+}
+BlurView.isSupported = isBlurNativeModuleSupported;
+//# sourceMappingURL=BlurView.js.map

package/dist/module/BlurView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","ReactNativeBlurModule","isBlurNativeModuleSupported","jsx","_jsx","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","vibrancyEffect","viewProps","Component","VibrancyView","isSupported"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAmB,cAAc;AAC9C,SAASC,qBAAqB,QAAQ,4BAAyB;AAC/D,SAASC,2BAA2B,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,QAAQ;EACRC,UAAU,GAAG,EAAE;EACfC,gCAAgC;EAChCC,cAAc,GAAG,KAAK;EACtB,GAAGC;AACU,CAAC,EAAE;EAChB,IAAI,CAACR,2BAA2B,IAAID,qBAAqB,IAAI,IAAI,EAAE;IACjE,oBAAOG,IAAA,CAACJ,IAAI;MAAA,GAAKU;IAAS,CAAG,CAAC;EAChC;EAEA,MAAMC,SAAS,GAAGF,cAAc,GAAGR,qBAAqB,CAACW,YAAY,GAAGX,qBAAqB,CAACI,QAAQ;EAEtG,oBACED,IAAA,CAACO,SAAS;IACRJ,UAAU,EAAEA,UAAW;IACvBD,QAAQ,EAAEA,QAAS;IACnBE,gCAAgC,EAAEA,gCAAiC;IAAA,GAC/DE;EAAS,CACd,CAAC;AAEN;AAEAL,QAAQ,CAACQ,WAAW,GAAGX,2BAA2B","ignoreList":[]}

package/dist/module/ReactNativeBlurModule.js

@@ -0,0 +1,15 @@
+"use strict";
+
+import { isBlurNativeModuleSupported } from "./constants.js";
+const ReactNativeBlurModule = (() => {
+  if (!isBlurNativeModuleSupported) {
+    return undefined;
+  }
+  try {
+    return require('@granite-js/native/@react-native-community/blur');
+  } catch {
+    return undefined;
+  }
+})();
+export { ReactNativeBlurModule };
+//# sourceMappingURL=ReactNativeBlurModule.js.map

package/dist/module/ReactNativeBlurModule.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isBlurNativeModuleSupported","ReactNativeBlurModule","undefined","require"],"sourceRoot":"../../src","sources":["ReactNativeBlurModule.ts"],"mappings":";;AACA,SAASA,2BAA2B,QAAQ,gBAAa;AAEzD,MAAMC,qBAAqB,GAAG,CAAC,MAAM;EACnC,IAAI,CAACD,2BAA2B,EAAE;IAChC,OAAOE,SAAS;EAClB;EAEA,IAAI;IACF,OAAOC,OAAO,CAAC,iDAAiD,CAAC;EAInE,CAAC,CAAC,MAAM;IACN,OAAOD,SAAS;EAClB;AACF,CAAC,EAAE,CAAC;AAEJ,SAASD,qBAAqB","ignoreList":[]}

package/dist/module/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { Platform } from 'react-native';
+export const isBlurNativeModuleSupported = Platform.OS === 'ios';
+//# sourceMappingURL=constants.js.map

package/dist/module/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","isBlurNativeModuleSupported","OS"],"sourceRoot":"../../src","sources":["constants.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,OAAO,MAAMC,2BAA2B,GAAGD,QAAQ,CAACE,EAAE,KAAK,KAAK","ignoreList":[]}

package/dist/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./BlurView.js";
+//# sourceMappingURL=index.js.map

package/dist/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA,cAAc,eAAY","ignoreList":[]}

package/dist/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/dist/typescript/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/typescript/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/typescript/constants.d.ts

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

package/dist/typescript/index.d.ts

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

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@granite-js/blur-view",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/module/index.js",
+  "types": "./dist/typescript/index.d.ts",
+  "react-native": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/typescript/index.d.ts",
+      "react-native": "./src/index.ts",
+      "default": "./dist/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "prepack": "yarn build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "build": "bob build && tsc --project tsconfig.build.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toss/granite.git",
+    "directory": "packages/blur-view"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "devDependencies": {
+    "@granite-js/native": "1.0.0",
+    "@types/react": "19.2.0",
+    "react": "19.2.3",
+    "react-native": "0.84.0-rc.5",
+    "react-native-builder-bob": "0.40.17",
+    "typescript": "5.9.3"
+  },
+  "peerDependencies": {
+    "@granite-js/native": "1.0.0",
+    "@types/react": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "sideEffects": false,
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ]
+    ]
+  }
+}

package/src/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/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/constants.ts

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

package/src/index.ts

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