@wavemaker/app-rn-runtime 11.6.0-next.26303 → 11.6.0-next.26305

app-rn-runtime/components/navigation/popover/popover.props.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseProps","WmPopoverProps","constructor","arguments","_defineProperty","undefined"],"sources":["popover.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport React from 'react';\nimport { AccessibilityRole } from 'react-native';\n\nexport default class WmPopoverProps extends BaseProps {\n  animation?: string = null as any;\n  badgevalue? = null as any;\n  caption? = 'Link';\n  contentanimation?: string = null as any;\n  iconclass? = null as any;\n  iconposition? = 'left' as any;\n  popoverwidth?: string | number | null = 240;\n  popoverheight?: string | number | null = 360;\n  autoclose?: 'outsideClick' | 'disabled' | 'always' = 'outsideClick';\n  children? = [] as any;\n  renderPartial?: Function = null as any;\n  title?: string = null as any;\n  type?: 'action-sheet' | 'dropdown' = 'action-sheet';\n  iconurl?: string = null as any;\n  iconheight?: number = null as any;\n  iconwidth?: number = null as any;\n  iconmargin?: number = null as any;\n  accessibilitylabel?: string = undefined;\n  hint?: string = undefined;\n  accessibilityrole?: AccessibilityRole = \"none\";\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAIzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC/B,IAAI;IAAAA,eAAA,qBACX,IAAI;IAAAA,eAAA,kBACP,MAAM;IAAAA,eAAA,2BACW,IAAI;IAAAA,eAAA,oBACnB,IAAI;IAAAA,eAAA,uBACD,MAAM;IAAAA,eAAA,uBACkB,GAAG;IAAAA,eAAA,wBACF,GAAG;IAAAA,eAAA,oBACS,cAAc;IAAAA,eAAA,mBACvD,EAAE;IAAAA,eAAA,wBACa,IAAI;IAAAA,eAAA,gBACd,IAAI;IAAAA,eAAA,eACgB,cAAc;IAAAA,eAAA,kBAChC,IAAI;IAAAA,eAAA,qBACD,IAAI;IAAAA,eAAA,oBACL,IAAI;IAAAA,eAAA,qBACH,IAAI;IAAAA,eAAA,6BACIC,SAAS;IAAAD,eAAA,eACvBC,SAAS;IAAAD,eAAA,4BACe,MAAM;EAAA;AAChD"}
+{"version":3,"names":["BaseProps","WmPopoverProps","constructor","arguments","_defineProperty"],"sources":["popover.props.ts"],"sourcesContent":["import { BaseProps } from '@wavemaker/app-rn-runtime/core/base.component';\nimport React from 'react';\n\nexport default class WmPopoverProps extends BaseProps {\n  animation?: string = null as any;\n  badgevalue? = null as any;\n  caption? = 'Link';\n  contentanimation?: string = null as any;\n  iconclass? = null as any;\n  iconposition? = 'left' as any;\n  popoverwidth?: string | number | null = 240;\n  popoverheight?: string | number | null = 360;\n  autoclose?: 'outsideClick' | 'disabled' | 'always' = 'outsideClick';\n  children? = [] as any;\n  renderPartial?: Function = null as any;\n  title?: string = null as any;\n  type?: 'action-sheet' | 'dropdown' = 'action-sheet';\n}\n"],"mappings":";;;AAAA,SAASA,SAAS,QAAQ,+CAA+C;AAGzE,eAAe,MAAMC,cAAc,SAASD,SAAS,CAAC;EAAAE,YAAA;IAAA,SAAAC,SAAA;IAAAC,eAAA,oBAC/B,IAAI;IAAAA,eAAA,qBACX,IAAI;IAAAA,eAAA,kBACP,MAAM;IAAAA,eAAA,2BACW,IAAI;IAAAA,eAAA,oBACnB,IAAI;IAAAA,eAAA,uBACD,MAAM;IAAAA,eAAA,uBACkB,GAAG;IAAAA,eAAA,wBACF,GAAG;IAAAA,eAAA,oBACS,cAAc;IAAAA,eAAA,mBACvD,EAAE;IAAAA,eAAA,wBACa,IAAI;IAAAA,eAAA,gBACd,IAAI;IAAAA,eAAA,eACgB,cAAc;EAAA;AACrD"}

app-rn-runtime/components/navigation/popover/popover.styles.js

@@ -5,8 +5,7 @@ export const DEFAULT_CLASS = 'app-popover';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
     root: {
-      padding: 8,
-      alignSelf: 'flex-start'
+      padding: 8
     },
     text: {},
     title: {
@@ -16,12 +15,7 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       fontSize: 16,
       fontFamily: themeVariables.baseFont
     },
