Cannot add new property '__reanimatedHostObjectRef' #66

baronha · 2021-12-31T07:24:54Z

When I pass the data returned from the API I get an error: Cannot add new property '__reanimatedHostObjectRef'

The text was updated successfully, but these errors were encountered:

dohooo · 2021-12-31T07:27:46Z

Interesting. I'll try

dohooo · 2021-12-31T07:30:19Z

Are there any examples that can be replicated？

dohooo · 2021-12-31T11:40:21Z

Hi? Look forward to solving your problem, but I need an example.

dohooo · 2022-01-01T04:25:04Z

If there is Demo, I will reopen it.

Wuyialex · 2022-01-15T14:15:39Z

i have same issue with reaniamted@2.3.0-beta4

dohooo · 2022-01-15T14:18:41Z

i have same issue with reaniamted@2.3.0-beta4

Are there any examples that can be replicated？

Wuyialex · 2022-01-15T14:23:31Z

i have same issue with reaniamted@2.3.0-beta4

Are there any examples that can be replicated？

I'm sorry. It doesn't seem to have anything to do with the reanimated version. It seems to happen in a specific layout situation, so I'm looking for the cause

Wuyialex · 2022-01-15T14:28:39Z

i have same issue with reaniamted@2.3.0-beta4

Are there any examples that can be replicated？

The component that caused the error is as follows.

Wuyialex · 2022-01-15T14:36:44Z

i have same issue with reaniamted@2.3.0-beta4

Are there any examples that can be replicated？

The component that caused the error is as follows.

In my opinion, this problem seems to occur when a specific type of object is included in the data array. For example, if you put [1,2,3] in data, no error occurs.

Wuyialex · 2022-01-15T14:40:40Z

i have same issue with reaniamted@2.3.0-beta4

Are there any examples that can be replicated？

The component that caused the error is as follows.

In my opinion, this problem seems to occur when a specific type of object is included in the data array. For example, if you put [1,2,3] in data, no error occurs.

I found the cause. This error occurs when JSX is included in the item object of data.

baronha · 2022-01-16T05:32:39Z

I used a very bad solution but can fix this for now and wait for later releases:

data={JSON.parse(JSON.stringfy(data)}

dohooo · 2022-01-16T07:20:46Z

Can you give me a repo to reproduce? I've tried many times and I still can't reproduce your problem.

dohooo · 2022-01-16T07:21:00Z

Can you give me a repo to reproduce? I've tried many times and I still can't reproduce your problem.

@baronha @Wuyialex

c0nsoleg · 2022-01-22T16:54:44Z

@dohooo I am currently struggling with this error as well but I wasn't able to reproduce it outside my app. I have large array of objects where are other objects and arrays nested in each other but I am not quite sure if it is causing an error. When I am passing this object from my component props (data is fetched from api) to Carousel then I am getting an error but if I stringify it copy from console and put it instead then everything works fine (that's why baronha solution works).

dohooo · 2022-01-22T17:17:54Z

@dohooo I am currently struggling with this error as well but I wasn't able to reproduce it outside my app. I have large array of objects where are other objects and arrays nested in each other but I am not quite sure if it is causing an error. When I am passing this object from my component props (data is fetched from api) to Carousel then I am getting an error but if I stringify it copy from console and put it instead then everything works fine (that's why baronha solution works).

Show me a copy of your real data？ it can be fake.

c0nsoleg · 2022-01-22T17:25:21Z

@dohooo Here it is

