[iOS] Child items begins at index 1

[Alyshtar]

On iOS, the first item of the childItems list is not shown properly and an additionnal empty item is added at the end of the list

Make sure to check the demo app(s) for sample usage

Checked, problem exists with demo version

Make sure to check the existing issues in this repository

Checked

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

• iOS
• iOS version : 12.4
• emulator or device. What type of device? both emulator Iphone 6 and 8, device Iphone 7

Please, provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) : 6.0.3
• Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project) : 6.0.3
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) "tns-android": "6.0.0", "tns-ios": "6.0.2"
• Plugin(s): (look for the version numbers in the package.json file of your project and paste your dependencies and devDependencies here) :

"dependencies": {
		"nativescript-accordion": "^6.0.0-beta.2",
		"nativescript-theme-core": "^2.0.4",
		"nativescript-ui-calendar": "^5.0.0",
		"nativescript-ui-listview": "^7.0.4",
		"nativescript-ui-sidedrawer": "^7.0.0",
		"tns-core-modules": "^6.0.3"
	},
	"devDependencies": {
		"nativescript-dev-webpack": "~1.0.0",
		"typescript": "3.4.5"
	}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

No special steps, just load the application.

Is there any code involved?

• provide a code example to recreate the problem page.xml

<Page class="page" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:accordion="nativescript-accordion">

	<ActionBar title="Trombi" class="action-bar">
		<NavigationButton visibility="collapsed"></NavigationButton>
		<ActionBar.actionItems>
			<ActionItem icon="font://&#xf0c9;" class="font-awesome drawer-icon" tap="onDrawerButtonTap"/>
		</ActionBar.actionItems>
	</ActionBar>

	<AbsoluteLayout class="page-content">
		<StackLayout class="layout-main-content">
			<!--Main Header-->
			<FlexboxLayout class="msg-list-filter">
				<FlexboxLayout class="msg-list-filter-item">
					<Label class="msg-list-filter__text" text="Choisissez une promotion" verticalAlignment="middle" />
				</FlexboxLayout>
			</FlexboxLayout>
			<accordion:Accordion items="{{promoyears}}" 
			childItems="promos"
			itemHeaderTap="onYearTap" itemContentTap="onItemTap" 
			id="ac"  allowMultiple="true" 
			selectedIndexes="{{selectedIndexes}}">
 
				<accordion:Accordion.itemHeaderTemplate>
					<StackLayout>
						<Label text="{{ 'Promos ' + name  }}"/>
					</StackLayout>
				</accordion:Accordion.itemHeaderTemplate>

				<Accordion.itemContentTemplate>
					<StackLayout>
						<Label text="{{name}}"/>
					</StackLayout>
				</Accordion.itemContentTemplate>
 
			</accordion:Accordion>
		</StackLayout>
	</AbsoluteLayout>
</Page>

page-view-model.ts

import { ObservableArray } from "tns-core-modules/data/observable-array/observable-array";
import { AppRootViewModel } from "~/app-root/app-root-view-model";

export class TrombiViewModel extends AppRootViewModel {
	@ObservableProperty() promoyears: ObservableArray<PromoYear>;
	public selectedIndexes = [0, 1];

	constructor(selectedPage: string, redirectPage: string){
		super(selectedPage,redirectPage);

		this.promoyears = new ObservableArray<PromoYear>();
		this.promoyears.push(new PromoYear("2000"));
	}

	emptyPromoYears(): void{
		this.promoyears.length = 0;
	}

	addPromoYear(promos : PromoYear): void{
		this.promoyears.push(promos);
	}
}

export class PromoYear{
	public name:string;
	public promos : Array<Promo>;

	constructor(name:string, promos : Array<Promo> = new Array<Promo>()){
		this.name = name;
		this.promos = promos;
		this.promos.push(new Promo(0,"Promos de l'année"));
	}

	emptyPromos(): void{
		this.promos.length = 0;
	}

	addPromo(id : string, name : string): void{
		let idInt = +id;
		let item = new Promo(idInt,name);
		this.promos.push(item);
	}
}
export class Promo{
	public id;
	public name;

	constructor(key: number, value: string){
		this.id = key;
		this.name = value;
	}

}

I fill the arrays with a request response.

• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

[vpdevportal]

Same happens for me as well!!

[hmartDev]

Upgraded to nativescript 6.3 and same issue happens. Any plans to fix this bug? Thanks

[felipeaguiar]

I use this as workaround (Angular). Thanks for the awesome plugins.

onItemContentTap(event) {
  if (isIOS) {
     const data = this.items[event.index].items[event.childIndex - 1];
     // ...
  }
}