@draftbit/core 46.8.2-bdb2fb.2 → 46.8.2-cd657e.2

package/lib/commonjs/components/TabView/TabView.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
 var _reactNativeTabView = require("react-native-tab-view");
-var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
 var _theming = require("../../theming");
 var _utilities = require("../../utilities");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -40,11 +37,17 @@ const TabViewComponent = _ref => {
     viewStyles
   } = (0, _utilities.extractStyles)(style);
 
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = object => {
+    return "title" in object;
+  };
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
     const scenes = {};
-    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -82,7 +85,7 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 36
+          size: 16
         }) : null;
       },
       style: {
@@ -90,8 +93,13 @@ const TabViewComponent = _ref => {
       }
     }));
   };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
-    style: [styles.tabView, viewStyles],
+    style: [viewStyles],
     navigationState: {
       index,
       routes
@@ -104,10 +112,5 @@ const TabViewComponent = _ref => {
     swipeEnabled: swipeEnabled
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  tabView: {
-    flex: 1
-  }
-});
 var _default = (0, _theming.withTheme)(TabViewComponent);
 exports.default = _default;

package/lib/commonjs/mappings/TabView.js

@@ -11,9 +11,6 @@ const SEED_DATA = {
   description: "Tab view container",
   category: _types.COMPONENT_TYPES.swiper,
   stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Typography],
-  layout: {
-    flex: 1
-  },
   triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
   props: {
     onIndexChanged: (0, _types.createActionProp)({
@@ -42,7 +39,7 @@ const SEED_DATA = {
       defaultValue: true
     }),
     scrollEnabled: (0, _types.createStaticBoolProp)({
-      label: "Scroll Enabled",
+      label: "Tab Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
       defaultValue: false
     }),

package/lib/module/components/Portal/PortalManager.js

@@ -1,3 +1,6 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 /**
@@ -6,47 +9,18 @@ import { View, StyleSheet } from "react-native";
 export default class PortalManager extends React.PureComponent {
   constructor() {
     super(...arguments);
-    this.state = {
+    _defineProperty(this, "state", {
       portals: []
-    };
-    this.mount = (key, children) => {
+    });
+    _defineProperty(this, "mount", (key, children) => {
       this.setState(state => ({
         portals: [...state.portals, {
           key,
           children
         }]
       }));
-    };
-    this.update = (key, children) => this.setState(state => ({
-      portals: state.portals.map(item => {
-        if (item.key === key) {
-          return {
-            ...item,
-            children
-          };
-        }
-        return item;
-      })
-    }));
-    this.unmount = key => this.setState(state => ({
-      portals: state.portals.filter(item => item.key !== key)
-    }));
-  }
-  render() {
-    return this.state.portals.map(_ref => {
-      let {
-        key,
-        children
-      } = _ref;
-      return /*#__PURE__*/React.createElement(View, {
-        key: key,
-        collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */,
-        pointerEvents: "box-none",
-        style: StyleSheet.absoluteFill
-      }, children);
     });
