WIP|Implement for react-native-web

example/.gitignore

@@ -57,3 +57,6 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# Expo
+.expo/

example/index.js

@@ -2,8 +2,14 @@
  * @format
  */
 
-import { AppRegistry } from 'react-native';
+import { AppRegistry, Platform } from 'react-native';
 import App from './App';
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
+
+if (Platform.OS === 'web') {
+ AppRegistry.runApplication(appName, {
+ rootTag: document.getElementById('root'),
+ });
+}

example/ios/Podfile

@@ -1,9 +1,14 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
+use_modular_headers!
+
 platform :ios, '10.0'
 target 'example' do
  # Pods for example
+ pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec', :modular_headers => false
+ pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec', :modular_headers => false
+ pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec', :modular_headers => false
  target 'exampleTests' do
  inherit! :complete
  # Pods for testing

example/ios/Podfile.lock

@@ -236,8 +236,8 @@ PODS:
  - React-cxxreact (= 0.63.1)
  - React-jsi (= 0.63.1)
  - React-jsinspector (0.63.1)
- - react-native-blurhash (1.0.29):
- - React
+ - react-native-blurhash (1.1.4):
+ - React-Core
  - React-RCTActionSheet (0.63.1):
  - React-Core/RCTActionSheetHeaders (= 0.63.1)
  - React-RCTAnimation (0.63.1):
@@ -450,7 +450,7 @@ SPEC CHECKSUMS:
  React-jsi: b32a31da32e030f30bbf9a8d3a9c8325df9e793f
  React-jsiexecutor: 7ab9cdcdd18d57652fb041f8a147fe9658d4e00a
  React-jsinspector: 2e28bb487e42dda6c94dbfa0c648d1343767a0fb
- react-native-blurhash: 90886ae897cafbbdf2773cb3654656bcb34e8f43
+ react-native-blurhash: ec98d751a9cb9075cef0b9e3188244c517d6ab22
  React-RCTActionSheet: 1702a1a85e550b5c36e2e03cb2bd3adea053de95
  React-RCTAnimation: ddda576010a878865a4eab83a78acd92176ef6a1
  React-RCTBlob: 34334384284c81577409d5205bd2b9ff594d8ab6
@@ -464,6 +464,6 @@ SPEC CHECKSUMS:
  Yoga: d5bd05a2b6b94c52323745c2c2b64557c8c66f64
  YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 6a759bd1b10fa49b7d7ab5dfa9a81d1d8edc3516
+PODFILE CHECKSUM: 8506680dfcf32aa1a80406d612d0d0de42e135c5
 
 COCOAPODS: 1.10.1

example/package.json

@@ -5,15 +5,20 @@
  "scripts": {
  "postinstall": "rm -rf node_modules/react-native-blurhash/node_modules",
  "android": "react-native run-android",
+ "web": "expo web",
  "ios": "react-native run-ios",
  "start": "react-native start",
  "test": "jest",
  "lint": "eslint --ext .js,.jsx,.ts,.tsx ."
  },
  "dependencies": {
+ "babel-preset-expo": "^8.2.1",
+ "expo": "^37.0.12",
  "react": "16.13.1",
+ "react-dom": "^17.0.1",
  "react-native": "0.63.1",
- "react-native-blurhash": "link:.."
+ "react-native-blurhash": "link:..",
+ "react-native-web": "^0.15.0"
  },
  "devDependencies": {
  "@babel/core": "^7.10.2",

package.json

@@ -24,6 +24,7 @@
  "scripts": {
  "lint": "eslint --ext .js,.jsx,.ts,.tsx .",
  "prepare": "bob build",
+ "prepare:dev": "nodemon --watch src/ --watch web/ --ext js,ts,tsx --exec \"yarn prepare\"",
  "release": "release-it"
  },
  "repository": {
@@ -65,6 +66,7 @@
  "eslint-config-prettier": "^7.2.0",
  "eslint-plugin-prettier": "^3.3.1",
  "eslint-plugin-react-native": "^3.10.0",
+ "nodemon": "^2.0.7",
  "prettier": "^2.2.0",
  "react-native-builder-bob": "^0.17.1",
  "release-it": "^14.4.1",
@@ -104,5 +106,8 @@
  "eslintIgnore": [
  "node_modules/",
  "lib/"
- ]
+ ],
+ "dependencies": {
+ "blurhash": "^1.1.3"
+ }
 }

src/blurhashModule.ts

