Bugfix/crash app (#2)

* fixes

* include react-dom

* remove peer dependencies

* wip

* path resolver

* add resolutions

* test

Author: Marcoo09

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-vimeo-iframe",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "homepage": "https://github.com/MetaLabs-inc/react-native-vimeo-iframe#readme",
   "main": "src/index.tsx",
@@ -16,11 +16,6 @@
     "prepare": "yarn compile",
     "test": "jest"
   },
-  "dependencies": {
-    "react": "^17.0.1",
-    "react-native": "^0.63.4",
-    "react-native-webview": "11.2.3"
-  },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.12.5",
@@ -39,8 +34,8 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "react-native": "^0.63.4",
+    "react-native-webview": "11.2.3"
   },
   "jest": {
     "preset": "react-native",

src/index.tsx

@@ -1,8 +1,9 @@
-import React, {useCallback, useEffect, useState} from 'react';
-import {TouchableWithoutFeedback} from 'react-native';
-import {WebView} from 'react-native-webview';
-import webplayer from './template';
-import {LayoutProps} from './types';
+import React from 'react'
+import { TouchableWithoutFeedback } from 'react-native'
+import { WebView } from 'react-native-webview'
+
+import webplayer from './template'
+import { LayoutProps } from './types'
 
 export const Vimeo: React.FC<LayoutProps> = ({
   videoId,
@@ -18,49 +19,49 @@ export const Vimeo: React.FC<LayoutProps> = ({
   speed = false,
   style,
 }) => {
-  const [isReady, setReady] = useState<boolean>();
+  const [isReady, setReady] = React.useState<boolean>()
 
-  const [autoPlayValue, setAutoPlay] = useState<boolean>(autoPlay);
-  const toggleAutoPlay = useCallback(() => setAutoPlay(!autoPlayValue), [
+  const [autoPlayValue, setAutoPlay] = React.useState<boolean>(autoPlay)
+  const toggleAutoPlay = React.useCallback(() => setAutoPlay(!autoPlayValue), [
     autoPlayValue,
-  ]);
+  ])
 
-  const handlers: any = {};
+  const handlers: any = {}
   const registerHandlers = () => {
-    registerBridgeEventHandler('ready', onReady ?? onReadyDefault);
-    registerBridgeEventHandler('play', onPlay);
-    registerBridgeEventHandler('playProgress', onPlayProgress);
-    registerBridgeEventHandler('pause', onPause);
-    registerBridgeEventHandler('finish', onFinish);
-  };
+    registerBridgeEventHandler('ready', onReady ?? onReadyDefault)
+    registerBridgeEventHandler('play', onPlay)
+    registerBridgeEventHandler('playProgress', onPlayProgress)
+    registerBridgeEventHandler('pause', onPause)
+    registerBridgeEventHandler('finish', onFinish)
+  }
 
   const registerBridgeEventHandler = (eventName: string, handler: any) => {
-    handlers[eventName] = handler;
-  };
+    handlers[eventName] = handler
+  }
 
-  useEffect(() => {
-    registerHandlers();
-  }, [videoId, scalesPageToFit]);
+  React.useEffect(() => {
+    registerHandlers()
+  }, [videoId, scalesPageToFit])
 
   const onBridgeMessage = (event: any) => {
-    const message = event.nativeEvent.data;
-    let payload;
+    const message = event.nativeEvent.data
+    let payload
     try {
-      payload = JSON.parse(message);
+      payload = JSON.parse(message)
       if (payload?.name === 'finish') {
-        toggleAutoPlay();
+        toggleAutoPlay()
       }
     } catch (err) {
-      return;
+      return
     }
-    let handler = handlers[payload.name];
-    if (handler) handler(payload.data);
-  };
+    let handler = handlers[payload.name]
+    if (handler) handler(payload.data)
+  }
 
   const onReadyDefault = () => {
-    setReady(true);
-    if (onReady) setTimeout(onReady);
-  };
+    setReady(true)
+    if (onReady) setTimeout(onReady)
+  }
 
   return (
     <TouchableWithoutFeedback onPress={toggleAutoPlay}>
@@ -82,5 +83,5 @@ export const Vimeo: React.FC<LayoutProps> = ({
         ]}
       />
     </TouchableWithoutFeedback>
-  );
-};
+  )
+}

tsconfig.json

@@ -12,6 +12,6 @@
     "strict": true,
     "target": "ESNext"
   },
-  "exclude": ["**/__tests__/*"],
-  "include": ["src"]
+  "exclude": [],
+  "include": ["src/index.tsx", "src/template", "src/types.ts"]
 }