Cannot add new property '__reanimatedHostObjectRef'

[wanted-o]

Describe the bug
I can't use an array of objects coming from Redux selector, it causes crash Cannot add new property '__reanimatedHostObjectRef'. Making a deep copy with JSON.parse(JSON.stringify(props.items)) solves the problem.

To Reproduce
Steps to reproduce the behavior:

1. Use data from Redux selector
2. See error

Expected behavior
It shouldn’t cause a crash.

Screenshots

Versions (please complete the following information):

• react: v18.0.0
• react-native: v0.69.6
• react-native-reanimated: v2.10.0
• react-native-reanimated-carousel: v3.1.1
• react-native-gesture-handler: v2.5.0

Smartphone (please complete the following information):

• Device: iPhone 13
• OS: iOS 16.0

Additional context
The crash was before and issue was resolved here Closed issue but in react-native-reanimated-carousel: v3.1.1 it reappeared.

[oleksandr-dziuban]

Hi guys, have the same issue.

If you have some free time, could you please check? Thanks a lot

[wfern]

Hey guys! I have this issue too after upgrade to 3.1.1, but I was able to fix it by "reducing" the item object, e.g:

BEFORE:

// Each user has a lot of data
const users = useSelector(({ userGroup }) => userGroup.users);

AFTER:

// Now, each user have only the necessary data
const loungeUsers = useSelector(({ userGroup }) =>
  userGroup.users.map((user) => {
    return {
      id: user.id,
      name: user.name,
      pictureUrl: user.pictureUrl,
    };
  }),
);

I don't know if it was because every item has a lot of data or it has a specific kind of data... But for me "reducing" the object that works.

And then, if not works, downgrading to 3.1.0 temporarily solves the issue too.

Please guys, test it and send a feedback, it helps the maintainers to have a north.

[dohooo]

Sorry, I've been working all day. I am really busy. It's a little tiring for me to maintain this project right now. 😞
Released in 3.1.2, and tell me the result, please. thx

[wfern]

Hey guys! I have this issue too after upgrade to 3.1.1, but I was able to fix it by "reducing" the item object, e.g:

BEFORE:

// Each user has a lot of data
const users = useSelector(({ userGroup }) => userGroup.users);

AFTER:

// Now, each user have only the necessary data
const loungeUsers = useSelector(({ userGroup }) =>
  userGroup.users.map((user) => {
    return {
      id: user.id,
      name: user.name,
      pictureUrl: user.pictureUrl,
    };
  }),
);

I don't know if it was because every item has a lot of data or it has a specific kind of data... But for me "reducing" the object that works.

And then, if not works, downgrading to 3.1.0 temporarily solves the issue too.

Please guys, test it and send a feedback, it helps the maintainers to have a north.

After testing a little more, this issue still occurs on 3.1.2.

If the item data coming from redux has an object the error occurs. E.g:

{
  id: item.id,
  // this will not work
  objectExample: item.objectExample
}

but if you spread/copy the object, it will work, e.g:

{
  id: item.id,
  // this will work
  objectExample: { ...item.objectExample }
}

It's strange because it was not a issue on 3.1.0

[dohooo]

Hey guys! I have this issue too after upgrade to 3.1.1, but I was able to fix it by "reducing" the item object, e.g:
BEFORE:

// Each user has a lot of data
const users = useSelector(({ userGroup }) => userGroup.users);

AFTER:

// Now, each user have only the necessary data
const loungeUsers = useSelector(({ userGroup }) =>
  userGroup.users.map((user) => {
    return {
      id: user.id,
      name: user.name,
      pictureUrl: user.pictureUrl,
    };
  }),
);

I don't know if it was because every item has a lot of data or it has a specific kind of data... But for me "reducing" the object that works.
And then, if not works, downgrading to 3.1.0 temporarily solves the issue too.
Please guys, test it and send a feedback, it helps the maintainers to have a north.

After testing a little more, this issue still occurs on 3.1.2.

If the item data coming from redux has an object the error occurs. E.g:

{
  id: item.id,
  // this will not work
  objectExample: item.objectExample
}

but if you spread/copy the object, it will work, e.g:

{
  id: item.id,
  // this will work
  objectExample: { ...item.objectExample }
}

It's strange because it was not a issue on 3.1.0

Could you give me a repo that includes minimal reproducing?

[dohooo]

OH, wait. Maybe I found a resolution. @wfern

[dohooo]

3.1.3

[wanted-o]

Hello @dohooo, checked 3.1.3 and the same crash still exist. Could you check?

[wanted-o]

I found the same issue in react-native-reanimated library, maybe it will help you to resolve the issue.
software-mansion/react-native-reanimated#1517

[ShaneZhengNZ]

We get the same crash. Woked fine with 3.0.6, but crashed with 3.1.3