@react-native-ohos/react-native-blurhash 2.0.4-rc.1

package/package.json

@@ -0,0 +1,113 @@
+{
+	"name": "@react-native-ohos/react-native-blurhash",
+	"title": "React Native Blurhash",
+	"version": "2.0.4-rc.1",
+	"description": "🖼 Blurhash is a compact representation of a placeholder for an image. This is a Native UI Module for React Native to asynchronously wrap the Blurhash implementations and make them usable in React Native. Also supports encoding!",
+	"main": "lib/commonjs/index.js",
+	"types": "lib/typescript/index.d.ts",
+	"react-native": "src/index.tsx",
+	"module": "lib/module/index.js",
+	"files": [
+		"harmony",
+		"README.md",
+		"lib/commonjs",
+		"lib/module",
+		"lib/typescript",
+		"src",
+		"react-native-blurhash.podspec"
+	],
+	"scripts": {
+		"lint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"",
+		"build": "bob build",
+		"release": "release-it"
+	},
+	"repository": "https://github.com/mrousavy/react-native-blurhash",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"keywords": [
+		"react-native",
+		"blurhash",
+		"image",
+		"ui",
+		"ux",
+		"component",
+		"loading",
+		"placeholder",
+		"harmony"
+	],
+	"author": {
+		"name": "Marc Rousavy",
+		"email": "marcrousavy@hotmail.com"
+	},
+	"license": "MIT",
+	"licenseFilename": "LICENSE",
+	"readmeFilename": "README.md",
+	"peerDependencies": {
+		"react": ">=16.8.1",
+		"react-native": ">=0.60.0-rc.0 <1.0.x"
+	},
+	"devDependencies": {
+		"@react-native-community/eslint-config": "^3.2.0",
+		"@react-native-community/eslint-plugin": "^1.3.0",
+		"@release-it/conventional-changelog": "^4.1.0",
+		"@types/react": "^18.2.6",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-react-native": "^4.1.0",
+		"prettier": "^3.2.4",
+		"react": "^18.2.0",
+		"react-native": "^0.73.2",
+		"react-native-builder-bob": "^0.18.2",
+		"release-it": "^14.12.4",
+		"typescript": "^5.0.4"
+	},
+	"react-native-builder-bob": {
+		"source": "harmony",
+		"output": "lib",
+		"targets": [
+			"commonjs",
+			"module",
+			[
+				"typescript",
+				{
+					"project": "tsconfig.build.json"
+				}
+			]
+		]
+	},
+	"release-it": {
+		"git": {
+			"commitMessage": "chore: release ${version}",
+			"tagName": "v${version}"
+		},
+		"npm": {
+			"publish": true
+		},
+		"github": {
+			"release": true
+		},
+		"plugins": {
+			"@release-it/conventional-changelog": {
+				"preset": "angular"
+			}
+		}
+	},
+	"eslintIgnore": [
+		"node_modules/",
+		"lib/"
+	],
+	"codegenConfig": {
+		"name": "blurhash_codegen",
+		"type": "all",
+		"jsSrcsDir": "./src/specs",
+		"android": {
+			"javaPackageName": "com.mrousavy.blurhash"
+		}
+	},
+	"harmony":{
+		"alias": "react-native-blurhash"
+	},
+	"packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
+}

package/react-native-blurhash.podspec

