Merge pull request Kureev#1 from Serraview/ts-migration

Migrate code to Typescript

.eslintrc

@@ -1,3 +1,9 @@
 {
-  "extends": "@react-native-community"
+  "extends": [
+    "plugin:react/recommended",
+    "@react-native-community",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ]
 }

.prettierrc

@@ -1,6 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "bracketSpacing": false,
+  "bracketSpacing": true,
   "jsxBracketSameLine": true
 }

package.json

@@ -23,17 +23,23 @@
   },
   "homepage": "https://github.com/react-native-community/react-native-blur",
   "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@typescript-eslint/parser": "^5.30.5",
     "prop-types": "^15.5.10"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^1.0.0",
-    "eslint": "^6.8.0",
+    "@types/react": "^18.0.15",
+    "@types/react-native": "^0.69.2",
+    "@types/react-test-renderer": "^18.0.0",
+    "eslint": "^8.19.0",
     "eslint-plugin-prettier": "^3.1.2",
     "husky": "^4.2.3",
     "lint-staged": "^10.1.2",
     "prettier": "2.0.4",
     "react": "16.13.1",
-    "react-native": "0.62.1"
+    "react-native": "0.62.1",
+    "typescript": "^4.7.4"
   },
   "husky": {
     "hooks": {

src/BlurView.android.tsx

@@ -0,0 +1,105 @@
+import React, { forwardRef, PropsWithChildren, useEffect } from 'react';
+import {
+  View,
+  requireNativeComponent,
+  DeviceEventEmitter,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+const OVERLAY_COLORS = {
+  light: 'rgba(255, 255, 255, 0.2)',
+  xlight: 'rgba(255, 255, 255, 0.75)',
+  dark: 'rgba(16, 12, 12, 0.64)',
+};
+
+export type BlurViewProps = PropsWithChildren &
+  ViewProps & {
+    blurAmount?: number;
+    blurType?: 'dark' | 'light' | 'xlight';
+    blurRadius?: number;
+    downsampleFactor?: number;
+    overlayColor?: string;
+  };
+
+const BlurView = forwardRef<View, BlurViewProps>(
+  ({
+    downsampleFactor,
+    blurRadius,
+    blurAmount = 10,
+    blurType = 'dark',
+    overlayColor,
+    children,
+    style,
+    ...rest
+  }) => {
+    useEffect(() => {
+      DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => {
+        throw new Error(`[ReactNativeBlur]: ${message}`);
+      });
+
+      return () => {
+        DeviceEventEmitter.removeAllListeners('ReactNativeBlurError');
+      };
+    }, []);
+
+    const getOverlayColor = () => {
+      if (overlayColor != null) {
+        return overlayColor;
+      }
+
+      return OVERLAY_COLORS[blurType] || OVERLAY_COLORS.dark;
+    };
+
+    const getBlurRadius = () => {
+      if (blurRadius != null) {
+        if (blurRadius > 25) {
+          throw new Error(
+            `[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})`,
+          );
+        }
+        return blurRadius;
+      }
+
+      // iOS seems to use a slightly different blurring algorithm (or scale?).
+      // Android blurRadius + downsampleFactor is approximately 80% of blurAmount.
+      const equivalentBlurRadius = Math.round(blurAmount * 0.8);
+
+      if (equivalentBlurRadius > 25) {
+        return 25;
+      }
+      return equivalentBlurRadius;
+    };
+
+    const getDownsampleFactor = () => {
+      if (downsampleFactor != null) {
+        return downsampleFactor;
+      }
+
+      return blurRadius;
+    };
+
+    return (
+      <NativeBlurView
+        {...rest}
+        blurRadius={getBlurRadius()}
+        downsampleFactor={getDownsampleFactor()}
+        overlayColor={getOverlayColor()}
+        blurAmount={blurAmount}
+        blurType={blurType}
+        pointerEvents="none"
+        style={StyleSheet.compose(styles.transparent, style)}>
+        {children}
+      </NativeBlurView>
+    );
+  },
+);
+
+const styles = StyleSheet.create<{ transparent: ViewStyle }>({
+  transparent: { backgroundColor: 'transparent' },
+});
+
+const NativeBlurView = requireNativeComponent<BlurViewProps>('BlurView');
+
+export default BlurView;

src/BlurView.ios.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import {
+  requireNativeComponent,
+  StyleSheet,
+  ViewProps,
+  ViewStyle,
+  View,
+} from 'react-native';
+
+type BlurType =
+  | 'dark'
+  | 'light'
+  | 'xlight'
+  | 'prominent'
+  | 'regular'
+  | 'extraDark'
+  | 'chromeMaterial'
+  | 'material'
+  | 'thickMaterial'
+  | 'thinMaterial'
+  | 'ultraThinMaterial'
+  | 'chromeMaterialDark'
+  | 'materialDark'
+  | 'thickMaterialDark'
+  | 'thinMaterialDark'
+  | 'ultraThinMaterialDark'
+  | 'chromeMaterialLight'
+  | 'materialLight'
+  | 'thickMaterialLight'
+  | 'thinMaterialLight'
+  | 'ultraThinMaterialLight';
+
+export type BlurViewProps = ViewProps & {
+  blurType?: BlurType;
+  blurAmount?: number;
+};
+
+const BlurView = forwardRef<View, BlurViewProps>(
+  ({ blurType = 'dark', blurAmount = 10, style, ...rest }, ref) => (
+    <NativeBlurView
+      ref={ref}
+      style={StyleSheet.compose(styles.transparent, style)}
+      blurType={blurType}
+      blurAmount={blurAmount}
+      {...rest}
+    />
+  ),
+);
+
+const styles = StyleSheet.create<{ transparent: ViewStyle }>({
+  transparent: { backgroundColor: 'transparent' },
+});
+
+const NativeBlurView = requireNativeComponent<BlurViewProps>('BlurView');
+
+export default BlurView;

src/VibrancyView.android.js → src/VibrancyView.android.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 class VibrancyView extends React.Component {
   render() {
     console.error('VibrancyView is not implemented on Android');
+    return null;
   }
 }
 
-module.exports = VibrancyView;
+export default VibrancyView;