fix: Enable additional tabs

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"

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,
           }}
         />
       );

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');
               }}

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>
     )}

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);
   });