Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<Tabs> broken when used inside of a <BottomNavigation> (iOS Only) #8575

Closed
Tyler-V opened this issue May 12, 2020 · 6 comments
Closed

<Tabs> broken when used inside of a <BottomNavigation> (iOS Only) #8575

Tyler-V opened this issue May 12, 2020 · 6 comments

Comments

@Tyler-V
Copy link

Tyler-V commented May 12, 2020

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
√ Getting NativeScript components versions information...
√ Component nativescript has 6.5.0 version and is up to date.
√ Component tns-core-modules has 6.5.1 version and is up to date.
√ Component tns-android has 6.5.0 version and is up to date.
√ Component tns-ios has 6.5.0 version and is up to date.
"nativescript-angular": "^8.21.0",

Describe the bug
When using in iOS inside of a route, I am running into an unfamiliar error:

CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating 'this._control.addObserverForKeyPathOptionsContext')

The strange things I found:

  1. If I remove all the from within the first TabContentItem's view, it renders fine without errors.
  2. If I put my first Tab's TabContentItem's view outside of the layout and display it on its own, the view renders fine without errors.

Sample project

<Tabs (selectedIndexChanged)="onSelectedIndexChanged($event)">
  <TabStrip>
    <TabStripItem>
      <Label text="Label 1"></Label>
    </TabStripItem>
    <TabStripItem>
      <Label text="Label 2"></Label>
    </TabStripItem>
  </TabStrip>
  <TabContentItem>
    <StackLayout width="100%">
      <FlexboxLayout flexDirecton="row" justifyContent="space-between" class="m-x-20 m-t-10">
        <StackLayout width="100%" orientation="horizontal" color="gray">
          <Label [text]="well.NAME" verticalAlignment="center" textWrap="true" fontSize="30"></Label>
        </StackLayout>
        <StackLayout orientation="vertical" color="gray" minWidth="70" minHeight="50" (tap)="toggleSaved()">
          <Label
            text="&#xf005;"
            [ngClass]="{ fas: isSaved, far: !isSaved }"
            [color]="isSaved ? '#ffc900' : 'gray'"
            horizontalAlignment="center"
            fontSize="50"
          ></Label>
          <Label [text]="isSaved ? 'Saved' : 'Save'" horizontalAlignment="center" fontSize="18"></Label>
        </StackLayout>
      </FlexboxLayout>
      <ScrollView>
        <StackLayout orientation="vertical" class="m-x-20">
          <Label [text]="'Company: ' + well.COMPANY" class="m-b-2"></Label>
          ...
          <Button class="-primary" text="MORE DETAIL" (tap)="moreDetail()"></Button>
          <Button class="-alternate" text="Zoom to Map" (tap)="zoomToMap()"></Button>
          <Button class="-alternate" text="Get Directions" (tap)="getDirections()"></Button>
        </StackLayout>
      </ScrollView>
    </StackLayout>
  </TabContentItem>
  <TabContentItem>
    <StackLayout>
      <Label text="Tab 2"></Label>
    </StackLayout>
  </TabContentItem>
</Tabs>

Partial stack trace: https://pastebin.com/08UEDqs1

image

image
@Tyler-V
Copy link
Author

Tyler-V commented May 12, 2020

No traction here, I think this is more of a NativeScript issue anyways.

@NathanaelA

This comment was marked as abuse.

Sign in to view
@Tyler-V
Copy link
Author

Tyler-V commented May 12, 2020 •
edited

@NathanaelA thanks for taking a look, hate to ask the dumb question but that looks like Android? This issue only occurs in iOS

I am also using <Tabs> inside of a <BottomNavigation> parent container, which may or may not be contributary to the issue.