[
  {
    "object": {
      "name": "category-name",
      "color": "#F97316",
      "iconUrl": "https://via.placeholder.com/300.png"
    },
    "primary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ],
    "secondary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#F97316",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ]
  },
  {
    "category": {
      "name": "category-name",
      "color": "#6366F1",
      "iconUrl": "https://via.placeholder.com/300.png"
    },
    "primary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ],
    "secondary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#6366F1",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ]
  },
  {
    "category": {
      "name": "category-name",
      "color": "#4ade80",
      "iconUrl": "https://via.placeholder.com/300.png"
    },
    "primary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ],
    "secondary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#4ade80",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ]
  },
  {
    "category": {
      "name": "category-name",
      "color": "#67E8F9",
      "iconUrl": "https://via.placeholder.com/300.png"
    },
    "primary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "PRIMARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ],
    "secondary": [
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      },
      {
        "id": "some-string-ids",
        "number1": 1,
        "number2": 0,
        "object": {
          "name": "some-object-name",
          "type": "SECONDARY",
          "object2": {
            "name": "category-name",
            "color": "#67E8F9",
            "iconUrl": "https://via.placeholder.com/300.png"
          }
        }
      }
    ]
  }
]

dohooo · 2022-01-22T17:31:59Z

@c0nsoleg I may find the problem. Can you try it with me? Discord is here.

dohooo · 2022-01-22T17:32:54Z

https://discord.gg/KsXRuDs43y

dohooo · 2022-01-23T08:11:26Z

GiridharKarnik/advanced-react-native-sortable-list#13

dohooo · 2022-01-23T11:42:23Z

I don't think I can fix it any time soon because I really can't reproduce it. If someone can provide me with a stable repo, I'll try again, but I think I'll put it on hold... I'll pin this issue

braandl · 2022-01-24T16:42:16Z

Hm, I seldomly saw the same issue, but I did not have the time to investigate yet. Since the crash is in the native part of reanimated2, it could also be a ra2 bug? Also for me it only happend on android.

dohooo · 2022-01-25T07:01:14Z

Hm, I seldomly saw the same issue, but I did not have the time to investigate yet. Since the crash is in the native part of reanimated2, it could also be a ra2 bug? Also for me it only happend on android.

I also think it might be a bug in RA2

anhquan291 · 2022-01-26T14:31:22Z

This one happens when I use an array from redux. Temporary solution:
data={JSON.parse(JSON.stringify(data))}

dohooo · 2022-01-26T17:05:19Z

It seems that the reason is that the value we passed in was modified? We cut the association by “parser”. But how do we know what has been modified

Saad-Bashar · 2022-01-27T17:26:53Z

