@granite-js/react-native 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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

@@ -16,5 +16,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granite-js/react-native",
-  "version": "0.1.3",
+  "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.3",
+    "@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.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",
+    "@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

@@ -18,6 +18,7 @@ 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';