@abeman/react-native-nitro-blur 0.1.0

package/package.json

@@ -0,0 +1,174 @@
+{
+  "name": "@abeman/react-native-nitro-blur",
+  "version": "0.1.0",
+  "description": "Blur view",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "nitrogen",
+    "nitro.json",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-nitro-blur-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "nitrogen": "nitrogen",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/huynq1175/react-native-nitro-blur.git"
+  },
+  "author": "huynq2 <99823149+huynq1175@users.noreply.github.com> (https://github.com/huynq1175)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/huynq1175/react-native-nitro-blur/issues"
+  },
+  "homepage": "https://github.com/huynq1175/react-native-nitro-blur#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "nitrogen": "^0.35.2",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-nitro-modules": "^0.35.2",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "^0.35.2"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "custom",
+        {
+          "script": "nitrogen",
+          "clean": "nitrogen/"
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "nitro-view",
+    "languages": "kotlin-swift",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.2"
+  }
+}

package/src/NitroBlur.nitro.ts

@@ -0,0 +1,56 @@
+import type {
+  HybridView,
+  HybridViewMethods,
+  HybridViewProps,
+} from 'react-native-nitro-modules';
+
+export type BlurTint =
+  | 'light'
+  | 'dark'
+  | 'default'
+  | 'extraLight'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
+/**
+ * Blur method to use on Android.
+ *
+ * - `'none'` - Renders a semi-transparent view instead of rendering a blur effect.
+ * - `'dimezisBlurView'` - Uses a native blur view implementation based on BlurView library.
+ *   This method may lead to decreased performance on Android SDK 30 and below.
+ * - `'dimezisBlurViewSdk31Plus'` - Uses BlurView library on Android SDK 31 and above,
+ *   for older versions falls back to 'none'.
+ *
+ * @platform android
+ */
+export type BlurMethod =
+  | 'none'
+  | 'dimezisBlurView'
+  | 'dimezisBlurViewSdk31Plus';
+
+export interface NitroBlurProps extends HybridViewProps {
+  tint: BlurTint;
+  intensity: number;
+  blurReductionFactor: number;
+  blurTargetId: number;
+  blurMethod: BlurMethod;
+}
+
+export interface NitroBlurMethods extends HybridViewMethods {}
+
+export type NitroBlur = HybridView<NitroBlurProps, NitroBlurMethods>;

package/src/NitroBlurTarget.nitro.ts

@@ -0,0 +1,13 @@
+import type {
+  HybridView,
+  HybridViewMethods,
+  HybridViewProps,
+} from 'react-native-nitro-modules';
+
+export interface NitroBlurTargetProps extends HybridViewProps {}
+export interface NitroBlurTargetMethods extends HybridViewMethods {}
+
+export type NitroBlurTarget = HybridView<
+  NitroBlurTargetProps,
+  NitroBlurTargetMethods
+>;

package/src/index.tsx