-    link: {
-      root: {},
-      text: {
-        paddingRight: 8
-      }
-    },
+    link: {},
     popover: {
       backgroundColor: themeVariables.popoverBackgroundColor,
       maxWidth: 640,

app-rn-runtime/components/navigation/popover/popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","Dimensions","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","padding","alignSelf","text","title","backgroundColor","popoverTitleBackgroundColor","color","popoverTitleColor","fontSize","fontFamily","baseFont","link","paddingRight","popover","popoverBackgroundColor","maxWidth","borderTopLeftRadius","borderTopRightRadius","popoverContent","flex","modal","modalContent","width","minHeight","maxHeight","get","height","position","bottom","getStyle","shadowOffset","shadowOpacity","shadowRadius","justifyContent","transparent","borderRadius"],"sources":["popover.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmAnchorStyles } from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.styles';\nimport { WmContainerStyles } from '@wavemaker/app-rn-runtime/components/container/container.styles';\nimport { Dimensions } from 'react-native';\n\nexport type WmPopoverStyles = BaseStyles & {\n    link: WmAnchorStyles,\n    popover: AllStyle,\n    popoverContent : WmContainerStyles,\n    modal: AllStyle,\n    modalContent: AllStyle,\n    title: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-popover';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPopoverStyles = defineStyles({\n        root: {\n            padding: 8,\n            alignSelf: 'flex-start'\n        },\n        text: {},\n        title: {\n            backgroundColor: themeVariables.popoverTitleBackgroundColor,\n            padding: 12,\n            color: themeVariables.popoverTitleColor,\n            fontSize: 16,\n            fontFamily: themeVariables.baseFont\n        },\n        link: {\n            root:{\n            },\n            text:{\n                paddingRight: 8\n            }\n        } as WmAnchorStyles,\n        popover: {\n            backgroundColor: themeVariables.popoverBackgroundColor,\n            maxWidth: 640,\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28        \n        },\n        popoverContent : {\n            root: {\n                flex: 1\n            }\n        } as WmContainerStyles,\n        modal: {},\n        modalContent: {\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28\n        }\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('popover-action-sheet', '', {\n        modal: {\n            backgroundColor: 'rgba(0, 0, 0, 0.3)',\n        },\n        popover: {\n            width: '100%',\n            minHeight: 240,\n            maxHeight: Dimensions.get('window').height - 120,\n        },\n        modalContent: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: 0\n            },\n            shadowOpacity: 0.6,\n            shadowRadius: 10,\n            justifyContent: 'flex-end'\n        }\n    } as any as WmPopoverStyles);\n    addStyle('popover-dropdown', '', {\n        modal: {\n            backgroundColor: 'transparent',\n        },\n        popover: {\n            backgroundColor: themeVariables.transparent\n        },\n        modalContent: {\n            borderRadius: 6,\n            position: 'absolute',\n            ...BASE_THEME.getStyle('elevate4').root,\n            shadowRadius: 8\n        }\n    } as WmPopoverStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAoB,wCAAwC;AAC7E,SAAqBC,YAAY,QAAQ,+CAA+C;AAGxF,SAASC,UAAU,QAAQ,cAAc;AAWzC,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA8B,GAAGN,YAAY,CAAC;IAChDO,IAAI,EAAE;MACFC,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE;IACf,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,KAAK,EAAE;MACHC,eAAe,EAAER,cAAc,CAACS,2BAA2B;MAC3DL,OAAO,EAAE,EAAE;MACXM,KAAK,EAAEV,cAAc,CAACW,iBAAiB;MACvCC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAEb,cAAc,CAACc;IAC/B,CAAC;IACDC,IAAI,EAAE;MACFZ,IAAI,EAAC,CACL,CAAC;MACDG,IAAI,EAAC;QACDU,YAAY,EAAE;MAClB;IACJ,CAAmB;IACnBC,OAAO,EAAE;MACLT,eAAe,EAAER,cAAc,CAACkB,sBAAsB;MACtDC,QAAQ,EAAE,GAAG;MACbC,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B,CAAC;IACDC,cAAc,EAAG;MACbnB,IAAI,EAAE;QACFoB,IAAI,EAAE;MACV;IACJ,CAAsB;IACtBC,KAAK,EAAE,CAAC,CAAC;IACTC,YAAY,EAAE;MACVL,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B;EACJ,CAAC,CAAC;EAEFpB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,sBAAsB,EAAE,EAAE,EAAE;IACjCuB,KAAK,EAAE;MACHhB,eAAe,EAAE;IACrB,CAAC;IACDS,OAAO,EAAE;MACLS,KAAK,EAAE,MAAM;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE/B,UAAU,CAACgC,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM,GAAG;IACjD,CAAC;IACDL,YAAY,EAAE;MACVM,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,CAAC;MACTN,KAAK,EAAE,MAAM;MACb,GAAG/B,UAAU,CAACsC,QAAQ,CAAC,UAAU,CAAC,CAAC9B,IAAI;MACvC+B,YAAY,EAAE;QACVR,KAAK,EAAE,CAAC;QACRI,MAAM,EAAE;MACZ,CAAC;MACDK,aAAa,EAAE,GAAG;MAClBC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE;IACpB;EACJ,CAA2B,CAAC;EAC5BpC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,EAAE;IAC7BuB,KAAK,EAAE;MACHhB,eAAe,EAAE;IACrB,CAAC;IACDS,OAAO,EAAE;MACLT,eAAe,EAAER,cAAc,CAACsC;IACpC,CAAC;IACDb,YAAY,EAAE;MACVc,YAAY,EAAE,CAAC;MACfR,QAAQ,EAAE,UAAU;MACpB,GAAGpC,UAAU,CAACsC,QAAQ,CAAC,UAAU,CAAC,CAAC9B,IAAI;MACvCiC,YAAY,EAAE;IAClB;EACJ,CAAoB,CAAC;AACzB,CAAC,CAAC"}
+{"version":3,"names":["BASE_THEME","defineStyles","Dimensions","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","padding","text","title","backgroundColor","popoverTitleBackgroundColor","color","popoverTitleColor","fontSize","fontFamily","baseFont","link","popover","popoverBackgroundColor","maxWidth","borderTopLeftRadius","borderTopRightRadius","popoverContent","flex","modal","modalContent","width","minHeight","maxHeight","get","height","position","bottom","getStyle","shadowOffset","shadowOpacity","shadowRadius","justifyContent","transparent","borderRadius"],"sources":["popover.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmAnchorStyles } from '@wavemaker/app-rn-runtime/components/basic/anchor/anchor.styles';\nimport { WmContainerStyles } from '@wavemaker/app-rn-runtime/components/container/container.styles';\nimport { Dimensions } from 'react-native';\n\nexport type WmPopoverStyles = BaseStyles & {\n    link: WmAnchorStyles,\n    popover: AllStyle,\n    popoverContent : WmContainerStyles,\n    modal: AllStyle,\n    modalContent: AllStyle,\n    title: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-popover';\nBASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmPopoverStyles = defineStyles({\n        root: {\n            padding: 8\n        },\n        text: {},\n        title: {\n            backgroundColor: themeVariables.popoverTitleBackgroundColor,\n            padding: 12,\n            color: themeVariables.popoverTitleColor,\n            fontSize: 16,\n            fontFamily: themeVariables.baseFont\n        },\n        link: {} as WmAnchorStyles,\n        popover: {\n            backgroundColor: themeVariables.popoverBackgroundColor,\n            maxWidth: 640,\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28        \n        },\n        popoverContent : {\n            root: {\n                flex: 1\n            }\n        } as WmContainerStyles,\n        modal: {},\n        modalContent: {\n            borderTopLeftRadius: 28,\n            borderTopRightRadius: 28\n        }\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('popover-action-sheet', '', {\n        modal: {\n            backgroundColor: 'rgba(0, 0, 0, 0.3)',\n        },\n        popover: {\n            width: '100%',\n            minHeight: 240,\n            maxHeight: Dimensions.get('window').height - 120,\n        },\n        modalContent: {\n            position: 'absolute',\n            bottom: 0,\n            width: '100%',\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: 0\n            },\n            shadowOpacity: 0.6,\n            shadowRadius: 10,\n            justifyContent: 'flex-end'\n        }\n    } as any as WmPopoverStyles);\n    addStyle('popover-dropdown', '', {\n        modal: {\n            backgroundColor: 'transparent',\n        },\n        popover: {\n            backgroundColor: themeVariables.transparent\n        },\n        modalContent: {\n            borderRadius: 6,\n            position: 'absolute',\n            ...BASE_THEME.getStyle('elevate4').root,\n            shadowRadius: 8\n        }\n    } as WmPopoverStyles);\n});"],"mappings":"AAAA,OAAOA,UAAU,MAAoB,wCAAwC;AAC7E,SAAqBC,YAAY,QAAQ,+CAA+C;AAGxF,SAASC,UAAU,QAAQ,cAAc;AAWzC,OAAO,MAAMC,aAAa,GAAG,aAAa;AAC1CH,UAAU,CAACI,aAAa,CAAC,CAACC,cAAc,EAAEC,QAAQ,KAAK;EACnD,MAAMC,aAA8B,GAAGN,YAAY,CAAC;IAChDO,IAAI,EAAE;MACFC,OAAO,EAAE;IACb,CAAC;IACDC,IAAI,EAAE,CAAC,CAAC;IACRC,KAAK,EAAE;MACHC,eAAe,EAAEP,cAAc,CAACQ,2BAA2B;MAC3DJ,OAAO,EAAE,EAAE;MACXK,KAAK,EAAET,cAAc,CAACU,iBAAiB;MACvCC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAEZ,cAAc,CAACa;IAC/B,CAAC;IACDC,IAAI,EAAE,CAAC,CAAmB;IAC1BC,OAAO,EAAE;MACLR,eAAe,EAAEP,cAAc,CAACgB,sBAAsB;MACtDC,QAAQ,EAAE,GAAG;MACbC,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B,CAAC;IACDC,cAAc,EAAG;MACbjB,IAAI,EAAE;QACFkB,IAAI,EAAE;MACV;IACJ,CAAsB;IACtBC,KAAK,EAAE,CAAC,CAAC;IACTC,YAAY,EAAE;MACVL,mBAAmB,EAAE,EAAE;MACvBC,oBAAoB,EAAE;IAC1B;EACJ,CAAC,CAAC;EAEFlB,QAAQ,CAACH,aAAa,EAAE,EAAE,EAAEI,aAAa,CAAC;EAC1CD,QAAQ,CAAC,sBAAsB,EAAE,EAAE,EAAE;IACjCqB,KAAK,EAAE;MACHf,eAAe,EAAE;IACrB,CAAC;IACDQ,OAAO,EAAE;MACLS,KAAK,EAAE,MAAM;MACbC,SAAS,EAAE,GAAG;MACdC,SAAS,EAAE7B,UAAU,CAAC8B,GAAG,CAAC,QAAQ,CAAC,CAACC,MAAM,GAAG;IACjD,CAAC;IACDL,YAAY,EAAE;MACVM,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,CAAC;MACTN,KAAK,EAAE,MAAM;MACb,GAAG7B,UAAU,CAACoC,QAAQ,CAAC,UAAU,CAAC,CAAC5B,IAAI;MACvC6B,YAAY,EAAE;QACVR,KAAK,EAAE,CAAC;QACRI,MAAM,EAAE;MACZ,CAAC;MACDK,aAAa,EAAE,GAAG;MAClBC,YAAY,EAAE,EAAE;MAChBC,cAAc,EAAE;IACpB;EACJ,CAA2B,CAAC;EAC5BlC,QAAQ,CAAC,kBAAkB,EAAE,EAAE,EAAE;IAC7BqB,KAAK,EAAE;MACHf,eAAe,EAAE;IACrB,CAAC;IACDQ,OAAO,EAAE;MACLR,eAAe,EAAEP,cAAc,CAACoC;IACpC,CAAC;IACDb,YAAY,EAAE;MACVc,YAAY,EAAE,CAAC;MACfR,QAAQ,EAAE,UAAU;MACpB,GAAGlC,UAAU,CAACoC,QAAQ,CAAC,UAAU,CAAC,CAAC5B,IAAI;MACvC+B,YAAY,EAAE;IAClB;EACJ,CAAoB,CAAC;AACzB,CAAC,CAAC"}

app-rn-runtime/components/page/tabbar/tabbar.component.js

@@ -3,7 +3,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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 React from 'react';
-import { Text, View, TouchableOpacity, Dimensions } from 'react-native';
+import { Text, View, TouchableOpacity } from 'react-native';
 import { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';
 import { ModalConsumer } from '@wavemaker/app-rn-runtime/core/modal.service';
 import WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';
@@ -11,47 +11,32 @@ import { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/naviga
 import { BaseNavComponent, BaseNavState } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.component';
 import WmTabbarProps from './tabbar.props';
 import { DEFAULT_CLASS } from './tabbar.styles';
-import Svg, { Path } from 'react-native-svg';
-import { getPathDown } from './curve';
-// import { scale } from 'react-native-size-scaling';
-import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
-const scale = n => n;
 class WmTabbarState extends BaseNavState {
   constructor() {
     super(...arguments);
     _defineProperty(this, "showMore", false);
     _defineProperty(this, "modalOptions", {});
-    _defineProperty(this, "dataItems", []);
   }
 }
 export default class WmTabbar extends BaseNavComponent {
   constructor(props) {
     super(props, DEFAULT_CLASS, new WmTabbarProps(), new WmTabbarState());
     _defineProperty(this, "tabbarHeight", 0);
-    _defineProperty(this, "maxWidth", Dimensions.get("window").width);
-    _defineProperty(this, "returnpathDown", void 0);
   }
   renderTabItem(item, testId, props, onSelect) {
-    let floating = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     const isActive = props.isActive && props.isActive(item);
     const getDisplayLabel = this.props.getDisplayExpression || (label => label);
-    let increasedGap = Number(testId) === (item === null || item === void 0 ? void 0 : item.indexBeforeMid) && this.state.dataItems.length % 2 != 0 && (props.classname || '').indexOf('clipped-tabbar') >= 0 ? [this.styles.tabItem, {
-      paddingRight: 70
-    }] : [this.styles.tabItem];
-    return /*#__PURE__*/React.createElement(View, {
-      style: [this.styles.tabItem],
-      key: `${item.label}_${testId}`
-    }, /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction('item' + testId), {
+    return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({}, this.getTestPropsForAction('item' + testId), {
       onPress: () => onSelect && onSelect(),
       key: item.key
     }), /*#__PURE__*/React.createElement(View, {
-      style: [isActive ? this.styles.activeTabItem : {}]
+      style: [this.styles.tabItem, isActive ? this.styles.activeTabItem : {}]
     }, /*#__PURE__*/React.createElement(WmIcon, {
       styles: this.theme.mergeStyle({}, this.styles.tabIcon, isActive ? this.styles.activeTabIcon : {}),
       iconclass: item.icon
-    }))), /*#__PURE__*/React.createElement(Text, {
+    }), /*#__PURE__*/React.createElement(Text, {
       style: [this.styles.tabLabel, isActive ? this.styles.activeTabLabel : {}]
-    }, getDisplayLabel(item.label)));
+    }, getDisplayLabel(item.label))));
   }
   onItemSelect(item, navigationService) {
     item.link && navigationService.openUrl(item.link);
@@ -69,14 +54,6 @@ export default class WmTabbar extends BaseNavComponent {
   renderWidget(props) {
     let max = 5;
     const tabItems = this.state.dataItems;
-    const tabItemsLength = tabItems.length;
-    const isClippedTabbar = (props.classname || '').indexOf('clipped-tabbar') >= 0 && tabItemsLength % 2 !== 0;
-    if (tabItemsLength % 2 !== 0) {
-      const middleIndex = Math.floor(tabItemsLength / 2);
-      tabItems[middleIndex]['floating'] = true;
-      tabItems[middleIndex - 1]['indexBeforeMid'] = middleIndex - 1;
-    }
-    this.returnpathDown = getPathDown(this.maxWidth, 65, 60, this.styles.root.height);
     const moreItems = [];
     if (tabItems.length > max) {
       const moreItemsCount = Math.ceil((tabItems.length + 1 - max) / max) * max;
@@ -94,18 +71,7 @@ export default class WmTabbar extends BaseNavComponent {
     }
     return /*#__PURE__*/React.createElement(NavigationServiceConsumer, null, navigationService => /*#__PURE__*/React.createElement(View, {
       style: this.styles.root
-    }, isClippedTabbar ? /*#__PURE__*/React.createElement(Svg, {
-      width: this.maxWidth,
-      height: scale(this.styles.root.height),
-      style: {
-        zIndex: -1,
-        position: 'absolute',
-        backgroundColor: ThemeVariables.INSTANCE.transparent
-      }
-    }, /*#__PURE__*/React.createElement(Path, {
-      fill: ThemeVariables.INSTANCE.tabbarBackgroundColor,
-      d: this.returnpathDown
-    })) : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
+    }, /*#__PURE__*/React.createElement(ModalConsumer, null, modalService => {
       if (this.state.showMore) {
         modalService.showModal(this.prepareModalOptions( /*#__PURE__*/React.createElement(ThemeProvider, {
           value: this.theme
@@ -114,7 +80,7 @@ export default class WmTabbar extends BaseNavComponent {
         }, moreItems.map((a, i) => /*#__PURE__*/React.createElement(View, {
           key: i,
           style: this.styles.moreMenuRow
-        }, a.map((item, index) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService)))))))));
+        }, a.map(item => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService)))))))));
       } else {
         modalService.hideModal(this.state.modalOptions);
       }
