nativescript-community / nativescript-community/ui-collectionview

ios crash on back navigation when using visibility-binding inside itemtemplate

Open
#58 16 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
62
Forks
19
Avg merge
2d 15h
Merged PRs (30d)
2

Description

Make sure to check the demo app(s) for sample usage
Make sure to check the existing issues in this repository
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.

When navigating forwards and then backwards between multiple instances of a page using a collectionview, the iOS app crashes, when using a visibility binding inside the itemTemplate.
I only occurs when navigating at least 2 times to the same page.
Hard to explain by words, look at the video:

https://user-images.githubusercontent.com/6443021/228847852-7f1e6533-3602-4067-b05b-a6eeb50509bf.mov

***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught Error: Invalid visibility value: undefined. Valid values are: "visible", "hidden", "collapse".
at
[visibility:setNative](file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view/index.ios.js:598:0)
at applyPendingNativeSetters(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/properties/index.js:1117:0)
at initNativeView(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/properties/index.js:1076:0)
at onResumeNativeUpdates(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:877:22)
at _resumeNativeUpdates(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:351:0)
at onLoaded(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:305:0)
at onLoaded(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view/view-common.js:108:0)
at (file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:392:0)
at callFunctionWithSuper(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:386:0)
at callLoaded(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:392:0)
at loadView(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:556:0)
at (file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:307:0)
at eachChildView(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/layouts/layout-base-common.js:101:0)
at eachChild(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view/view-common.js:793:0)
at onLoaded(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:306:0)
at onLoaded(file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view/view-common.js:108:0)
at (file: app/webpack:/ns-collectionview/node_modules/@nativescript/core/ui/core/view-base/index.js:392:0)
at callFunctionWithSuper(file:///app/vendor.js<…>

<!-- itemTemplate -->

<StackLayout>
    <Label text="{{ id }}"/>
    <Label text="{{ title }}"/>
    <Label text="text" visibility="{{ isNew ? 'visible' : 'collapse' }}"/>  <!-- causing the issue -->
    <Button text="delete" tap="deleteItem"/>
</StackLayout>
export function onPageLoaded() {
  loadItems();
}

function loadItems() {
  vm.set("isLoading", true);

  Http.request({
      url: "https://pokeapi.co/api/v2/ability/?limit=10000",
      method: "GET"
  }).then((response) => {
     const json = response.content.toJSON();

     vm.get("items").splice(0, vm.get("items").length);
     vm.get("items").push(...json.results.map((data) => {
         return {
            title: data.name,
            id: data.url,
            isNew: false
         }
     }));

     vm.set("isLoading", false);
   }, (e) => {
      vm.set("isLoading", true);
   });
}

export function onItemTap()  {
  Frame.topmost().navigate("collectionview-page");
}

Not sure if this is really related to collectionview or maybe nativescript/core, but the issue only occurs using collectionview for us so far (not with RLV or default ListView), so I decided to report it here.

Which platform(s) does your issue occur on?
  • iOS
  • iOS 16 (also tested 15, 14, ...)
  • emulator and device
Please, provide the following version numbers that your issue occurs with:
  • CLI: 8.4.0
  • Cross-platform modules: 8.5.0 (also tested 8.4.7)
  • Runtime(s): 8.5.0 (also tested 8.4.1)
  • Plugin(s): collectionview 4.0.73
Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Just follow the steps from the video provided above

Is there any code involved?

ns-collectionview.zip

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the navigation sequence from the attached ns-collectionview.zip, using the itemTemplate with the visibility binding and the stack trace's visibility:setNative path as the first entry point. Compare the behavior across repeated navigation and collection view implementations; done means the iOS app no longer crashes with an undefined visibility value.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.