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

[Tyler-V]

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

[Tyler-V]

Possibly related to https://github.com/NativeScript/nativescript-angular/issues/2001