-  }
-}ey, children) => this.setState(state => ({
+    _defineProperty(this, "update", (key, children) => this.setState(state => ({
       portals: state.portals.map(item => {
         if (item.key === key) {
           return {

package/lib/module/components/TabView/TabView.js

@@ -1,8 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
-import { StyleSheet } from "react-native";
 import { TabView, TabBar, SceneMap } from "react-native-tab-view";
-import TabViewItem from "./TabViewItem";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
 const TabViewComponent = _ref => {
@@ -31,11 +29,17 @@ const TabViewComponent = _ref => {
     viewStyles
   } = extractStyles(style);
 
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = object => {
+    return "title" in object;
+  };
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
     const scenes = {};
-    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -73,7 +77,7 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 36
+          size: 16
         }) : null;
       },
       style: {
@@ -81,8 +85,13 @@ const TabViewComponent = _ref => {
       }
     }));
   };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(TabView, {
-    style: [styles.tabView, viewStyles],
+    style: [viewStyles],
     navigationState: {
       index,
       routes
@@ -95,9 +104,4 @@ const TabViewComponent = _ref => {
     swipeEnabled: swipeEnabled
   });
 };
-const styles = StyleSheet.create({
-  tabView: {
-    flex: 1
-  }
-});
 export default withTheme(TabViewComponent);

package/lib/module/constants.js

@@ -6,4 +6,5 @@ const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo !== null && expo !== void 0 && expo.C
 export const APPROX_STATUSBAR_HEIGHT = Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
+});O : 0
 });

package/lib/module/mappings/TabView.js

@@ -5,9 +5,6 @@ export const SEED_DATA = {
   description: "Tab view container",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Effects, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Typography],
-  layout: {
-    flex: 1
-  },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({
@@ -36,7 +33,7 @@ export const SEED_DATA = {
       defaultValue: true
     }),
     scrollEnabled: createStaticBoolProp({
-      label: "Scroll Enabled",
+      label: "Tab Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
       defaultValue: false
     }),

package/lib/typescript/src/components/TabView/TabView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,cAAc,CAAC;AAWhE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AAmGb,wBAA2C"}
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAMvD,aAAK,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AACvC,aAAK,mBAAmB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvD,aAAK,YAAY,GAAG;IAClB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,QAAQ,CAAC;;;;AA6Gb,wBAA2C"}

package/lib/typescript/src/components/TabView/TabViewItem.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-interface TabViewItemProps {
+export interface TabViewItemProps {
     title: string;
     icon?: string;
     accessibilityLabel?: string;

package/lib/typescript/src/components/TabView/TabViewItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAKpE,CAAC;AAQF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/TabView/TabViewItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAC;AAGtE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAKpE,CAAC;AAQF,eAAe,WAAW,CAAC"}

package/lib/typescript/src/mappings/TabView.d.ts

@@ -4,9 +4,6 @@ export declare const SEED_DATA: {
     description: string;
     category: string;
     stylesPanelSections: string[];
-    layout: {
-        flex: number;
-    };
     triggers: string[];
     props: {
         onIndexChanged: {

package/lib/typescript/src/mappings/TabView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ErB,CAAC"}
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabView.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyErB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.8.2-bdb2fb.2+bdb2fbd",
+  "version": "46.8.2-cd657e.2+cd657e6",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.8.2-bdb2fb.2+bdb2fbd",
+    "@draftbit/types": "^46.8.2-cd657e.2+cd657e6",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -94,5 +94,5 @@
       ]
     ]
   },
-  "gitHead": "bdb2fbd9d472a8abb0d9553ca73679456ab4aa40"
+  "gitHead": "cd657e600fbd295c13085b08e44baec83d54afa1"
 }

package/src/components/TabView/TabView.js

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { StyleSheet } from "react-native";
 import { TabView, TabBar, SceneMap, } from "react-native-tab-view";
-import TabViewItem from "./TabViewItem";
 import { withTheme } from "../../theming";
 import { extractStyles } from "../../utilities";
 const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition, keyboardDismissMode, swipeEnabled, scrollEnabled, activeColor, inactiveColor, pressColor, indicatorColor, tabsBackgroundColor, style, theme, children, }) => {
@@ -9,12 +7,17 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
     const [routes, setRoutes] = React.useState([]);
     const [tabScenes, setTabScenes] = React.useState({});
     const { textStyles, viewStyles } = extractStyles(style);
+    //Check type of child using props
+    //Regular '.type' cannot work because Draftbit strips the type in Draft view
+    const instanceOfTabViewItemProps = (object) => {
+        return "title" in object;
+    };
     //Populate routes and scenes based on children
     React.useEffect(() => {
         const newRoutes = [];
         const scenes = {};
         React.Children.toArray(children)
-            .filter((child) => React.isValidElement(child) && child.type === TabViewItem)
+            .filter((child) => React.isValidElement(child) && instanceOfTabViewItemProps(child.props))
             .forEach((item, idx) => {
             const child = item;
             newRoutes.push({
@@ -38,13 +41,14 @@ const TabViewComponent = ({ Icon, onIndexChanged, onEndReached, tabBarPosition,
     const renderTabBar = (props) => {
         return (React.createElement(TabBar, { ...props, activeColor: activeColor || theme.colors.primary, inactiveColor: inactiveColor || theme.colors.divider, pressColor: pressColor || theme.colors.primary, scrollEnabled: scrollEnabled, indicatorStyle: {
                 backgroundColor: indicatorColor || theme.colors.primary,
-            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: {
+            }, labelStyle: textStyles, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 16 })) : null, style: {
                 backgroundColor: tabsBackgroundColor || theme.colors.background,
             } }));
     };
-    return (React.createElement(TabView, { style: [styles.tabView, viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+    //Cannot render TabView without at least one tab
+    if (!routes.length) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(TabView, { style: [viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
 };
-const styles = StyleSheet.create({
-    tabView: { flex: 1 },
-});
 export default withTheme(TabViewComponent);

package/src/components/TabView/TabView.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+import { StyleProp, ViewStyle } from "react-native";
 import {
   TabView,
   TabBar,
@@ -9,7 +9,7 @@ import {
   Route,
 } from "react-native-tab-view";
 
-import TabViewItem from "./TabViewItem";
+import { TabViewItemProps } from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
@@ -60,6 +60,14 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 
   const { textStyles, viewStyles } = extractStyles(style);
 
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = (
+    object: any
+  ): object is TabViewItemProps => {
+    return "title" in object;
+  };
+
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
@@ -67,7 +75,8 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 
     React.Children.toArray(children)
       .filter(
-        (child) => React.isValidElement(child) && child.type === TabViewItem
+        (child) =>
+          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
       )
       .forEach((item: any, idx) => {
         const child = item as React.ReactElement;
@@ -106,7 +115,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
         labelStyle={textStyles}
         renderIcon={({ route, color }) =>
           route?.icon ? (
-            <Icon name={route.icon} color={color} size={36} />
+            <Icon name={route.icon} color={color} size={16} />
           ) : null
         }
         style={{
@@ -116,9 +125,14 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
     );
   };
 
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return <></>;
+  }
+
   return (
     <TabView
-      style={[styles.tabView, viewStyles]}
+      style={[viewStyles]}
       navigationState={{ index, routes }}
       renderScene={SceneMap(tabScenes)}
       renderTabBar={renderTabBar}
@@ -130,8 +144,4 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  tabView: { flex: 1 },
-});
-
 export default withTheme(TabViewComponent);

package/src/components/TabView/TabViewItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleProp, ViewStyle, StyleSheet, View } from "react-native";
 
 //Props used by parent (TabView) to create tabs
-interface TabViewItemProps {
+export interface TabViewItemProps {
   title: string;
   icon?: string;
   accessibilityLabel?: string;

package/src/mappings/TabView.js

@@ -13,7 +13,6 @@ export const SEED_DATA = {
         StylesPanelSections.Background,
         StylesPanelSections.Typography,
     ],
-    layout: { flex: 1 },
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {
         onIndexChanged: createActionProp({
@@ -42,7 +41,7 @@ export const SEED_DATA = {
             defaultValue: true,
         }),
         scrollEnabled: createStaticBoolProp({
-            label: "Scroll Enabled",
+            label: "Tab Scroll Enabled",
             description: "Whether scrolling of tabs is enabled or not",
             defaultValue: false,
         }),

package/src/mappings/TabView.ts

@@ -23,7 +23,6 @@ export const SEED_DATA = {
     StylesPanelSections.Background,
     StylesPanelSections.Typography,
   ],
-  layout: { flex: 1 },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({
@@ -52,7 +51,7 @@ export const SEED_DATA = {
       defaultValue: true,
     }),
     scrollEnabled: createStaticBoolProp({
-      label: "Scroll Enabled",
+      label: "Tab Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
       defaultValue: false,
     }),