@@ -124,7 +90,7 @@ export default class WmTabbar extends BaseNavComponent {
       onLayout: e => {
         this.tabbarHeight = e.nativeEvent.layout.height;
       }
-    }, tabItems.filter((item, i) => i < max).map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService), item.floating)), tabItems.length > max && this.renderTabItem({
+    }, tabItems.filter((item, i) => i < max).map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService))), tabItems.length > max && this.renderTabItem({
       label: props.morebuttonlabel,
       icon: props.morebuttoniconclass
     }, 6666 + '', props, () => {

app-rn-runtime/components/page/tabbar/tabbar.component.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Text","View","TouchableOpacity","Dimensions","ThemeProvider","ModalConsumer","WmIcon","NavigationServiceConsumer","BaseNavComponent","BaseNavState","WmTabbarProps","DEFAULT_CLASS","Svg","Path","getPathDown","ThemeVariables","scale","n","WmTabbarState","constructor","arguments","_defineProperty","WmTabbar","props","get","width","renderTabItem","item","testId","onSelect","floating","length","undefined","isActive","getDisplayLabel","getDisplayExpression","label","increasedGap","Number","indexBeforeMid","state","dataItems","classname","indexOf","styles","tabItem","paddingRight","createElement","style","key","_extends","getTestPropsForAction","onPress","activeTabItem","theme","mergeStyle","tabIcon","activeTabIcon","iconclass","icon","tabLabel","activeTabLabel","onItemSelect","navigationService","link","openUrl","invokeEventCallback","proxy","prepareModalOptions","content","o","modalOptions","modalStyle","bottom","tabbarHeight","contentStyle","modalContent","renderWidget","max","tabItems","tabItemsLength","isClippedTabbar","middleIndex","Math","floor","returnpathDown","maxWidth","root","height","moreItems","moreItemsCount","ceil","j","i","row","push","zIndex","position","backgroundColor","INSTANCE","transparent","fill","tabbarBackgroundColor","d","Fragment","modalService","showMore","showModal","value","moreMenu","map","a","moreMenuRow","index","hideModal","menu","onLayout","e","nativeEvent","layout","filter","morebuttonlabel","morebuttoniconclass","updateState"],"sources":["tabbar.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Text, View, TouchableOpacity, Dimensions } from 'react-native';\n\nimport { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { ModalConsumer, ModalOptions, ModalService } from '@wavemaker/app-rn-runtime/core/modal.service';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport NavigationService, { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/navigation.service';\nimport { BaseNavProps } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.props';\nimport { BaseNavComponent, BaseNavState, NavigationDataItem } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.component';\n\nimport WmTabbarProps from './tabbar.props';\nimport { DEFAULT_CLASS, WmTabbarStyles } from './tabbar.styles';\nimport Svg, { Path } from 'react-native-svg';\nimport { getPathDown } from './curve';\n// import { scale } from 'react-native-size-scaling';\nimport ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';\n\ninterface TabDataItem extends NavigationDataItem {\n  floating: boolean;\n  indexBeforeMid: number;\n}\n\nconst scale = (n: number) => n;\n\nclass WmTabbarState<T extends BaseNavProps> extends BaseNavState<T> {\n  showMore = false;\n  modalOptions = {} as ModalOptions;\n  dataItems: TabDataItem[] = [];\n}\n\nexport default class WmTabbar extends BaseNavComponent<WmTabbarProps, WmTabbarState<WmTabbarProps>, WmTabbarStyles> {\n\n  private tabbarHeight = 0;\n\n  constructor(props: WmTabbarProps) {\n    super(props, DEFAULT_CLASS, new WmTabbarProps(), new WmTabbarState());\n  }\n\n  private maxWidth = Dimensions.get(\"window\").width;  \n  private returnpathDown: any;\n\n  renderTabItem(item: TabDataItem, testId: string, props: WmTabbarProps, onSelect: Function, floating = false) {\n\n    const isActive = props.isActive && props.isActive(item);\n    const getDisplayLabel = this.props.getDisplayExpression || ((label: string) => label);\n    let increasedGap = Number(testId) === item?.indexBeforeMid && (this.state.dataItems.length % 2!=0)  && ((props.classname || '').indexOf('clipped-tabbar') >= 0)\n    ? [this.styles.tabItem, { paddingRight: 70 }]\n    : [this.styles.tabItem];\n  \n    return (\n      <View style={[this.styles.tabItem]} key={`${item.label}_${testId}`}>\n        <TouchableOpacity\n          {...this.getTestPropsForAction('item' + testId)}\n          onPress={() => onSelect && onSelect()}\n          key={item.key}\n        >\n          <View style={[isActive ? this.styles.activeTabItem : {}]}>\n            <WmIcon\n              styles={this.theme.mergeStyle({}, this.styles.tabIcon, isActive ? this.styles.activeTabIcon : {})}\n              iconclass={item.icon}\n            ></WmIcon>\n          </View>\n        </TouchableOpacity>\n        <Text style={[this.styles.tabLabel, isActive ? this.styles.activeTabLabel : {}]}>\n          {getDisplayLabel(item.label)}\n        </Text>\n      </View>\n    );\n  }\n  \n  onItemSelect(item: NavigationDataItem, navigationService: NavigationService) {\n    item.link && navigationService.openUrl(item.link);\n    this.invokeEventCallback('onSelect', [null, this.proxy, item]);\n  }\n\n  prepareModalOptions(content: ReactNode) {\n    const o = this.state.modalOptions;\n    o.content = content;\n    o.modalStyle = {\n      bottom: this.tabbarHeight\n    };\n    o.contentStyle = this.styles.modalContent; \n    return o;\n  }\n\n  renderWidget(props: WmTabbarProps) {\n    let max = 5;\n    const tabItems = this.state.dataItems;\n    const tabItemsLength = tabItems.length;\n    const isClippedTabbar = ((props.classname || '').indexOf('clipped-tabbar') >= 0) && (tabItemsLength % 2 !== 0);\n    if (tabItemsLength % 2 !== 0) {\n      const middleIndex = Math.floor(tabItemsLength / 2);\n      tabItems[middleIndex]['floating'] = true;\n      tabItems[middleIndex - 1]['indexBeforeMid'] = middleIndex-1;\n    }\n   this.returnpathDown = getPathDown(this.maxWidth, 65 ,60,this.styles.root.height as number);\n    const moreItems = [] as any[][];\n    if (tabItems.length > max) {\n      const moreItemsCount = Math.ceil((tabItems.length + 1 - max)/ max) * max;\n      let j = 0;\n      for (let i = max-1; i < moreItemsCount;) {\n        const row = [];\n        for (let j = 0; j < max; j++) {\n          row[j] = tabItems[i++] || {key: 'tabItem' + i} as TabDataItem;\n        }\n        moreItems.push(row);\n      }\n      max = max - 1;\n    }\n    return (\n      <NavigationServiceConsumer>\n        {(navigationService) =>\n        (<View style={this.styles.root}>\n         {isClippedTabbar ? (\n        <Svg width={this.maxWidth} height={scale(this.styles.root.height as number)} style={{zIndex: -1,position: 'absolute',backgroundColor: ThemeVariables.INSTANCE.transparent}}>\n        <Path fill={ThemeVariables.INSTANCE.tabbarBackgroundColor} {...{ d: this.returnpathDown }}/>\n        </Svg>\n           ): <></>}   \n          <ModalConsumer>\n            {(modalService: ModalService) => {\n              if (this.state.showMore) {\n                modalService.showModal(this.prepareModalOptions((\n                <ThemeProvider value={this.theme} >\n                  <View style={this.styles.moreMenu}>\n                    {moreItems.map((a, i) =>\n                      (<View key={i} style={this.styles.moreMenuRow}>\n                        {a.map((item, index) => this.renderTabItem(item, i + '', props,  () => this.onItemSelect(item, navigationService)))}\n                      </View>)\n                    )}\n                  </View>\n                </ThemeProvider>)));\n              } else {\n                modalService.hideModal(this.state.modalOptions);\n              }\n              return null;\n            }}\n          </ModalConsumer>\n          <View style={this.styles.menu}\n            onLayout={e => { this.tabbarHeight = e.nativeEvent.layout.height}}> \n            {tabItems.filter((item, i) => i < max)\n              .map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService), item.floating))}\n            {tabItems.length > max && (\n              this.renderTabItem({\n                label: props.morebuttonlabel,\n                icon: props.morebuttoniconclass\n              } as TabDataItem, 6666 +'', props,  () => {\n                this.updateState({showMore: !this.state.showMore} as WmTabbarState<WmTabbarProps>);\n              })\n            )}\n          </View>\n        </View>)}\n      </NavigationServiceConsumer>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","Text","View","TouchableOpacity","ThemeProvider","ModalConsumer","WmIcon","NavigationServiceConsumer","BaseNavComponent","BaseNavState","WmTabbarProps","DEFAULT_CLASS","WmTabbarState","constructor","arguments","_defineProperty","WmTabbar","props","renderTabItem","item","testId","onSelect","isActive","getDisplayLabel","getDisplayExpression","label","createElement","_extends","getTestPropsForAction","onPress","key","style","styles","tabItem","activeTabItem","theme","mergeStyle","tabIcon","activeTabIcon","iconclass","icon","tabLabel","activeTabLabel","onItemSelect","navigationService","link","openUrl","invokeEventCallback","proxy","prepareModalOptions","content","o","state","modalOptions","modalStyle","bottom","tabbarHeight","contentStyle","modalContent","renderWidget","max","tabItems","dataItems","moreItems","length","moreItemsCount","Math","ceil","j","i","row","push","root","modalService","showMore","showModal","value","moreMenu","map","a","moreMenuRow","hideModal","menu","onLayout","e","nativeEvent","layout","height","filter","morebuttonlabel","morebuttoniconclass","updateState"],"sources":["tabbar.component.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { Text, View, TouchableOpacity } from 'react-native';\n\nimport { ThemeProvider } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { ModalConsumer, ModalOptions, ModalService } from '@wavemaker/app-rn-runtime/core/modal.service';\nimport WmIcon from '@wavemaker/app-rn-runtime/components/basic/icon/icon.component';\nimport NavigationService, { NavigationServiceConsumer } from '@wavemaker/app-rn-runtime/core/navigation.service';\nimport { BaseNavProps } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.props';\nimport { BaseNavComponent, BaseNavState, NavigationDataItem } from '@wavemaker/app-rn-runtime/components/navigation/basenav/basenav.component';\n\nimport WmTabbarProps from './tabbar.props';\nimport { DEFAULT_CLASS, WmTabbarStyles } from './tabbar.styles';\n\nclass WmTabbarState<T extends BaseNavProps> extends BaseNavState<T>{\n  showMore = false;\n  modalOptions = {} as ModalOptions;\n}\n\nexport default class WmTabbar extends BaseNavComponent<WmTabbarProps, WmTabbarState<WmTabbarProps>, WmTabbarStyles> {\n\n  private tabbarHeight = 0;\n\n  constructor(props: WmTabbarProps) {\n    super(props, DEFAULT_CLASS, new WmTabbarProps(), new WmTabbarState());\n  }\n\n  renderTabItem(item: NavigationDataItem, testId: string, props: WmTabbarProps, onSelect: Function) {\n    const isActive = props.isActive && props.isActive(item);\n    const getDisplayLabel = this.props.getDisplayExpression || ((label: string) => label);\n    return (\n      <TouchableOpacity {...this.getTestPropsForAction('item' + testId)} onPress={() => onSelect && onSelect()}  key={item.key}>\n        <View style={[this.styles.tabItem, isActive ? this.styles.activeTabItem: {}]}>\n            <WmIcon styles={this.theme.mergeStyle({}, this.styles.tabIcon, isActive ? this.styles.activeTabIcon: {})} iconclass={item.icon}></WmIcon>\n            <Text style={[this.styles.tabLabel, isActive ? this.styles.activeTabLabel: {}]}>{getDisplayLabel(item.label)}</Text>\n        </View>\n      </TouchableOpacity>\n    );\n  }\n\n  onItemSelect(item: NavigationDataItem, navigationService: NavigationService) {\n    item.link && navigationService.openUrl(item.link);\n    this.invokeEventCallback('onSelect', [null, this.proxy, item]);\n  }\n\n  prepareModalOptions(content: ReactNode) {\n    const o = this.state.modalOptions;\n    o.content = content;\n    o.modalStyle = {\n      bottom: this.tabbarHeight\n    };\n    o.contentStyle = this.styles.modalContent; \n    return o;\n  }\n\n  renderWidget(props: WmTabbarProps) {\n    let max = 5;\n    const tabItems = this.state.dataItems;\n    const moreItems = [] as any[][];\n    if (tabItems.length > max) {\n      const moreItemsCount = Math.ceil((tabItems.length + 1 - max)/ max) * max;\n      let j = 0;\n      for (let i = max-1; i < moreItemsCount;) {\n        const row = [];\n        for (let j = 0; j < max; j++) {\n          row[j] = tabItems[i++] || {key: 'tabItem' + i} as NavigationDataItem;\n        }\n        moreItems.push(row);\n      }\n      max = max - 1;\n    }\n    return (\n      <NavigationServiceConsumer>\n        {(navigationService) =>\n        (<View style={this.styles.root}>\n          <ModalConsumer>\n            {(modalService: ModalService) => {\n              if (this.state.showMore) {\n                modalService.showModal(this.prepareModalOptions((\n                <ThemeProvider value={this.theme} >\n                  <View style={this.styles.moreMenu}>\n                    {moreItems.map((a, i) =>\n                      (<View key={i} style={this.styles.moreMenuRow}>\n                        {a.map(item => this.renderTabItem(item, i + '', props,  () => this.onItemSelect(item, navigationService)))}\n                      </View>)\n                    )}\n                  </View>\n                </ThemeProvider>)));\n              } else {\n                modalService.hideModal(this.state.modalOptions);\n              }\n              return null;\n            }}\n          </ModalConsumer>\n          <View style={this.styles.menu}\n            onLayout={e => { this.tabbarHeight = e.nativeEvent.layout.height}}>\n            {tabItems.filter((item, i) => i < max)\n              .map((item, i) => this.renderTabItem(item, i + '', props, () => this.onItemSelect(item, navigationService)))}\n            {tabItems.length > max && (\n              this.renderTabItem({\n                label: props.morebuttonlabel,\n                icon: props.morebuttoniconclass\n              } as NavigationDataItem, 6666 +'', props,  () => {\n                this.updateState({showMore: !this.state.showMore} as WmTabbarState<WmTabbarProps>);\n              })\n            )}\n          </View>\n        </View>)}\n      </NavigationServiceConsumer>\n    );\n  }\n}\n"],"mappings":"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"}

app-rn-runtime/components/page/tabbar/tabbar.styles.js

@@ -4,9 +4,7 @@ export const DEFAULT_CLASS = 'app-tabbar';
 BASE_THEME.registerStyle((themeVariables, addStyle) => {
   const defaultStyles = defineStyles({
     root: {
-      height: 80,
-      elevation: 3,
-      shadowColor: themeVariables.tabShadowColor
+      height: 88
     },
     text: {},
     menu: {
@@ -41,60 +39,41 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      minHeight: 32,
-      minWidth: 64,
-      opacity: 0.4,
-      marginBottom: 16
+      minWidth: 60,
+      opacity: 0.4
     },
     activeTabItem: {
-      opacity: 1,
-      height: 32,
-      width: 64,
-      borderRadius: 50,
-      marginBottom: 2,
-      backgroundColor: themeVariables.tabActiveBackgroundColor
+      opacity: 1
     },
     tabIcon: {
       root: {
         alignSelf: 'center',
+        paddingBottom: 32,
         borderBottomColor: themeVariables.transparent,
-        paddingBottom: 4
+        borderBottomWidth: 4
       },
       icon: {
-        fontSize: 24,
-        paddingRight: 0,
-        color: themeVariables.tabShadowColor
+        fontSize: 36,
+        color: themeVariables.tabbarIconColor
       }
     },
     activeTabIcon: {
-      root: {},
-      icon: {
-        color: themeVariables.tabActiveIconColor
+      root: {
+        borderBottomColor: themeVariables.tabbarIconColor
       }
     },
     tabLabel: {
-      fontSize: 12,
+      fontSize: 14,
       fontWeight: '500',
+      color: themeVariables.tabbarIconColor,
+      textAlign: 'center',
       fontFamily: themeVariables.baseFont,
-      color: themeVariables.tabLabelTextColor,
-      textAlign: 'center'
-    },
-    activeTabLabel: {
-      fontWeight: '700',
-      fontSize: 12,
-      fontFamily: themeVariables.baseFont,
-      color: themeVariables.tabShadowColor
+      marginTop: -32,
+      paddingBottom: 14
     },
-    centerHubItem: {},
-    centerHubIcon: {},
-    centerHubLabel: {}
+    activeTabLabel: {}
   });
   addStyle(DEFAULT_CLASS, '', defaultStyles);
-  addStyle('tabbar-spacer', '', {
-    root: {
-      height: 96
-    }
-  });
   addStyle(DEFAULT_CLASS + '-1', '', {
     root: {
       height: undefined
@@ -117,50 +96,5 @@ BASE_THEME.registerStyle((themeVariables, addStyle) => {
       marginTop: 0
     }
   });
-  addStyle('clipped-tabbar', '', {
-    root: {
-      backgroundColor: themeVariables.transparent,
-      marginTop: -88
-    },
-    menu: {
-      backgroundColor: themeVariables.transparent
-    },
-    centerHubItem: {
-      width: 70,
-      height: 70,
-      shadowColor: 'grey',
-      shadowOpacity: 0.1,
-      opacity: 1,
-      shadowOffset: {
-        width: 2,
-        height: 0
-      },
-      shadowRadius: 2,
-      borderRadius: 35,
-      position: 'absolute',
-      bottom: 53,
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: themeVariables.centerHubItemColor,
-      left: themeVariables.maxWidth / 2 - 35
-    },
-    centerHubIcon: {
-      root: {
-        alignSelf: 'center',
-        paddingBottom: 0,
-        borderBottomColor: themeVariables.transparent,
-        borderBottomWidth: 0
-      },
-      icon: {
-        fontSize: 24,
-        color: themeVariables.centerHubIconColor
-      }
-    },
-    centerHubLabel: {
-      color: themeVariables.centerHubLabelColor,
-      marginTop: 0,
-      paddingBottom: 4
-    }
-  });
 });
 //# sourceMappingURL=tabbar.styles.js.map

app-rn-runtime/components/page/tabbar/tabbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","elevation","shadowColor","tabShadowColor","text","menu","flexDirection","backgroundColor","tabbarBackgroundColor","justifyContent","alignItems","modalContent","moreMenu","width","getStyle","shadowOffset","shadowOpacity","shadowRadius","moreMenuRow","paddingTop","paddingBottom","tabItem","minHeight","minWidth","opacity","marginBottom","activeTabItem","borderRadius","tabActiveBackgroundColor","tabIcon","alignSelf","borderBottomColor","transparent","icon","fontSize","paddingRight","color","activeTabIcon","tabActiveIconColor","tabLabel","fontWeight","fontFamily","baseFont","tabLabelTextColor","textAlign","activeTabLabel","centerHubItem","centerHubIcon","centerHubLabel","undefined","borderTopWidth","borderTopColor","tabbarIconColor","borderBottomWidth","marginTop","position","bottom","centerHubItemColor","left","maxWidth","centerHubIconColor","centerHubLabelColor"],"sources":["tabbar.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '../../basic/icon/icon.styles';\n\nexport type WmTabbarStyles = BaseStyles & {\n    menu: AllStyle,\n    modalContent: AllStyle,\n    moreMenu: AllStyle,\n    moreMenuRow: AllStyle,\n    tabItem: AllStyle,\n    activeTabItem: AllStyle,\n    tabIcon: WmIconStyles,\n    activeTabIcon: WmIconStyles,\n    tabLabel: AllStyle,\n    activeTabLabel: AllStyle,\n    centerHubItem: AllStyle,\n    centerHubIcon: WmIconStyles,\n    centerHubLabel: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-tabbar';\n    BASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmTabbarStyles = defineStyles<WmTabbarStyles>({\n        root: {\n            height: 80,\n            elevation: 3,\n            shadowColor : themeVariables.tabShadowColor\n        },\n        text: {},\n        menu: {\n            height: '100%',\n            flexDirection: 'row',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            justifyContent: 'space-around',\n            alignItems: 'flex-end',\n        },\n        modalContent: {},\n        moreMenu: {\n            width: '100%',\n            flexDirection: 'column-reverse',\n            justifyContent: 'flex-end',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: -6\n            },\n            shadowOpacity: 0.3,\n            shadowRadius: 6\n        },\n        moreMenuRow: {\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-around',\n            width: '100%',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        tabItem: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            minHeight: 32,\n            minWidth: 64,\n            opacity: 0.4,\n            marginBottom: 16\n        },\n        activeTabItem: {\n            opacity: 1,\n            height: 32,\n            width: 64,\n            borderRadius: 50,\n            marginBottom: 2,\n            backgroundColor: themeVariables.tabActiveBackgroundColor\n        },\n        tabIcon: {\n            root: {\n                alignSelf: 'center',\n                borderBottomColor: themeVariables.transparent,\n                paddingBottom: 4\n            },\n            icon: {\n                fontSize: 24,\n                paddingRight: 0,\n                color:  themeVariables.tabShadowColor\n            }\n        } as WmIconStyles,\n        activeTabIcon: {\n            root: {\n            },\n            icon:{\n                color: themeVariables.tabActiveIconColor,\n            }\n        } as WmIconStyles,\n        tabLabel: {\n            fontSize: 12,\n            fontWeight: '500',\n            fontFamily: themeVariables.baseFont,\n            color:  themeVariables.tabLabelTextColor,\n            textAlign: 'center',\n        },\n        activeTabLabel: {\n            fontWeight: '700',\n            fontSize: 12,\n            fontFamily: themeVariables.baseFont,\n            color:  themeVariables.tabShadowColor,\n        },\n        centerHubItem: {},\n        centerHubIcon: {} as WmIconStyles, \n        centerHubLabel:{}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle('tabbar-spacer', '', {\n        root: {\n            height: 96\n        }\n    });\n    addStyle(DEFAULT_CLASS+ '-1', '', {\n        root: {\n            height: undefined\n        },\n        tabItem: {\n            justifyContent: 'space-between' \n        },\n        activeTabItem: {\n            borderTopWidth: 4,\n            borderTopColor: themeVariables.tabbarIconColor\n        },\n        tabIcon: {\n            root: {\n                paddingTop: 8,\n                paddingBottom: 8,\n                borderBottomWidth: 0\n            }\n        },\n        tabLabel: {\n            marginTop: 0\n        }\n    } as WmTabbarStyles);\n    addStyle('clipped-tabbar', '', {\n        root:{\n            backgroundColor: themeVariables.transparent,\n            marginTop: -88\n        },\n        menu: {\n            backgroundColor: themeVariables.transparent\n        },\n        centerHubItem: {\n            width: 70,\n            height: 70,\n            shadowColor: 'grey',\n            shadowOpacity: 0.1,\n            opacity: 1,\n            shadowOffset: { width: 2, height: 0 },\n            shadowRadius: 2,\n            borderRadius: 35,\n            position: 'absolute',\n            bottom: 53,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: themeVariables.centerHubItemColor,\n            left: (themeVariables.maxWidth/2) - 35\n        },\n        centerHubIcon: {\n            root: {\n                alignSelf: 'center',\n                paddingBottom: 0,\n                borderBottomColor: themeVariables.transparent,\n                borderBottomWidth: 0 \n            },\n            icon: {\n                fontSize: 24,\n                color:  themeVariables.centerHubIconColor\n            }\n        } as WmIconStyles, \n        centerHubLabel:{\n            color:  themeVariables.centerHubLabelColor,\n            marginTop: 0,\n            paddingBottom: 4\n        }\n    })\n});"],"mappings":"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"}
+{"version":3,"names":["BASE_THEME","defineStyles","DEFAULT_CLASS","registerStyle","themeVariables","addStyle","defaultStyles","root","height","text","menu","flexDirection","backgroundColor","tabbarBackgroundColor","justifyContent","alignItems","modalContent","moreMenu","width","getStyle","shadowOffset","shadowOpacity","shadowRadius","moreMenuRow","paddingTop","paddingBottom","tabItem","minWidth","opacity","activeTabItem","tabIcon","alignSelf","borderBottomColor","transparent","borderBottomWidth","icon","fontSize","color","tabbarIconColor","activeTabIcon","tabLabel","fontWeight","textAlign","fontFamily","baseFont","marginTop","activeTabLabel","undefined","borderTopWidth","borderTopColor"],"sources":["tabbar.styles.ts"],"sourcesContent":["import BASE_THEME, { AllStyle } from '@wavemaker/app-rn-runtime/styles/theme';\nimport { BaseStyles, defineStyles } from '@wavemaker/app-rn-runtime/core/base.component';\nimport { WmIconStyles } from '../../basic/icon/icon.styles';\n\nexport type WmTabbarStyles = BaseStyles & {\n    menu: AllStyle,\n    modalContent: AllStyle,\n    moreMenu: AllStyle,\n    moreMenuRow: AllStyle,\n    tabItem: AllStyle,\n    activeTabItem: AllStyle,\n    tabIcon: WmIconStyles,\n    activeTabIcon: WmIconStyles,\n    tabLabel: AllStyle,\n    activeTabLabel: AllStyle\n};\n\nexport const DEFAULT_CLASS = 'app-tabbar';\n    BASE_THEME.registerStyle((themeVariables, addStyle) => {\n    const defaultStyles: WmTabbarStyles = defineStyles<WmTabbarStyles>({\n        root: {\n            height: 88\n        },\n        text: {},\n        menu: {\n            height: '100%',\n            flexDirection: 'row',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            justifyContent: 'space-around',\n            alignItems: 'flex-end',\n        },\n        modalContent: {},\n        moreMenu: {\n            width: '100%',\n            flexDirection: 'column-reverse',\n            justifyContent: 'flex-end',\n            backgroundColor: themeVariables.tabbarBackgroundColor,\n            ...BASE_THEME.getStyle('elevate1').root,\n            shadowOffset: {\n                width: 0,\n                height: -6\n            },\n            shadowOpacity: 0.3,\n            shadowRadius: 6\n        },\n        moreMenuRow: {\n            flexDirection: 'row-reverse',\n            justifyContent: 'space-around',\n            width: '100%',\n            paddingTop: 4,\n            paddingBottom: 4\n        },\n        tabItem: {\n            flexDirection: 'column',\n            justifyContent: 'center',\n            alignItems: 'center',\n            minWidth: 60,\n            opacity: 0.4\n        },\n        activeTabItem: {\n            opacity: 1\n        },\n        tabIcon: {\n            root: {\n                alignSelf: 'center',\n                paddingBottom: 32,\n                borderBottomColor: themeVariables.transparent,\n                borderBottomWidth: 4\n            },\n            icon: {\n                fontSize: 36,\n                color:  themeVariables.tabbarIconColor\n            }\n        } as WmIconStyles,\n        activeTabIcon: {\n            root: {\n                borderBottomColor: themeVariables.tabbarIconColor,\n            }\n        } as WmIconStyles,\n        tabLabel: {\n            fontSize: 14,\n            fontWeight: '500',\n            color:  themeVariables.tabbarIconColor,\n            textAlign: 'center',\n            fontFamily: themeVariables.baseFont,\n            marginTop: -32,\n            paddingBottom: 14\n        },\n        activeTabLabel: {}\n    });\n\n    addStyle(DEFAULT_CLASS, '', defaultStyles);\n    addStyle(DEFAULT_CLASS+ '-1', '', {\n        root: {\n            height: undefined\n        },\n        tabItem: {\n            justifyContent: 'space-between' \n        },\n        activeTabItem: {\n            borderTopWidth: 4,\n            borderTopColor: themeVariables.tabbarIconColor\n        },\n        tabIcon: {\n            root: {\n                paddingTop: 8,\n                paddingBottom: 8,\n                borderBottomWidth: 0\n            }\n        },\n        tabLabel: {\n            marginTop: 0\n        }\n    } as WmTabbarStyles);\n});"],"mappings":"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"}

app-rn-runtime/core/base.component.js

@@ -4,7 +4,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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 { assign, isUndefined, isNil } from 'lodash';
 import React from 'react';
-import { AccessibilityInfo, Platform } from 'react-native';
+import { Platform } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import ThemeVariables from '@wavemaker/app-rn-runtime/styles/theme.variables';
 import { StyleProps, getStyleName } from '@wavemaker/app-rn-runtime/styles/style-props';
@@ -20,7 +20,6 @@ import { HideMode } from './if.component';
 import { AssetConsumer } from './asset.provider';
 import { FixedView } from './fixed-view.component';
 import { TextIdPrefixConsumer } from './testid.provider';
-import { isScreenReaderEnabled } from './accessibility';
 export const WIDGET_LOGGER = ROOT_LOGGER.extend('widget');
 export const ParentContext = /*#__PURE__*/React.createContext(null);
 export class BaseComponentState {
@@ -131,11 +130,6 @@ export class BaseComponent extends React.Component {
     this.cleanup.push(this.theme.subscribe(ThemeEvent.CHANGE, () => {
       this.forceUpdate();
     }));
-    this.cleanup.push(AccessibilityInfo.addEventListener('screenReaderChanged', () => {
-      setTimeout(() => {
-        this.forceUpdate();
-      }, 100);
-    }).remove);
     this.cleanup.push(() => {
       this.destroyParentListeners();
     });
@@ -352,9 +346,6 @@ export class BaseComponent extends React.Component {
   }
   getTestProps(suffix) {
     let id = this.getTestId(suffix);
-    if (isScreenReaderEnabled()) {
-      return {};
-    }
     if (Platform.OS === 'android' || Platform.OS === 'web') {
       return {
         accessibilityLabel: id,
@@ -366,9 +357,6 @@ export class BaseComponent extends React.Component {
       testID: id
     };
   }
-  getStyleClassName() {
-    return this.state.props.classname;
-  }
   getTestPropsForInput(suffix) {
     return this.getTestProps(suffix || 'i');
   }
@@ -406,12 +394,11 @@ export class BaseComponent extends React.Component {
     const selectedLocale = this.i18nService.getSelectedLocale();
     return this.getDependenciesFromContext(() => {
       WIDGET_LOGGER.info(() => `${this.props.name || this.constructor.name} is rendering.`);
-      const classname = this.getStyleClassName();
       this.styles = this.theme.mergeStyle(this.getDefaultStyles(), {
         text: this.theme.getStyle('app-' + selectedLocale)
       }, {
         text: this.theme.getStyle(this.defaultClass + '-' + selectedLocale)
-      }, props.disabled ? this.theme.getStyle(this.defaultClass + '-disabled') : null, this.isRTL ? this.theme.getStyle(this.defaultClass + '-rtl') : null, classname && this.theme.getStyle(classname), props.showindevice && this.theme.getStyle('d-all-none ' + props.showindevice.map(d => `d-${d}-flex`).join(' ')), this.props.styles, {
+      }, props.disabled ? this.theme.getStyle(this.defaultClass + '-disabled') : null, this.isRTL ? this.theme.getStyle(this.defaultClass + '-rtl') : null, props.classname && this.theme.getStyle(props.classname), props.showindevice && this.theme.getStyle('d-all-none ' + props.showindevice.map(d => `d-${d}-flex`).join(' ')), this.props.styles, {
         root: this.styleOverrides,
         text: this.styleOverrides
       });