Merge pull request #12 from idrisssakhi/BLUR-TS-ISSUE

resolve ts issue

package.json

@@ -1,7 +1,7 @@
 
 {
   "name": "rn-id-blurview",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "React Native light Blured component",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/BlurView.android.tsx → src/Views/BlurView.android.tsx

@@ -4,8 +4,8 @@ import {
   DeviceEventEmitter,
   StyleSheet,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { styles } from './BlurView.style';
 
 const OVERLAY_COLORS = {
   light: 'rgba(255, 255, 255, 0.2)',
@@ -26,7 +26,7 @@ interface AndroidProps extends ViewProps {
   overlayColor?: string;
 }
 
-export const BlurView = ({ blurRadius, blurAmount, blurType, overlayColor, downsampleFactor, ...nativeProps}: PropsWithChildren<AndroidProps>) => {
+const BlurView = ({ blurRadius, blurAmount, blurType, overlayColor, downsampleFactor, ...nativeProps}: PropsWithChildren<AndroidProps>) => {
   const calclatedBlurType: AndroidBlurType = ['light', 'xlight', 'dark'].includes(blurType) ? blurType as AndroidBlurType : 'dark';
 
   useEffect(() => {
@@ -90,14 +90,16 @@ export const BlurView = ({ blurRadius, blurAmount, blurType, overlayColor, downs
   );
 }
 
+const styles = StyleSheet.create<{transparent: ViewStyle}>({
+  transparent: {backgroundColor: 'transparent'},
+});
+
 BlurView.defaultProps = {
   blurType: 'dark',
   blurAmount: 10,
 };
 
 // requireNativeComponent automatically resolves 'BlurView' to 'BlurViewManager'
-const NativeBlurView = requireNativeComponent<AndroidProps>(
-  'BlurView',
-  // @ts-expect-error because the type declarations are kinda wrong, no?
-  BlurView,
-);
+const NativeBlurView = requireNativeComponent<AndroidProps>('BlurView');
+
+export default BlurView;

src/BlurView.ios.tsx → src/Views/BlurView.ios.tsx

@@ -1,22 +1,24 @@
 import React from 'react'
-import { requireNativeComponent, StyleSheet } from 'react-native';
-import { styles } from './BlurView.style';
-import type { BlurViewProperties } from './types';
+import { requireNativeComponent, StyleSheet, ViewStyle } from 'react-native';
 
-export const BlurView = (props: BlurViewProperties) => {
+import type { BlurViewProperties } from '../types';
+
+const BlurView = (props: BlurViewProperties) => {
   return (
     <NativeBlurView style={StyleSheet.compose(styles.transparent, props?.style)} {...props} />
   );
 };
 
+const styles = StyleSheet.create<{transparent: ViewStyle}>({
+  transparent: {backgroundColor: 'transparent'},
+});
+
 BlurView.defaultProps = {
   blurType: 'dark',
   blurAmount: 10,
 };
 
 // requireNativeComponent automatically resolves 'BlurView' to 'BlurViewManager'
-const NativeBlurView = requireNativeComponent<BlurViewProperties>(
-  'BlurView',
-  // @ts-expect-error because the type declarations are kinda wrong, no?
-  BlurView,
-);
+const NativeBlurView = requireNativeComponent<BlurViewProperties>('BlurView');
+
+export default BlurView;

src/index.ts

@@ -1,2 +1,9 @@
-export * from './BlurView';
-export * from './types';
+import type { View } from 'react-native';
+//@ts-ignore
+import NativeBlurView from './Views/BlurView';
+import type { BlurViewProperties } from './types';
+
+const BlurView = NativeBlurView as React.ComponentType<BlurViewProperties & React.RefAttributes<View>>;
+
+export { BlurView };
+export type { BlurViewProperties };