Layout fail to change after returning from presentViewControllerAnimatedCompletion

[tempurai]

Layout fail to change after returning from presentViewControllerAnimatedCompletion:

Plugin Code:

export class Picker {
    constructor() {

    }

    Show(): Promise<ImageAsset[]> {
        let bsImagePicker = BSImagePickerViewController.alloc().init();
        bsImagePicker.maxNumberOfSelections = 6;
        bsImagePicker.navigationBar.barTintColor = (new Color("#F8F8F8")).ios;

        let page = topmost().currentPage.ios;

        return new Promise(function (resolve, reject) {
            // just a wrapping method for presentViewControllerAnimatedCompletion
            page.bs_presentImagePickerControllerAnimatedSelectDeselectCancelFinishCompletion(
                bsImagePicker, true,
                (asset: PHAsset) => {
                },
                (asset: PHAsset) => {
                },
                (assets: PHAsset[]) => {
                },
                (assets: NSArray<PHAsset>) => {
                    let imageAssets: SelectedAsset[] = [];

                    assets.enumerateObjectsUsingBlock((assets, i, boolRef) => {
                        imageAssets.push(new SelectedAsset(assets));
                    });

                    resolve(imageAssets);
                },
                null);
        });

    }
}

Angular component that calling it:

            <GridLayout row="2" col="0" class="editor-tool-container">
                    <WrapLayout #imageContainer row="1" col="0" width="100%"
                                orientation="horizontal"
                                itemHeight="77">

                        <ng-template ngFor let-image [ngForOf]="selectImages" let-i="index">
                            <PickedImageView [src]="image"
                                             (onDeleteImageEvent)="onDeleteImageEvent(i)"></PickedImageView>
                        </ng-template>

                        <Button class="picked-images picked-images-adder ion"
                                text="&#xf147;" (tap)="onSelectPhotoTapped($event)"></Button>
                    </WrapLayout>
                </GridLayout>
            </GridLayout>

    onSelectPhotoTapped(event) {
        console.log("onSelectPhotoTapped On this");

        // this.ngZone.runOutsideAngular(() => {

        let picker = new Picker();
        picker.Show().then((images: SelectedAsset[]) => {
            let toAppend: SelectedAsset[] = [];

            images.forEach(image => {
                console.log("image.fileUri", image.fileUri, FileManager.PhotoFilePath(image.fileUri))
                let found = false;
                this.selectImages.forEach((aImage: SelectedAsset) => {
                    if (image.fileUri === aImage.fileUri) {
                        found = true
                    }
                });
                if (!found) toAppend.push(image);
            });

            // this.ngZone.run(() => {

            console.log("onSelectPhotoTapped PUSH TO ARRAY", toAppend.length);
            this.selectImages.push(...toAppend);
            console.log("onSelectPhotoTapped detectChanges", this.selectImages.length);
            // Can confirmed that data have chagned
            this._changeDetectionRef.detectChanges();
            // });

        })

        // });
    }

After onSelectPhotoTapped called, BSImagePickerViewController presented as expected, but after returned from BSImagePickerViewController. Angular Component seems to be static and layout fail to update after data has changed.

[tempurai]

Update: This issue only exists when keyboard is focused. I only tested on iOS.

[tempurai]

Update: I also tested with nativescript-camera, the problem exists.

[NickIliev]

@LincanLi can you provide a sample project so I can debug and investigate the issue on my side. Contact me on my email ( in the GitHub details) or in the community slack (username: niliev) if you can share the project.