@@ -0,0 +1,215 @@
+'use client';
+
+import React from 'react';
+import {
+  findNodeHandle,
+  Platform,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { getHostComponent } from 'react-native-nitro-modules';
+import type {
+  BlurMethod,
+  BlurTint,
+  NitroBlurMethods,
+  NitroBlurProps,
+} from './NitroBlur.nitro';
+import type {
+  NitroBlurTargetMethods,
+  NitroBlurTargetProps,
+} from './NitroBlurTarget.nitro';
+
+const NitroBlurConfig = require('../nitrogen/generated/shared/json/NitroBlurConfig.json');
+const NitroBlurTargetConfig = require('../nitrogen/generated/shared/json/NitroBlurTargetConfig.json');
+
+const NativeBlurView = getHostComponent<NitroBlurProps, NitroBlurMethods>(
+  'NitroBlur',
+  () => NitroBlurConfig
+);
+
+const NativeBlurTargetView = getHostComponent<
+  NitroBlurTargetProps,
+  NitroBlurTargetMethods
+>('NitroBlurTarget', () => NitroBlurTargetConfig);
+
+// ----- BlurViewProps -----
+
+export type BlurViewProps = {
+  /**
+   * A ref to a BlurTargetView, which this BlurView will blur as its background.
+   *
+   * @platform android
+   */
+  blurTarget?: React.RefObject<View | null>;
+
+  /**
+   * A tint mode which will be applied to the view.
+   * @default 'default'
+   */
+  tint?: BlurTint;
+
+  /**
+   * A number from `1` to `100` to control the intensity of the blur effect.
+   *
+   * You can animate this property using `react-native-reanimated`.
+   *
+   * @default 50
+   */
+  intensity?: number;
+
+  /**
+   * A number by which the blur intensity will be divided on Android.
+   *
+   * When using blur methods on Android, the perceived blur intensity might differ from iOS
+   * at different intensity levels. This property can be used to fine tune it on Android
+   * to match it more closely with iOS.
+   * @default 4
+   * @platform android
+   */
+  blurReductionFactor?: number;
+
+  /**
+   * Blur method to use on Android.
+   *
+   * @default 'none'
+   * @platform android
+   */
+  blurMethod?: BlurMethod;
+
+  /**
+   * @hidden
+   * @deprecated Use `blurMethod` instead.
+   * @default 'none'
+   * @platform android
+   */
+  experimentalBlurMethod?: BlurMethod;
+} & ViewProps;
+
+export type BlurTargetViewProps = {
+  ref?: React.RefObject<View | null>;
+} & ViewProps;
+
+// ----- BlurView -----
+
+type BlurViewState = {
+  blurTargetId?: number | null;
+};
+
+export class BlurView extends React.Component<BlurViewProps, BlurViewState> {
+  constructor(props: BlurViewProps) {
+    super(props);
+    this.state = {
+      blurTargetId: undefined,
+    };
+  }
+
+  componentDidMount(): void {
+    this._updateBlurTargetId();
+    this._maybeWarnAboutBlurMethod();
+
+    if (this.props.experimentalBlurMethod != null) {
+      console.warn(
+        'The `experimentalBlurMethod` prop has been deprecated. Please use the `blurMethod` prop instead.'
+      );
+    }
+  }
+
+  componentDidUpdate(prevProps: Readonly<BlurViewProps>): void {
+    if (prevProps.blurTarget?.current !== this.props.blurTarget?.current) {
+      this._updateBlurTargetId();
+    }
+  }
+
+  _maybeWarnAboutBlurMethod(): void {
+    const blurMethod = this._getBlurMethod();
+    if (
+      Platform.OS === 'android' &&
+      (blurMethod === 'dimezisBlurView' ||
+        blurMethod === 'dimezisBlurViewSdk31Plus') &&
+      !this.props.blurTarget
+    ) {
+      // The fallback happens on the native side
+      console.warn(
+        `You have selected the "${blurMethod}" blur method, but the \`blurTarget\` prop has not been configured. The blur view will fallback to "none" blur method to avoid errors.`
+      );
+    }
+  }
+
+  _updateBlurTargetId = () => {
+    const blurTarget = this.props.blurTarget?.current;
+    const blurTargetId = blurTarget ? findNodeHandle(blurTarget) : undefined;
+    this.setState(() => ({
+      blurTargetId,
+    }));
+  };
+
+  _getBlurMethod(): BlurMethod {
+    const providedMethod =
+      this.props.blurMethod ?? this.props.experimentalBlurMethod;
+    return providedMethod ?? 'none';
+  }
+
+  render() {
+    const {
+      tint = 'default',
+      intensity = 30,
+      blurReductionFactor = 4,
+      style,
+      children,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      blurTarget,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      blurMethod,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      experimentalBlurMethod,
+      ...props
+    } = this.props;
+
+    return (
+      <View {...props} style={[styles.container, style]}>
+        <NativeBlurView
+          blurTargetId={this.state.blurTargetId ?? 0}
+          tint={tint}
+          intensity={intensity}
+          blurReductionFactor={blurReductionFactor}
+          blurMethod={this._getBlurMethod()}
+          style={StyleSheet.absoluteFill}
+        />
+        {children}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: { backgroundColor: 'transparent' },
+});
+
+// ----- BlurTargetView -----
+
+/**
+ * A container view that can be used as a blur target on Android.
+ * Wrap the content you want to blur with this view, then pass
+ * a ref to it via the `blurTarget` prop of `BlurView`.
+ *
+ * On iOS, this is just a regular View since UIVisualEffectView
+ * naturally blurs whatever is behind it.
+ */
+export const BlurTargetView = React.forwardRef<View, ViewProps>(
+  (props, ref) => {
+    if (Platform.OS === 'android') {
+      return <NativeBlurTargetView {...props} ref={ref as any} />;
+    }
+    return <View {...props} ref={ref as any} collapsable={false} />;
+  }
+);
+
+// ----- Exports -----
+
+export type {
+  BlurTint,
+  BlurMethod,
+  NitroBlurProps,
+  NitroBlurMethods,
+} from './NitroBlur.nitro';