From 87bde4c7426c99fc33e9482494de4ce5df8d8913 Mon Sep 17 00:00:00 2001
From: Morten Olsen <morten@olsen.pro>
Date: Tue, 4 Sep 2018 15:32:27 +0200
Subject: [PATCH] fix: Enable additional tabs

---
 lib/package.json                             |  2 +-
 lib/src/components/DevTool/Console/Output.js |  2 +-
 lib/src/components/DevTool/Modal.js          |  4 +-
 lib/src/components/DevTool/Tab.js            | 53 ++++++++++++++------
 lib/src/components/DevTool/index.js          |  4 +-
 5 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/lib/package.json b/lib/package.json
index 99deddb..dd205df 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-console",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "main": "src/index.js",
   "repository": {
     "url": "https://github.com/morten-olsen/react-native-debugger"
diff --git a/lib/src/components/DevTool/Console/Output.js b/lib/src/components/DevTool/Console/Output.js
index 5d040ce..3b6b5e0 100644
--- a/lib/src/components/DevTool/Console/Output.js
+++ b/lib/src/components/DevTool/Console/Output.js
@@ -68,7 +68,7 @@ const formatData = (data, options) => {
           theme={theme}
           data={{
             message: data.toString(),
-            stackTrace: data.stack.toString(),
+            stackTrace: data.stack ? data.stack.toString() : undefined,
           }}
         />
       );
diff --git a/lib/src/components/DevTool/Modal.js b/lib/src/components/DevTool/Modal.js
index 626ab73..f682a29 100644
--- a/lib/src/components/DevTool/Modal.js
+++ b/lib/src/components/DevTool/Modal.js
@@ -42,7 +42,7 @@ class Events extends Component {
 
   render() {
     const {
-      includeStackTrace,
+      ...others,
     } = this.props;
 
     return (
@@ -63,7 +63,7 @@ class Events extends Component {
             enabled
           >
             <DevTool
-              includeStackTrace={includeStackTrace}
+              {...others}
               onClose={() => {
                 events.publish('HIDE_DEVTOOLS');
               }}
diff --git a/lib/src/components/DevTool/Tab.js b/lib/src/components/DevTool/Tab.js
index 2e65930..ff31869 100644
--- a/lib/src/components/DevTool/Tab.js
+++ b/lib/src/components/DevTool/Tab.js
@@ -41,9 +41,30 @@ const Button = styled.TouchableOpacity`
   padding: 10px 20px 10px 0;
 `;
 
+const TabScroll = styled.ScrollView`
+  flex: 1;
+  border-right-width: 1px;
+  border-color: #ccc;
+  margin-right: 20px;
+`;
+
+const TabWrapper = styled.View`
+  flex-direction: row;
+`;
+
+const Header = styled.View`
+  flex-direction: row;
+`;
+
+const Tab = styled.TouchableOpacity`
+  align-items: center;
+  justify-content: center;
+  padding: 10px 20px;
+  flex: 1;
+`
+
 const Console = ({
   tabs,
-  buttons = [],
   onClose,
   onDownload,
 }) => (
@@ -55,18 +76,22 @@ const Console = ({
     >
     {({ active }, setState) => (
       <Fragment>
-        <View style={styles.tabs}>
-          {tabs.map(({ name }, i) => (
-            <TouchableOpacity
-              key={name}
-              style={active === i ? styles.tabActive : styles.tabInactive}
-              onPress={() => {
-                setState({ active: i });
-              }}
-            >
-              <Text>{name}</Text>
-            </TouchableOpacity>
-          ))}
+        <Header>
+          <TabScroll horizontal>
+            <TabWrapper>
+              {tabs.map(({ name }, i) => (
+                <Tab
+                  key={name}
+                  style={active === i ? styles.tabActive : styles.tabInactive}
+                  onPress={() => {
+                    setState({ active: i });
+                  }}
+                >
+                  <Text>{name}</Text>
+                </Tab>
+              ))}
+            </TabWrapper>
+          </TabScroll>
           {onDownload && (
             <Button
               onPress={onDownload}
@@ -81,7 +106,7 @@ const Console = ({
               <Icon name="close" />
             </Button>
           )}
-        </View>
+        </Header>
         {tabs[active] && tabs[active].view}
       </Fragment>
     )}
diff --git a/lib/src/components/DevTool/index.js b/lib/src/components/DevTool/index.js
index e0fa705..d1d971e 100644
--- a/lib/src/components/DevTool/index.js
+++ b/lib/src/components/DevTool/index.js
@@ -25,7 +25,7 @@ const DevTool = ({
   showNetwork = true,
   showStorage = true,
   showConsole = true,
-  additionTools = [],
+  additionalTools = [],
 }) => {
   const views = [];
 
@@ -52,7 +52,7 @@ const DevTool = ({
     });
   }
 
-  additionTools.forEach(tool => {
+  additionalTools.forEach(tool => {
     views.push(tool);
   });