nativescript-carousel

nativescript-carousel copied to clipboard

Hello; (first time posting any issues so let me know if i need to add/do anything else please) I have been testing out a page that lives in a Carousel that has a Tabs / BottomNavigation section on it. The issue I've come across is that on iOS, the only way to switch tabs is by longpressing the tab. If anyone has any indication as to what im doing wrong i'd greatly appreciate it. Ill try to provide as much info as possible.

"dependencies": { "@angular/animations": "~11.0.0", "@angular/common": "~11.0.0", "@angular/compiler": "~11.0.0", "@angular/core": "~11.0.0", "@angular/forms": "~11.0.0", "@angular/platform-browser": "~11.0.0", "@angular/platform-browser-dynamic": "~11.0.0", "@angular/router": "~11.0.0", "@nativescript-community/drawingpad": "^4.1.0", "@nativescript-community/ui-pulltorefresh": "^2.4.8", "@nativescript/angular": "~11.0.0", "@nativescript/animated-circle": "^1.1.6", "@nativescript/core": "~7.1.0", "@nativescript/datetimepicker": "2.1.0", "@nativescript/iqkeyboardmanager": "^2.0.0", "@nativescript/picker": "^3.0.1", "@nativescript/secure-storage": "^3.0.0", "@nativescript/theme": "~3.0.0", "@nstudio/nativescript-cardview": "^2.0.1", "@nstudio/nativescript-checkbox": "^2.0.4", "@nstudio/nativescript-filterable-listpicker": "^3.0.0", "moment": "^2.29.1", "nativescript-appversion": "^1.4.4", "nativescript-carousel": "^7.0.1", "nativescript-fingerprint-auth": "^7.0.2", "nativescript-localstorage": "^2.0.2", "nativescript-mediafilepicker": "^4.0.2", "nativescript-ui-calendar": "^7.0.2", "nativescript-ui-listview": "^9.1.0", "reflect-metadata": "~0.1.12", "rxjs": "^6.6.0" }, "devDependencies": { "@angular/cli": "^11.2.1", "@angular/compiler-cli": "~11.0.0", "@nativescript/android": "7.0.1", "@nativescript/ios": "7.2.0", "@nativescript/schematics": "^11.0.0", "@nativescript/types": "~7.0.0", "@nativescript/webpack": "~4.0.0", "@ngtools/webpack": "~11.0.0", "node-sass": "^4.14.1", "tslint": "^5.20.1", "typescript": "^4.0.8", "webpack": "^4.46.0", "zone.js": "^0.10.3" },

--Carousel Component

<Carousel #myCarousel height="100%" width="100%" [selectedPage]="segmentedTabIndex" > <Tabs selectedIndex="1">

                <TabStrip>
                    <TabStripItem>
                        <Label text="Home"></Label>
                        <Image src="font://&#xf015;" class="fas"></Image>
                    </TabStripItem>
                    <TabStripItem class="special">
                        <Label text="Account"></Label>
                        <Image src="font://&#xf007;" class="fas"></Image>
                    </TabStripItem>
                    <TabStripItem class="special">
                        <Label text="Search"></Label>
                        <Image src="font://&#xf00e;" class="fas"></Image>
                    </TabStripItem>
                </TabStrip>


                <TabContentItem>
                    <GridLayout>
                        <Label text="Home Page" class="h2 text-center"></Label>
                    </GridLayout>
                </TabContentItem>
                <TabContentItem>
                    <GridLayout>
                        <Label text="Account Page" class="h2 text-center"></Label>
                    </GridLayout>
                </TabContentItem>
                <TabContentItem>
                    <GridLayout>
                        <Label text="Search Page" class="h2 text-center"></Label>
                    </GridLayout>
                </TabContentItem>

            </Tabs>

        </CarouselItem>
    </Carousel>

https://user-images.githubusercontent.com/31323139/131887535-216fcb0c-5f57-4308-afda-663c61ad0103.mov