@@ -0,0 +1,12 @@
+import { NativeModules, Platform } from 'react-native';
+const BlurhashModule: BlurhashModule = Platform.select({
+ web: null,
+ native: NativeModules.BlurhashModule,
+});
+
+type BlurhashModule = {
+ createBlurhashFromImage: (imageUri: string, componentsX: number, componentsY: number) => Promise<string>,
+ clearCosineCache: () => void
+};
+
+export default BlurhashModule;

src/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { requireNativeComponent, NativeModules, Platform, ViewProps, NativeSyntheticEvent } from 'react-native';
+import { requireNativeComponent, Platform, ViewProps, NativeSyntheticEvent } from 'react-native';
 import { decode83, decodeDC, isBlurhashValid, RGB } from './utils';
-
 // NativeModules automatically resolves 'BlurhashView' to 'BlurhashViewModule'
-const BlurhashModule = NativeModules.BlurhashView;
+import BlurhashModule from './blurhashModule';
 
 export interface BlurhashProps extends Omit<ViewProps, 'children'> {
  /**
@@ -123,7 +122,10 @@ export class Blurhash extends React.PureComponent<BlurhashProps> {
  if (this.props.onLoadEnd != null) this.props.onLoadEnd();
  }
  _onLoadError(event?: NativeSyntheticEvent<{ message?: string }>) {
- if (this.props.onLoadError != null) this.props.onLoadError(event?.nativeEvent?.message);
+ if (this.props.onLoadError != null) {
+ const message = event?.nativeEvent?.message; // TODO: Not sure how to get proper value here on web
+ this.props.onLoadError(message);
+ }
  }
 
  render() {
@@ -132,16 +134,14 @@ export class Blurhash extends React.PureComponent<BlurhashProps> {
  {...this.props}
  onLoadStart={this._onLoadStart}
  onLoadEnd={this._onLoadEnd}
- // @ts-expect-error
  onLoadError={this._onLoadError}
  />
  );
  }
 }
 
-// requireNativeComponent automatically resolves 'BlurhashView' to 'BlurhashViewManager'
-const NativeBlurhashView = requireNativeComponent<BlurhashProps>(
- 'BlurhashView',
- // @ts-expect-error this second argument is still not public, but probably required for TurboModules.
- Blurhash,
-);
+const NativeBlurhashView = Platform.OS === 'web' ? require('./web/blurhashView').default : requireNativeComponent<BlurhashProps>(
+ 'BlurhashView',
+ // @ts-expect-error this second argument is still not public, but probably required for TurboModules.
+ Blurhash,
+ );

src/web/blurhashView.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import BlurhashCanvas from './canvas';
+import type { BlurhashProps } from '../index';
+import { decode } from 'blurhash';
+
+interface BlurhashViewProps extends BlurhashProps {
+}
+
+export default function BlurhashView ({
+ blurhash,
+ decodeHeight = 128,
+ decodePunch,
+ decodeWidth = 128,
+ onLoadStart = () => null,
+ onLoadEnd = () => null,
+ onLoadError = () => null,
+ style,
+ ...rest
+}: BlurhashViewProps) {
+ const [decodedBlurhash, setDecodedBlurhash] = useState<null | Uint8ClampedArray>(null);
+ useEffect(() => {
+ try {
+ onLoadStart();
+ setDecodedBlurhash(decode(blurhash, decodeWidth, decodeHeight, decodePunch)); 
+ } catch (e) {
+ onLoadError(e);
+ }
+ }, [blurhash]);
+
+ return (
+ <View style={style}>
+ {decodedBlurhash ? <BlurhashCanvas
+ decodedBlurhash={decodedBlurhash}
+ height={decodeHeight}
+ onLoadEnd={onLoadEnd}
+ width={decodeWidth}
+ /> : null}
+ </View>
+ );
+};

src/web/canvas.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+
+export type Props = React.CanvasHTMLAttributes<HTMLCanvasElement> & {
+ getContext?: Function;
+ decodedBlurhash: Uint8ClampedArray;
+ height?: number;
+ onLoadEnd: Function;
+ punch?: number;
+ width?: number;
+};
+
+export default function BlurhashCanvas ({
+ // TODO: See how canvas handles unset width/height
+ decodedBlurhash,
+ height = 128,
+ onLoadEnd,
+ width = 128,
+ ...rest
+}: Props) {
+ const canvasRef = useCallback((canvas: Props) => {
+ if (!canvas) return;
+ const ctx = canvas.getContext && canvas.getContext('2d');
+ const imageData = ctx.createImageData(width, height);
+ imageData.data.set(decodedBlurhash);
+ ctx.putImageData(imageData, 0, 0);
+ onLoadEnd();
+ }, [decodedBlurhash]);
+
+ return <canvas {...rest} height={height} width={width} ref={canvasRef} />
+};