Added web support

lib/package.json

@@ -8,12 +8,12 @@
   "license": "MIT",
   "dependencies": {
     "react-native-json-tree": "^1.2.0",
-		"styled-components": "^4.3.1"
+    "styled-components": "^5.0.0-beta.8"
   },
   "peerDependencies": {
-		"prop-types": "^15.6.0",
-		"react": "^16.8.3",
-		"react-native": "^0.59.8"
+    "prop-types": "^15.6.0",
+    "react": "^16.8.3",
+    "react-native": "^0.59.8"
   },
   "devDependencies": {}
 }

lib/src/components/DevTool/Console/Output.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, createRef } from 'react';
 import styled from 'styled-components/native';
 import JSONTree from 'react-native-json-tree';
 import {
@@ -102,28 +102,32 @@ const Console = ({
   logs,
   includeStackTrace,
   filter = [],
-}) => (
-  <ScrollView
-    ref={ref => this.scrollView = ref}
-    onContentSizeChange={(contentWidth, contentHeight)=>{        
-        this.scrollView.scrollToEnd({animated: true});
-    }}
-  >
-    <Wrapper>
-      {logs.filter(l => filter.includes(l.type)).map((log, i) => (
-        <Row key={i}>
-          <Emphasis color={getColor(log.type)}>
-            {log.type}
-          </Emphasis>
-          <OutputList
-            items={log.data}
-            includeStackTrace={includeStackTrace}
-            color={getColor(log.type)}
-          />
-        </Row>
-      ))}
-    </Wrapper>
-  </ScrollView>
-);
+}) => {
+  // const ref = createRef();
+  return (
+    <ScrollView
+      onContentSizeChange={(contentWidth, contentHeight)=>{   
+        /*if (ref.current) {     
+          ref.current.scrollView.scrollToEnd({animated: true});
+        }*/
+      }}
+    >
+      <Wrapper>
+        {logs.filter(l => filter.includes(l.type)).map((log, i) => (
+          <Row key={i}>
+            <Emphasis color={getColor(log.type)}>
+              {log.type}
+            </Emphasis>
+            <OutputList
+              items={log.data}
+              includeStackTrace={includeStackTrace}
+              color={getColor(log.type)}
+            />
+          </Row>
+        ))}
+      </Wrapper>
+    </ScrollView>
+  );
+};
 
 export default Console;

lib/src/components/DevTool/Modal.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
 import {
-  Button,
-  Modal,
   SafeAreaView,
   KeyboardAvoidingView,
 } from 'react-native';
 import events from '../../events';
 import DevTool from './index';
+import Modal from '../base/Modal';
 
 
 class Events extends Component {

lib/src/components/base/Modal/index.js

@@ -0,0 +1,5 @@
+import {
+  Modal
+} from 'react-native';
+
+export default Modal;

lib/src/components/base/Modal/index.web.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  position: fixed;
+  background: #fff;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const Modal = ({
+  visible,
+  children
+}) => {
+  const [root, setRoot] = useState();
+  useEffect(() => {
+    const elm = document.createElement('div');
+    document.body.appendChild(elm);
+    setRoot(elm);
+  }, []);
+
+  const elm = visible ? (
+    <Wrapper>{children}</Wrapper>
+  ) : null;
+
+  if (!root) {
+    return null;
+  }
+
+  return createPortal(
+    elm,
+    root,
+  );
+};
+
+export default Modal;

lib/src/components/base/Toolbar/Selector.js

@@ -3,18 +3,15 @@ import {
   SafeAreaView,
   TouchableOpacity,
 } from 'react-native';
-import styled from 'styled-components/native';
 import State from '../../data/State';
 import Button from './Button';
 import Row from '../Row';
 import Icon from '../Icon';
+import Modal from '../Modal';
 import {
   Body,
 } from '../text';
 
-const Modal = styled.Modal`
-`;
-
 const Selector = ({
   multiSelect = false,
   onSelect,

lib/src/log.js

@@ -27,6 +27,9 @@ class Log {
   }
 
   log(type, data, keep) {
+    if (data && data[0] && data[0].indexOf && data[0].indexOf('Warning: Using the "className" prop on') === 0) {
+      return;
+    }
     const entry = {
       type,
       data,
@@ -68,9 +71,11 @@ class Log {
       debug: (...data) => this.debug(data, keep),
       verbose: (...data) => this.debug(data, keep),
     };
-    ErrorUtils.setGlobalHandler((err, fatal) => {
-      this.error([err], keep);
-    });
+    if (global.ErrorUtils) {
+      global.ErrorUtils.setGlobalHandler((err, fatal) => {
+        this.error([err], keep);
+      });
+    }
   }
 
   detach() {