<GridLayout>
  <RadSideDrawer #drawerComponent drawerLocation="Right" allowEdgeSwipe="false" drawerContentSize="305">
    <GridLayout tkDrawerContent rows="*, 30" class="sidedrawer">
      <wf-filter></wf-filter>
      <GridLayout row="1" orientation="horizontal" class="sidedrawer-footer">
        <Label [text]="'Version ' + version" class="text-center" verticalAlignment="center"></Label>
      </GridLayout>
    </GridLayout>
    <StackLayout tkMainContent>
      <BottomNavigation (loaded)="onTabsLoaded($event)" (selectedIndexChanged)="onSelectedIndexChanged($event)">
        <TabStrip>
          <TabStripItem class="tabStripItem">
            <Label text="Home"></Label>
            <Image src="font://&#xf015;" class="fas t-36"></Image>
          </TabStripItem>
          <TabStripItem class="tabStripItem">
            <Label text="Map"></Label>
            <Image src="font://&#xf3c5;" class="fas t-36"></Image>
          </TabStripItem>
          <TabStripItem class="tabStripItem">
            <Label text="API Search"></Label>
            <Image src="font://&#xf002;" class="fas t-36"></Image>
          </TabStripItem>
          <TabStripItem class="tabStripItem">
            <Label text="Saved"></Label>
            <Image src="font://&#xf005;" class="fas t-36"></Image>
          </TabStripItem>
          <TabStripItem class="tabStripItem">
            <Label text="Browse"></Label>
            <Image src="font://&#xf0ca;" class="fas t-36"></Image>
          </TabStripItem>
        </TabStrip>
        <TabContentItem>
          <page-router-outlet name="homeTab"></page-router-outlet>
        </TabContentItem>
        <TabContentItem>
          <page-router-outlet name="mapTab"></page-router-outlet>
        </TabContentItem>
        <TabContentItem>
          <page-router-outlet name="searchTab"></page-router-outlet>
        </TabContentItem>
        <TabContentItem>
          <page-router-outlet name="savedTab"></page-router-outlet>
        </TabContentItem>
        <TabContentItem>
          <page-router-outlet name="browseTab"></page-router-outlet> <--- <Tabs>
        </TabContentItem>
      </BottomNavigation>
    </StackLayout>
  </RadSideDrawer>
</GridLayout>

@NathanaelA

This comment was marked as abuse.

Sign in to view
@cybaj
Copy link

cybaj commented Jun 14, 2020

Similar issue happened to me, when I previewed example code at navigation tutorial doc.
Like your case, the issue happened only with iOS and same UI structure (<Tabs> inside of <BottomNavigation>)

