@draftbit/core 46.8.2-e916bf.2 → 46.8.2-fad2ca.2

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

@@ -5,10 +5,10 @@ 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); }
@@ -33,22 +33,12 @@ const TabViewComponent = _ref => {
   const [index, setIndex] = React.useState(0);
   const [routes, setRoutes] = React.useState([]);
   const [tabScenes, setTabScenes] = React.useState({});
-  const {
-    textStyles,
-    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) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -77,7 +67,6 @@ const TabViewComponent = _ref => {
       indicatorStyle: {
         backgroundColor: indicatorColor || theme.colors.primary
       },
-      labelStyle: textStyles,
       renderIcon: _ref2 => {
         let {
           route,
@@ -86,21 +75,15 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 16
+          size: 36
         }) : null;
       },
-      style: {
+      style: [{
         backgroundColor: tabsBackgroundColor || theme.colors.background
-      }
+      }, style]
     }));
   };
-
-  //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],
     navigationState: {
       index,
       routes
@@ -113,10 +96,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

@@ -10,10 +10,7 @@ const SEED_DATA = {
   tag: "TabView",
   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
-  },
+  stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
   triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
   props: {
     onIndexChanged: (0, _types.createActionProp)({
@@ -42,9 +39,9 @@ const SEED_DATA = {
       defaultValue: true
     }),
     scrollEnabled: (0, _types.createStaticBoolProp)({
-      label: "Tab Scroll Enabled",
+      label: "Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
-      defaultValue: false
+      defaultValue: true
     }),
     activeColor: (0, _types.createColorProp)({
       label: "Active Color",
@@ -58,9 +55,8 @@ const SEED_DATA = {
     }),
     pressColor: (0, _types.createColorProp)({
       label: "Press Color",
-      description: "Color of ripple when pressed",
-      defaultValue: "primary",
-      group: _types.GROUPS.android
+      description: "Color of ripple when pressed (android only)",
+      defaultValue: "primary"
     }),
     indicatorColor: (0, _types.createColorProp)({
       label: "Indicator Color",

package/lib/commonjs/mappings/TabViewItem.js

@@ -18,9 +18,8 @@ const SEED_DATA = {
     title: (0, _types.createTextProp)({
       label: "Title",
       description: "Title of tab item",
-      defaultValue: "Title",
-      required: true,
-      group: _types.GROUPS.basic
+      defaultValue: null,
+      required: true
     }),
     icon: (0, _types.createIconProp)({
       defaultValue: null,

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

@@ -1,9 +1,8 @@
 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 => {
   let {
     Icon,
@@ -25,22 +24,12 @@ const TabViewComponent = _ref => {
   const [index, setIndex] = React.useState(0);
   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 => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -69,7 +58,6 @@ const TabViewComponent = _ref => {
       indicatorStyle: {
         backgroundColor: indicatorColor || theme.colors.primary
       },
-      labelStyle: textStyles,
       renderIcon: _ref2 => {
         let {
           route,
@@ -78,21 +66,15 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 16
+          size: 36
         }) : null;
       },
-      style: {
+      style: [{
         backgroundColor: tabsBackgroundColor || theme.colors.background
-      }
+      }, style]
     }));
   };
-
-  //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],
     navigationState: {
       index,
       routes
@@ -105,9 +87,4 @@ const TabViewComponent = _ref => {
     swipeEnabled: swipeEnabled
   });
 };
-const styles = StyleSheet.create({
-  tabView: {
-    flex: 1
-  }
-});
 export default withTheme(TabViewComponent);

package/lib/module/mappings/TabView.js

@@ -1,13 +1,10 @@
-import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS } from "@draftbit/types";
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp } from "@draftbit/types";
 export const SEED_DATA = {
   name: "Tab View",
   tag: "TabView",
   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
-  },
+  stylesPanelSections: [...BLOCK_STYLES_SECTIONS, StylesPanelSections.Background],
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({
@@ -36,9 +33,9 @@ export const SEED_DATA = {
       defaultValue: true
     }),
     scrollEnabled: createStaticBoolProp({
-      label: "Tab Scroll Enabled",
+      label: "Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
-      defaultValue: false
+      defaultValue: true
     }),
     activeColor: createColorProp({
       label: "Active Color",
@@ -52,9 +49,8 @@ export const SEED_DATA = {
     }),
     pressColor: createColorProp({
       label: "Press Color",
-      description: "Color of ripple when pressed",
-      defaultValue: "primary",
-      group: GROUPS.android
+      description: "Color of ripple when pressed (android only)",
+      defaultValue: "primary"
     }),
     indicatorColor: createColorProp({
       label: "Indicator Color",

package/lib/module/mappings/TabViewItem.js

@@ -12,9 +12,8 @@ export const SEED_DATA = {
     title: createTextProp({
       label: "Title",
       description: "Title of tab item",
-      defaultValue: "Title",
-      required: true,
-      group: GROUPS.basic
+      defaultValue: null,
+      required: true
     }),
     icon: createIconProp({
       defaultValue: null,

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;;;;AAiHb,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;AAKvD,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;;;;AA4Fb,wBAA2C"}

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
-export interface TabViewItemProps {
+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,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"}
+{"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"}

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmErB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabViewItem.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CA6BrB,CAAC"}
+{"version":3,"file":"TabViewItem.d.ts","sourceRoot":"","sources":["../../../../src/mappings/TabViewItem.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CA4BrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.8.2-e916bf.2+e916bf3",
+  "version": "46.8.2-fad2ca.2+fad2cab",
   "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-e916bf.2+e916bf3",
+    "@draftbit/types": "^46.8.2-fad2ca.2+fad2cab",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -94,5 +94,5 @@
       ]
     ]
   },
-  "gitHead": "e916bf330335c3bd9d1a4bd1046b4f7a3bcd30fa"
+  "gitHead": "fad2cab35a2ed9e27dc7202ffaf988d41520cfc3"
 }

package/src/components/TabView/TabView.js

@@ -1,24 +1,17 @@
 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, }) => {
     const [index, setIndex] = React.useState(0);
     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) && instanceOfTabViewItemProps(child.props))
+            .filter((child) => React.isValidElement(child) && child.type === TabViewItem)
             .forEach((item, idx) => {
             const child = item;
             newRoutes.push({
@@ -42,17 +35,11 @@ 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: 16 })) : null, style: {
-                backgroundColor: tabsBackgroundColor || theme.colors.background,
-            } }));
+            }, renderIcon: ({ route, color }) => (route === null || route === void 0 ? void 0 : route.icon) ? (React.createElement(Icon, { name: route.icon, color: color, size: 36 })) : null, style: [
+                { backgroundColor: tabsBackgroundColor || theme.colors.background },
+                style,
+            ] }));
     };
-    //Cannot render TabView without at least one tab
-    if (!routes.length) {
-        return React.createElement(React.Fragment, null);
-    }
-    return (React.createElement(TabView, { style: [styles.tabView, viewStyles], navigationState: { index, routes }, renderScene: SceneMap(tabScenes), renderTabBar: renderTabBar, onIndexChange: indexChangeHandler, tabBarPosition: tabBarPosition, keyboardDismissMode: keyboardDismissMode, swipeEnabled: swipeEnabled }));
+    return (React.createElement(TabView, { 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,11 +9,10 @@ import {
   Route,
 } from "react-native-tab-view";
 
-import { TabViewItemProps } from "./TabViewItem";
+import TabViewItem from "./TabViewItem";
 import type { IconSlot } from "../../interfaces/Icon";
 import { withTheme } from "../../theming";
 import type { Theme } from "../../styles/DefaultTheme";
-import { extractStyles } from "../../utilities";
 
 type TabBarProps = SceneRendererProps & {
   navigationState: NavigationState<any>;
@@ -58,16 +57,6 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
   const [routes, setRoutes] = React.useState<Route[]>([]);
   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: any
-  ): object is TabViewItemProps => {
-    return "title" in object;
-  };
-
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes: Route[] = [];
@@ -75,8 +64,7 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
 
     React.Children.toArray(children)
       .filter(
-        (child) =>
-          React.isValidElement(child) && instanceOfTabViewItemProps(child.props)
+        (child) => React.isValidElement(child) && child.type === TabViewItem
       )
       .forEach((item: any, idx) => {
         const child = item as React.ReactElement;
@@ -112,27 +100,21 @@ const TabViewComponent: React.FC<React.PropsWithChildren<TabViewProps>> = ({
         indicatorStyle={{
           backgroundColor: indicatorColor || theme.colors.primary,
         }}
-        labelStyle={textStyles}
         renderIcon={({ route, color }) =>
           route?.icon ? (
-            <Icon name={route.icon} color={color} size={16} />
+            <Icon name={route.icon} color={color} size={36} />
           ) : null
         }
-        style={{
-          backgroundColor: tabsBackgroundColor || theme.colors.background,
-        }}
+        style={[
+          { backgroundColor: tabsBackgroundColor || theme.colors.background },
+          style,
+        ]}
       />
     );
   };
 
-  //Cannot render TabView without at least one tab
-  if (!routes.length) {
-    return <></>;
-  }
-
   return (
     <TabView
-      style={[styles.tabView, viewStyles]}
       navigationState={{ index, routes }}
       renderScene={SceneMap(tabScenes)}
       renderTabBar={renderTabBar}
@@ -144,8 +126,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
-export interface TabViewItemProps {
+interface TabViewItemProps {
   title: string;
   icon?: string;
   accessibilityLabel?: string;

package/src/mappings/TabView.js

@@ -1,19 +1,13 @@
-import { COMPONENT_TYPES, createTextEnumProp, createColorProp, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, GROUPS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createTextEnumProp, createColorProp, BLOCK_STYLES_SECTIONS, StylesPanelSections, Triggers, createActionProp, createStaticBoolProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Tab View",
     tag: "TabView",
     description: "Tab view container",
     category: COMPONENT_TYPES.swiper,
     stylesPanelSections: [
-        StylesPanelSections.Size,
-        StylesPanelSections.MarginsAndPaddings,
-        StylesPanelSections.Position,
-        StylesPanelSections.Effects,
-        StylesPanelSections.LayoutSelectedItem,
+        ...BLOCK_STYLES_SECTIONS,
         StylesPanelSections.Background,
-        StylesPanelSections.Typography,
     ],
-    layout: { flex: 1 },
     triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
     props: {
         onIndexChanged: createActionProp({
@@ -42,9 +36,9 @@ export const SEED_DATA = {
             defaultValue: true,
         }),
         scrollEnabled: createStaticBoolProp({
-            label: "Tab Scroll Enabled",
+            label: "Scroll Enabled",
             description: "Whether scrolling of tabs is enabled or not",
-            defaultValue: false,
+            defaultValue: true,
         }),
         activeColor: createColorProp({
             label: "Active Color",
@@ -58,9 +52,8 @@ export const SEED_DATA = {
         }),
         pressColor: createColorProp({
             label: "Press Color",
-            description: "Color of ripple when pressed",
+            description: "Color of ripple when pressed (android only)",
             defaultValue: "primary",
-            group: GROUPS.android,
         }),
         indicatorColor: createColorProp({
             label: "Indicator Color",

package/src/mappings/TabView.ts

@@ -2,11 +2,11 @@ import {
   COMPONENT_TYPES,
   createTextEnumProp,
   createColorProp,
+  BLOCK_STYLES_SECTIONS,
   StylesPanelSections,
   Triggers,
   createActionProp,
   createStaticBoolProp,
-  GROUPS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,15 +15,9 @@ export const SEED_DATA = {
   description: "Tab view container",
   category: COMPONENT_TYPES.swiper,
   stylesPanelSections: [
-    StylesPanelSections.Size,
-    StylesPanelSections.MarginsAndPaddings,
-    StylesPanelSections.Position,
-    StylesPanelSections.Effects,
-    StylesPanelSections.LayoutSelectedItem,
+    ...BLOCK_STYLES_SECTIONS,
     StylesPanelSections.Background,
-    StylesPanelSections.Typography,
   ],
-  layout: { flex: 1 },
   triggers: [Triggers.OnIndexChanged, Triggers.OnEndReached],
   props: {
     onIndexChanged: createActionProp({
@@ -52,9 +46,9 @@ export const SEED_DATA = {
       defaultValue: true,
     }),
     scrollEnabled: createStaticBoolProp({
-      label: "Tab Scroll Enabled",
+      label: "Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
-      defaultValue: false,
+      defaultValue: true,
     }),
     activeColor: createColorProp({
       label: "Active Color",
@@ -68,9 +62,8 @@ export const SEED_DATA = {
     }),
     pressColor: createColorProp({
       label: "Press Color",
-      description: "Color of ripple when pressed",
+      description: "Color of ripple when pressed (android only)",
       defaultValue: "primary",
-      group: GROUPS.android,
     }),
     indicatorColor: createColorProp({
       label: "Indicator Color",

package/src/mappings/TabViewItem.js

@@ -12,9 +12,8 @@ export const SEED_DATA = {
         title: createTextProp({
             label: "Title",
             description: "Title of tab item",
-            defaultValue: "Title",
+            defaultValue: null,
             required: true,
-            group: GROUPS.basic,
         }),
         icon: createIconProp({
             defaultValue: null,

package/src/mappings/TabViewItem.ts

@@ -20,9 +20,8 @@ export const SEED_DATA = {
     title: createTextProp({
       label: "Title",
       description: "Title of tab item",
-      defaultValue: "Title",
+      defaultValue: null,
       required: true,
-      group: GROUPS.basic,
     }),
     icon: createIconProp({
       defaultValue: null,