@@ -0,0 +1,34 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-blurhash"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.description  = <<-DESC
+                  react-native-blurhash
+                   DESC
+  s.homepage     = "https://github.com/mrousavy/react-native-blurhash"
+  # brief license entry:
+  s.license      = "MIT"
+  # optional - use expanded license entry instead:
+  # s.license    = { :type => "MIT", :file => "LICENSE" }
+  s.authors      = { "Marc Rousavy" => "marcrousavy@hotmail.com" }
+  s.ios.deployment_target = '9.0'
+  s.tvos.deployment_target = '9.0'
+  s.source       = { :git => "https://github.com/mrousavy/react-native-blurhash.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,c,m,mm,swift}"
+
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
+
+  s.swift_version = "5.0"
+
+  if defined?(install_modules_dependencies()) != nil
+    install_modules_dependencies(s);
+  else
+    s.dependency "React-Core"
+  end
+end
+

package/src/index.tsx

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { Platform, type NativeSyntheticEvent, type ViewProps } from 'react-native';
+import NativeBlurhashModule from './specs/NativeBlurhashModule';
+import NativeBlurhashView from './specs/NativeBlurhashView';
+import { decode83, decodeDC, isBlurhashValid, type RGB } from './utils';
+
+export interface BlurhashProps extends Omit<ViewProps, 'children'> {
+	/**
+	 * The blurhash string to use. Example: `LGFFaXYk^6#M@-5c,1J5@[or[Q6`.
+	 */
+	blurhash: string;
+	/**
+	 * The width (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`.
+	 * @default 32
+	 */
+	decodeWidth?: number;
+	/**
+	 * The height (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`.
+	 * @default 32
+	 */
+	decodeHeight?: number;
+	/**
+	 * Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders.
+	 * @default 1.0
+	 */
+	decodePunch?: number;
+	/**
+	 * Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread.
+	 * Read the [performance documentation](https://github.com/mrousavy/react-native-blurhash#performance)
+	 * before enabling this.
+	 * @default false
+	 */
+	decodeAsync?: boolean;
+	/**
+	 * Adjusts the resize mode of the image.
+	 * @default 'cover'
+	 */
+	resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
+
+	/**
+	 * Emitted when the Blurhash received new parameters and started to decode the given `blurhash` string.
+	 */
+	onLoadStart?: () => void;
+
+	/**
+	 * Emitted when the Blurhash successfully decoded the given `blurhash` string and rendered the image to the `<Blurhash>` view.
+	 */
+	onLoadEnd?: () => void;
+
+	/**
+	 * Emitted when the Blurhash failed to decode/load.
+	 */
+	onLoadError?: (message?: string) => void;
+}
+
+export class Blurhash extends React.PureComponent<BlurhashProps> {
+	static displayName = 'Blurhash';
+
+	constructor(props: BlurhashProps) {
+		super(props);
+		this._onLoadStart = this._onLoadStart.bind(this);
+		this._onLoadEnd = this._onLoadEnd.bind(this);
+		this._onLoadError = this._onLoadError.bind(this);
+	}
+
+	/**
+	 * Encodes the given image URI to a blurhash string
+	 * @param imageUri An URI to an Image parseable by the react native image loader
+	 * @param componentsX The number of X components
+	 * @param componentsY The number of Y components
+	 * @example
+	 * const blurhash = await Blurhash.encode('https://blurha.sh/assets/images/img2.jpg')
+	 */
+	static encode(imageUri: string, componentsX: number, componentsY: number): Promise<string> {
+		if (typeof imageUri !== 'string') throw new Error('imageUri must be a non-empty string!');
+		if (typeof componentsX !== 'number') throw new Error('componentsX must be a valid positive number!');
+		if (typeof componentsY !== 'number') throw new Error('componentsY must be a valid positive number!');
+
+		return NativeBlurhashModule.createBlurhashFromImage(imageUri, componentsX, componentsY);
+	}
+
+	/**
+	 * Gets the average color in a given blurhash string.
+	 *
+	 * This uses the JS blurhash decoder, so it might be slow.
+	 * @param blurhash The blurhash string
+	 * @example
+	 * const averageColor = Blurhash.getAverageColor(`LGFFaXYk^6#M@-5c,1J5@[or[Q6.`)
+	 */
+	static getAverageColor(blurhash: string): RGB | undefined {
+		if (blurhash == null || blurhash.length < 7) return undefined;
+
+		const value = decode83(blurhash.substring(2, 6));
+		return decodeDC(value);
+	}
+
+	/**
+	 * Clears the cosine cache and frees up memory.
+	 *
+	 * @platform Android
+	 * @see https://github.com/mrousavy/react-native-blurhash#cosine-operations
+	 */
+	static clearCosineCache(): void {
+		if (Platform.OS === 'android' || Platform.OS === 'harmony') NativeBlurhashModule.clearCosineCache();
+		else console.warn('Blurhash.clearCosineCache is only available on Android.');
+	}
+
+	/**
+	 * Verifies if the given blurhash is valid by checking it's type, length and size flag.
+	 *
+	 * This uses the JS blurhash decoder, so it might be slow.
+	 * @param blurhash The given blurhash string
+	 */
+	static isBlurhashValid(blurhash: string): ReturnType<typeof isBlurhashValid> {
+		return isBlurhashValid(blurhash);
+	}
+
+	_onLoadStart() {
+		if (this.props.onLoadStart != null) this.props.onLoadStart();
+	}
+	_onLoadEnd() {
+		if (this.props.onLoadEnd != null) this.props.onLoadEnd();
+	}
+	_onLoadError(event?: NativeSyntheticEvent<{ message?: string }>) {
+		if (this.props.onLoadError != null) this.props.onLoadError(event?.nativeEvent?.message);
+	}
+
+	render() {
+		return <NativeBlurhashView {...this.props} onLoadStart={this._onLoadStart} onLoadEnd={this._onLoadEnd} onLoadError={this._onLoadError} />;
+	}
+}

package/src/specs/NativeBlurhashModule.ts

@@ -0,0 +1,9 @@
+import { type TurboModule, TurboModuleRegistry } from 'react-native';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Spec extends TurboModule {
+	createBlurhashFromImage: (imageUri: string, componentsX: Int32, componentsY: Int32) => Promise<string>;
+	clearCosineCache: () => void;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('BlurhashModule');

package/src/specs/NativeBlurhashView.ts

@@ -0,0 +1,19 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps } from 'react-native';
+
+type OnLoadErrorEvent = { message?: string };
+
+interface NativeProps extends ViewProps {
+	blurhash: string;
+	decodeWidth?: WithDefault<Int32, 32>;
+	decodeHeight?: WithDefault<Int32, 32>;
+	decodePunch?: WithDefault<Double, 1>;
+	decodeAsync?: WithDefault<boolean, false>;
+	resizeMode?: WithDefault<'cover' | 'contain' | 'stretch' | 'center', 'cover'>;
+	onLoadStart?: DirectEventHandler<null>;
+	onLoadEnd?: DirectEventHandler<null>;
+	onLoadError?: DirectEventHandler<OnLoadErrorEvent>;
+}
+
+export default codegenNativeComponent<NativeProps>('BlurhashView');

package/src/utils.ts

@@ -0,0 +1,147 @@
+// Some functions from the Blurhash JS implementation that are used for light tasks (such as getting the average color or validating if a blurhash string is valid)
+
+export interface RGB {
+	/**
+	 * The Red value component of this RGB instance. Ranges from 0 to 255.
+	 */
+	r: number;
+	/**
+	 * The Green value component of this RGB instance. Ranges from 0 to 255.
+	 */
+	g: number;
+	/**
+	 * The Blue value component of this RGB instance. Ranges from 0 to 255.
+	 */
+	b: number;
+}
+
+function sRGBToLinear(value: number): number {
+	const v = value / 255;
+	if (v <= 0.04045) return v / 12.92;
+	else return Math.pow((v + 0.055) / 1.055, 2.4);
+}
+
+export function decodeDC(value: number): RGB {
+	const intR = value >> 16;
+	const intG = (value >> 8) & 255;
+	const intB = value & 255;
+	return { r: sRGBToLinear(intR) * 255, g: sRGBToLinear(intG) * 255, b: sRGBToLinear(intB) * 255 };
+}
+
+export function decode83(str: string): number {
+	let value = 0;
+	for (let i = 0; i < str.length; i++) {
+		const c = str[i];
+		const digit = digitCharacters.indexOf(c);
+		value = value * 83 + digit;
+	}
+	return value;
+}
+
+function validateBlurhash(blurhash: string): void {
+	if (!blurhash || blurhash.length < 6) throw new Error('The blurhash string must be at least 6 characters');
+
+	const sizeFlag = decode83(blurhash[0]);
+	const numY = Math.floor(sizeFlag / 9) + 1;
+	const numX = (sizeFlag % 9) + 1;
+
+	if (blurhash.length !== 4 + 2 * numX * numY)
+		throw new Error(`blurhash length mismatch: length is ${blurhash.length} but it should be ${4 + 2 * numX * numY}`);
+}
+
+export function isBlurhashValid(blurhash: string): { isValid: true } | { isValid: false; errorReason: string } {
+	try {
+		validateBlurhash(blurhash);
+	} catch (error) {
+		const message = error instanceof Error ? error.message : JSON.stringify(error);
+		return { isValid: false, errorReason: message };
+	}
+
+	return { isValid: true };
+}
+
+const digitCharacters = [
+	'0',
+	'1',
+	'2',
+	'3',
+	'4',
+	'5',
+	'6',
+	'7',
+	'8',
+	'9',
+	'A',
+	'B',
+	'C',
+	'D',
+	'E',
+	'F',
+	'G',
+	'H',
+	'I',
+	'J',
+	'K',
+	'L',
+	'M',
+	'N',
+	'O',
+	'P',
+	'Q',
+	'R',
+	'S',
+	'T',
+	'U',
+	'V',
+	'W',
+	'X',
+	'Y',
+	'Z',
+	'a',
+	'b',
+	'c',
+	'd',
+	'e',
+	'f',
+	'g',
+	'h',
+	'i',
+	'j',
+	'k',
+	'l',
+	'm',
+	'n',
+	'o',
+	'p',
+	'q',
+	'r',
+	's',
+	't',
+	'u',
+	'v',
+	'w',
+	'x',
+	'y',
+	'z',
+	'#',
+	'$',
+	'%',
+	'*',
+	'+',
+	',',
+	'-',
+	'.',
+	':',
+	';',
+	'=',
+	'?',
+	'@',
+	'[',
+	']',
+	'^',
+	'_',
+	'{',
+	'|',
+	'}',
+	'~',
+];