Thanks for the awesome library! However, I am having the same issue with data coming from API (Redux) :(

anhquan291 · 2022-01-28T01:03:13Z

Thanks for the awesome library! However, I am having the same issue with data coming from API (Redux) :(

@Saad-Bashar use it
data={JSON.parse(JSON.stringify(data))}

dohooo · 2022-02-14T00:37:31Z

react-native-reanimated@2.4.0 was released. Did it fix this issue? Can anyone tell me about it

braandl · 2022-02-14T14:29:46Z

No, I'm sorry, the issue is still the same.

The Issue is still the same, but is now in line 38 instead of 28, probably due to code changes in reanimated.

dohooo · 2022-02-14T14:44:34Z

No, I'm sorry, the issue is still the same.

The Issue is still the same, but is now in line 38 instead of 28, probably due to code changes in reanimated.

That's an important clue. Maybe it's showing that it's not Carousel?

braandl · 2022-02-14T16:16:59Z

Hm, I am not 100% sure. Either that, or it is somehow used in an unsupported way. I have now an setup where I can directly reproduce this on Android, I'll investigate asap.

braandl · 2022-02-15T11:42:57Z

The issue happens like following:

When you assign data to the Carousel (in the data Props) and bind the exact same objects to another View.
When you then send the Object to any native Component, the Carousel will produce this exact error.

When you create a deep-copy before sending it to the native Module, e.g. by using

const myCopy = Object.assign({}, originalObject);

it will not crash anymore.

So apparently the RN Module Bridge does (maybe freeze?) the Object and therefore ruins it for Reanimated2.

My conclusion is, that this is a Reanimated2 issue, since it should check the Object's State and handle it properly, if the Object is e.g. frozen (or whatever it is, I did not dig into the bridge yet).

dohooo · 2022-02-15T11:59:06Z

The issue happens like following:

When you assign data to the Carousel (in the data Props) and bind the exact same objects to another View.

When you then send the Object to any native Component, the Carousel will produce this exact error.

When you create a deep-copy before sending it to the native Module, e.g. by using

const myCopy = Object.assign({}, originalObject);

it will not crash anymore.

So apparently the RN Module Bridge does (maybe freeze?) the Object and therefore ruins it for Reanimated2.

My conclusion is, that this is a Reanimated2 issue, since it should check the Object's State and handle it properly, if the Object is e.g. frozen (or whatever it is, I did not dig into the bridge yet).

Cool！The first thanks for your efforts！
It would be better if there is a repository that can reproduce this problem.

yairopro · 2022-02-16T15:58:19Z

software-mansion/react-native-reanimated#1517 (comment)

I made the repo

dohooo · 2022-03-25T08:43:11Z

The latest progress

KusStar · 2022-03-30T06:51:46Z

We figured out that data used in reanimated hooks like useDerivedValue and useAnimatedReaction only access length, maybe we can move it to outside, instead of passing the whole data to reanimated worklet: ncuhome@7e46016

Do you think this will work?

dohooo · 2022-03-30T06:59:10Z

We figured out that data used in reanimated hooks like useDerivedValue and useAnimatedReaction only access length, maybe we can move it to outside, instead of passing the whole data to reanimated worklet: ncuhome@7e46016

Do you think this will work?

Wow, An interesting solutions. But I did't to try it, Dit you try it with above question? This does seem to have something to do with Redux, Can you reproduce the problem and test it?

KusStar · 2022-03-30T07:11:09Z

We figured out that data used in reanimated hooks like useDerivedValue and useAnimatedReaction only access length, maybe we can move it to outside, instead of passing the whole data to reanimated worklet: ncuhome@7e46016
Do you think this will work?

Wow, An interesting solutions. But I did't to try it, Dit you try it with above question? This does seem to have something to do with Redux, Can you reproduce the problem and test it?

We use immer in our app, the same like Redux Toolkit does.
When passing data produced by immer to ReanimatedCarousel, will ocur the error.
But if we move length accessing outside like ncuhome@7e46016, the error fixed.
But we have not test totally, maybe there still are some edge cases we didn't test out.

dohooo · 2022-03-30T07:19:44Z

We figured out that data used in reanimated hooks like useDerivedValue and useAnimatedReaction only access length, maybe we can move it to outside, instead of passing the whole data to reanimated worklet: ncuhome@7e46016
Do you think this will work?

Wow, An interesting solutions. But I did't to try it, Dit you try it with above question? This does seem to have something to do with Redux, Can you reproduce the problem and test it?

We use immer in our app, the same like Redux Toolkit does. When passing data produced by immer to ReanimatedCarousel, will ocur the error. But if we move length accessing outside like ncuhome@7e46016, the error fixed. But we have not test totally, maybe there still are some edge cases we didn't test out.

Cool, Submit a PR and I'll release a beta version later and then ask everyone to give it a try

re #66

dohooo · 2022-03-30T08:43:56Z

Try this!~ 🍺

yarn add react-native-reanimated-carousel@2.3.3-beta.1

dohooo · 2022-03-30T08:46:20Z

I will release the official version if the problem is fixed. @baronha @anhquan291 @KusStar @yairopro @braandl @Wuyialex @c0nsoleg

dohooo · 2022-04-03T01:52:45Z

It looks fine, I have released the official version, 2.3.3.

kosbog · 2022-10-25T10:45:22Z

Faced with this issue in v3.1.1
This fix helps data={JSON.parse(JSON.stringify(data))}

baronha mentioned this issue Dec 31, 2021

Cannot add new property '__reanimatedHostObjectRef' software-mansion/react-native-reanimated#1517

Closed

dohooo closed this as completed Jan 1, 2022

dohooo reopened this Jan 15, 2022

dohooo added the help wanted Extra attention is needed label Jan 23, 2022

dohooo pinned this issue Jan 23, 2022

dohooo mentioned this issue Feb 19, 2022

Error when setting shared value. Message: Cannot add new property '__reanimatedHostObjRef' software-mansion/react-native-reanimated#2810

Closed

3 tasks

KusStar added a commit to ncuhome/react-native-reanimated-carousel that referenced this issue Mar 29, 2022

fix: dohooo#66

a325f3d

KusStar added a commit to ncuhome/react-native-reanimated-carousel that referenced this issue Mar 30, 2022

fix: dohooo#66

7e46016

KusStar mentioned this issue Mar 30, 2022

Fix: Cannot add new property '__reanimatedHostObjectRef' #151

Closed

KusStar added a commit to ncuhome/react-native-reanimated-carousel that referenced this issue Mar 30, 2022

fix: dohooo#66

54e74d2

KusStar mentioned this issue Mar 30, 2022

Fix: Cannot add new property '__reanimatedHostObjectRef' #152

Merged

dohooo added a commit that referenced this issue Mar 30, 2022

fix: fix reanimated error with __reanimatedHostObjectRef

046331c

re #66

dohooo self-assigned this Mar 30, 2022

dohooo closed this as completed Apr 3, 2022

dohooo unpinned this issue Apr 4, 2022

wanted-o mentioned this issue Nov 1, 2022

Cannot add new property '__reanimatedHostObjectRef' #296

Closed

Cannot add new property '__reanimatedHostObjectRef' #66

Cannot add new property '__reanimatedHostObjectRef' #66

Comments

baronha commented Dec 31, 2021

dohooo commented Dec 31, 2021

dohooo commented Dec 31, 2021

dohooo commented Dec 31, 2021

dohooo commented Jan 1, 2022

Wuyialex commented Jan 15, 2022

dohooo commented Jan 15, 2022

Wuyialex commented Jan 15, 2022

Wuyialex commented Jan 15, 2022

Wuyialex commented Jan 15, 2022

Wuyialex commented Jan 15, 2022

baronha commented Jan 16, 2022

dohooo commented Jan 16, 2022

dohooo commented Jan 16, 2022

c0nsoleg commented Jan 22, 2022 • edited Loading

dohooo commented Jan 22, 2022

c0nsoleg commented Jan 22, 2022

dohooo commented Jan 22, 2022

dohooo commented Jan 22, 2022

dohooo commented Jan 23, 2022

dohooo commented Jan 23, 2022

braandl commented Jan 24, 2022 • edited Loading

dohooo commented Jan 25, 2022

anhquan291 commented Jan 26, 2022 • edited Loading

dohooo commented Jan 26, 2022

Saad-Bashar commented Jan 27, 2022

anhquan291 commented Jan 28, 2022

dohooo commented Feb 14, 2022

braandl commented Feb 14, 2022 • edited Loading

dohooo commented Feb 14, 2022

braandl commented Feb 14, 2022

braandl commented Feb 15, 2022

dohooo commented Feb 15, 2022 • edited Loading

yairopro commented Feb 16, 2022

dohooo commented Mar 25, 2022

KusStar commented Mar 30, 2022

dohooo commented Mar 30, 2022

KusStar commented Mar 30, 2022 • edited Loading

dohooo commented Mar 30, 2022

dohooo commented Mar 30, 2022 • edited Loading

dohooo commented Mar 30, 2022

dohooo commented Apr 3, 2022

kosbog commented Oct 25, 2022

c0nsoleg commented Jan 22, 2022 •

edited

Loading

braandl commented Jan 24, 2022 •

edited

Loading

anhquan291 commented Jan 26, 2022 •

edited

Loading

braandl commented Feb 14, 2022 •

edited

Loading

dohooo commented Feb 15, 2022 •

edited

Loading

KusStar commented Mar 30, 2022 •

edited

Loading

dohooo commented Mar 30, 2022 •

edited

Loading