Not work in TabView if map is added on the second TabViewItem (VueJs, androidTabsPosition=Bottom)

[karngenie]

When i add the mapbox on the second TabViewItem (and i use androidTabsPosition=Bottom for no swipe). The map not is loaded (the zone is white)

if I set the value of selectedIndex to 1, it works

Any idea ?

<template>
  <Page class="page">
    <TabView id="tabViewContainer" ref="tabViewContainerRef" :selectedIndex="selectedIndex" androidTabsPosition="bottom" androidOffscreenTabLimit="2">
        <TabViewItem title="Liste">
            <StackLayout>
                <ScrollView>
                    <StackLayout height="100%">
                      <Button class="btn btn-primary" @tap="$router.push('/counter')">Counter</Button>
                      <Button class="btn btn-primary" @tap="$router.push('/hello')">Hello World</Button>
                      <Button class="btn btn-primary" @tap="getJokes">Hello World</Button>
                      <ListView class="list-group" for="arbre in datas" @itemTap="onItemTap" style="height:1250px">
                        <v-template>
                          <FlexboxLayout flexDirection="row" class="list-group-item">
                            
                            <Label :text="arbre.fields.libellefrancais + ' - ' + arbre.fields.adresse" class="list-group-item-heading" style="width: 60%" />
                          </FlexboxLayout>
                        </v-template>
                      </ListView>                       
                    </StackLayout>                    
                </ScrollView>
            </StackLayout>

        </TabViewItem>
        <TabViewItem title="Map">
            <StackLayout>
              
              <ContentView height="100%" width="100%">
                
                <Mapbox
                    accessToken="pk.eyJ1Ijoia2FybmdlbmllIiwiYSI6ImNqbGZjODNoYzB2Yncza3V2eHM2bzZ0ancifQ.QJ6ABaXwJQGAepKAix9CtA"
                    mapStyle="traffic_day"
                    latitude="48.8587741"
                    longitude="2.2069771"
                    hideCompass="true"
                    zoomLevel="18"
                    showUserLocation="true"
                    disableZoom="false"
                    disableRotation="false"
                    disableScroll="false"
                    disableTilt="false"
                    @mapReady="onMapReady($event)"
                    ref="map">
                  </Mapbox>
                </ContentView>
            </StackLayout>
        </TabViewItem>
    </TabView>
  </Page>
</template>

[jafaircl]

I have the same issue in Angular. If I follow this template where tabs are lazy loaded, it works fine no matter which tab you put the map in. There may be a similar template for Vue.

[horia-alungulesei]

Had a similar issue, not Vue or Angular just Nativescript (XML and JS). A potential workaround is to set the androidOffscreenTabLimit flag with an appropriate value for the TabView to force the tab to load, even if it is not visible.

[ngunhaSO]

I have the same issue on ios, can you provide a bit more detail for the workaround? @jafaircl @horia-alungulesei Thanks!

[VaidasDatenis]

@jafaircl your link is not valid any more. Care to share again? And I have this issue. I am using Angular 8, NativeScript, Mapbox in Tabview. It just not showing up.. HELP! UPDATE I used like sugested @karngenie selectedIndex="2" or selectedIndex="1" but my application crashes..