log

Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (ios)
Start sending initial files for device iPhone (D2C7B173-9F30-4AAC-B875-************).
Successfully sent initial files for device iPhone (D2C7B173-9F30-4AAC-B875-************).
LOG from device iPhone: 
CONSOLE INFO file:///app/vendor.js:41:36: HMR: Hot Module Replacement Enabled. Waiting for signal.
LOG from device iPhone: The Preview app has terminated unexpectedly. Please run it again to get a detailed crash report.
The Preview app has terminated unexpectedly. Please run it again to get a detailed crash report.
LOG from device Nexus 5: Page Loaded
LOG from device Nexus 5: Page Loaded
LOG from device iPhone: 2020-06-14 17:57:50.543 nsplaydev[411:265895] ***** Fatal JavaScript exception - application has been terminated. *****
2020-06-14 17:57:50.543 nsplaydev[411:265895] Native stack trace:
1   0x1038ee970 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x103928fd8 NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
3   0x1044967b8 ffi_closure_SYSV_inner
4   0x1044981b4 .Ldo_closure
5   0x18a2075a8 <redacted>
6   0x18c76a7dc <redacted>
7   0x18c770958 <redacted>
8   0x18c77b578 <redacted>
9   0x18c6c3f1c <redacted>
10  0x18c6edc08 <redacted>
11  0x18c6ee5fc <redacted>
12  0x185c7be68 <redacted>
13  0x185c76d54 <redacted>
14  0x185c77320 <redacted>
15  0x185c76adc CFRunLoopRunSpecific
16  0x18fbfc328 GSEventRunModal
17  0x189d71ae0 UIApplicationMain
18  0x104498044 ffi_call_SYSV
19  0x104495edc ffi_call_int
20  0x1044959d8 ffi_call
21  0x1038b146c NativeScript::FunctionWrapper::call(JSC::ExecState*)
22  0x104462cb0 llint_entry
23  0x1044600c8 llint_entry
24  0x1044600c8 llint_entry
25  0x1044600c8 llint_entry
26  0x1044600c8 llint_entry
27  0x1044600c8 llint_entry
28  0x104460020 llint_entry
29  0x1044600c8 llint_entry
30  0x104441788 vmEntryToJavaScript
31  0x1039edab0 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&)
2020-06-14 17:57:50.546 nsplaydev[411:265895] JavaScript stack trace:
2020-06-14 17:57:50.546 nsplaydev[411:265895] file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:61:124
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:893:53
at file:///app/tns_modules/@nativescript/core/ui/layouts/stack-layout/stack-layout.js:52:68
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:136:29
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:923:24
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:134:31
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:34
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:133:27
at file:///app/tns_modules/@nativescript/core/ui/layouts/stack-layout/stack-layout.js:50:29
at file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:58:27
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:893:53
at file:///app/tns_modules/@nativescript/core/ui/page/page.js:299:53
at file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:58:27
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at layoutView(file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper.js:64:53)
at file:///app/tns_modules/@nativescript/core/ui/page/page.js:195:34
at UIApplicationMain([native code])
at run(file:///app/tns_modules/@nativescript/core/application/application.js:312:26)
at file:///app/bundle.js:170:65
at ./app.ts(file:///app/bundle.js:186:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
2020-06-14 17:57:50.546 nsplaydev[411:265895] JavaScript error:
file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:61:124: JS ERROR Error: onMeasure() did not set the measured dimension by calling setMeasuredDimension() Label(61)@tabs/item-page.xml:9:9;
2020-06-14 17:57:50.547 nsplaydev[411:265895] PlayLiveSync: Uncaught Exception
2020-06-14 17:57:50.547 nsplaydev[411:265895] PlayLiveSync: Sending crash report
2020-06-14 17:57:54.549 nsplaydev[411:265895] *** JavaScript call stack:
(
	0   UIApplicationMain@[native code]
	1   run@file:///app/tns_modules/@nativescript/core/application/application.js:312:26
	2   @file:///app/bundle.js:170:65
	3   ./app.ts@file:///app/bundle.js:186:34
	4   __webpack_require__@file:///app/runtime.js:751:34
	5   checkDeferredModules@file:///app/runtime.js:44:42
	6   webpackJsonpCallback@file:///app/runtime.js:31:39
	7   anonymous@file:///app/bundle.js:2:61
	8   evaluate@[native code]
	9   moduleEvaluation@:1:11
	10  @:2:1
	11  asyncFunctionResume@:1:11
	12  @:24:9
	13  promiseReactionJob@:1:11
)
2020-06-14 17:57:54.549 nsplaydev[411:265895] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Error: onMeasure() did not set the measured dimension by calling setMeasuredDimension() Label(61)@tabs/item-page.xml:9:9;
 at 
file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:61:124
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:893:53
at file:///app/tns_modules/@nativescript/core/ui/layouts/stack-layout/stack-layout.js:52:68
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:136:29
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:923:24
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:134:31
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:125:34
at file:///app/tns_modules/@nativescript/core/ui/layouts/layout-base-common.js:133:27
at file:///app/tns_modules/@nativescript/core/ui/layouts/stack-layout/stack-layout.js:50:29
at file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:58:27
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-common.js:893:53
at file:///app/tns_modules/@nativescript/core/ui/page/page.js:299:53
at file:///app/tns_modules/@nativescript/core/ui/core/view/view.js:58:27
at file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper-common.js:26:26
at layoutView(file:///app/tns_modules/@nativescript/core/ui/core/view/view-helper/view-helper.js:64:53)
at file:///app/tns_modules/@nativescript/core/ui/page/page.js:195:34
at UIApplicationMain([native code])
at run(file:///app/tns_modules/@nativescript/core/application/application.js:312:26)
at file:///app/bundle.js:170:65
at ./app.ts(file:///app/bundle.js:186:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(0x185cfea48 0x185a25fa4 0x1038eee48 0x103928fd8 0x1044967b8 0x1044981b4 0x18a2075a8 0x18c76a7dc 0x18c770958 0x18c77b578 0x18c6c3f1c 0x18c6edc08 0x18c6ee5fc 0x185c7be68 0x185c76d54 0x185c77320 0x185c76adc 0x18fbfc328 0x189d71ae0 0x104498044 0x104495edc 0x1044959d8 0x1038b146c 0x104462cb0 0x1044600c8 0x1044600c8 0x1044600c8 0x1044600c8 0x1044600c8 0x104460020 0x1044600c8 0x104441788 0x1039edab0 0x104292c98 0x1038c9c88 0x1041605e0 0x10446296c 0x1044600c8 0x1044600c8 0x1044600c8 0x104460020 0x1044600c8 0x104441788 0x1039edab0 0x104292e50 0x104159908 0x1038bf5c8 0x103938e80 0x104ae225c 0x102ffb524 0x185b00360)
libc++abi.dylib: terminating with uncaught exception of type NSException
2020-06-14 17:57:54.550 nsplaydev[411:265895] PlayLiveSync: Uncaught Exception

But I can't reproduce it...

@rigor789
Copy link
Member

rigor789 commented Sep 7, 2023

Closing because BottomNavigation and Tabs are no longer part of core since NativeScript 8.0:

https://blog.nativescript.org/nativescript-8-announcement/#important-note-about-bottomnavigation-and-tabs

@rigor789 rigor789 closed this as completed Sep 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@NathanaelA @rigor789 @Tyler-V @cybaj