Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
<Tabs> broken when used inside of a <BottomNavigation> (iOS Only)
See original GitHub issueEnvironment
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 <Tabs> in iOS inside of a <BottomNavigation> 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:
- If I remove all the <Button> from within the first TabContentItem’s view, it renders fine without errors.
- If I put my first Tab’s TabContentItem’s view outside of the <Tabs> 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=""
[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
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
LOL, my bad. 😀 I’ll test it on iOS. I totally missed that, I tend to test android first because it is mucho faster for me. 😃
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
But I can’t reproduce it…