getting error when clicking on a story. "Cannot add new property __reanimatedHostObjectRef"

[yousafConovo]

I am getting this error every time i click on the story.

Here is the code snippet. // The state setStoriesCustom(JSON.parse(JSON.stringify(array)));

//The component <MultiStory stories={storiesCustom} transitionMode={TransitionMode.Cube} ItemSeparatorComponent={() => } ref={multiStoryRef} / callback after multi story is closed viewedStories contains multi dimension array of booleans whether story is seen or not / onComplete={closeStory} avatarProps={{ viewedStoryContainerStyle: { borderColor: Colors.lightGrey, }, }} storyContainerProps={{ renderHeaderComponent: ({userStories}) => ( <Header {...{userStories, multiStoryRef}} /> ), renderFooterComponent: ({userStories, story, progressIndex}) => ( <Footer {...{userStories, story, progressIndex}} /> ), renderIndicatorComponent: () => , barStyle: { barActiveColor: Colors.red, }, }} />

[dhruv-h-simform]

@yousafConovo Thank you for bringing up the question.

can you please check the installation of react-native-reanimated and version compatibility?

Also can you please share your package.json file? it would be very helpful.

[arslan-Techno]

@dhruv-h-simform i am getting the same error on ios and for android screen goes black but on ios it the image shows half and show this error

[geertvansoest]

@dhruv-h-simform @arslan-Techno Do you have any updates on this? I have the exact same issue.

The dependencies in our package.json are like this:

"dependencies": {
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-async-storage/async-storage": "^1.18.2",
    "@react-native-clipboard/clipboard": "^1.10.0",
    "@react-native-cookies/cookies": "^6.2.1",
    "@react-native-firebase/analytics": "^18.4.0",
    "@react-native-firebase/app": "^18.4.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-picker/picker": "^2.5.1",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/native-stack": "^6.6.2",
    "@reduxjs/toolkit": "^1.8.3",
    "@sentry/react-native": "^5.9.0",
    "@types/lodash": "^4.14.191",
    "lodash": "^4.17.21",
    "metro-config": "^0.76.5",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-hook-form": "^7.34.0",
    "react-native": "^0.72.0",
    "react-native-asset": "^2.0.1",
    "react-native-bootsplash": "^3.2.4",
    "react-native-date-picker": "^4.2.5",
    "react-native-device-info": "^10.11.0",
    "react-native-fast-image": "^8.6.3",
    "react-native-fbsdk-next": "^12.1.0",
    "react-native-flash-message": "^0.4.1",
    "react-native-form-select-picker": "^0.0.12",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-in-app-review": "^4.3.3",
    "react-native-inappbrowser-reborn": "^3.7.0",
    "react-native-intersection-observer": "^0.2.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-onesignal": "^4.4.0",
    "react-native-paper": "^5.10.5",
    "react-native-parsed-text": "^0.0.22",
    "react-native-reanimated": "^3.8.0",
    "react-native-reanimated-carousel": "^3.1.5",
    "react-native-safe-area-context": "^4.5.3",
    "react-native-screens": "^3.21.0",
    "react-native-story-view": "^1.0.0",
    "react-native-svg": "^13.9.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-tracking-transparency": "^0.1.1",
    "react-native-video": "^5.2.1",
    "react-native-video-cache-control": "^1.2.2",
    "react-native-webview": "^13.2.2",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "redux-deep-persist": "^1.0.7",
    "redux-persist": "^6.0.0",
    "url": "^0.11.0"
},
"devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.0",
    "@tsconfig/react-native": "^3.0.0",
    "@types/jest": "^29.5.5",
    "@types/react": "^18.0.24",
    "@types/react-native-video": "^5.0.14",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "@typescript-eslint/parser": "^6.7.2",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "^0.76.5",
    "prettier": "^3.0.3",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.2.2"
},

Our implementation, using custom navigation, is like this:

{isStoryViewVisible && (
   <MultiStoryContainer
      viewedStories={[]}
      visible={isStoryViewVisible}
      onComplete={() => setIsStoryViewVisible(false)}
      userStoryIndex={pressedIndex}
      stories={mapStoriesData(props.stories)}
      renderFooterComponent={undefined}
      transitionMode={TransitionMode.Scale}
   />
)}

Update: After some hours of testing and debugging I found out the errors as mentioned by @arslan-Techno, and the story image/video having just the half of the screen width, are solved by removing/disable this line of code:

contentContainerStyle={{
   width: Metrics.screenWidth * stories.length,
}}

https://github.com/SimformSolutionsPvtLtd/react-native-story-view/blob/main/src/components/MultiStoryContainer/MultiStoryContainer.tsx#L202

Does this make any sense? And what could be the reason for this to occur errors in our projects and not for everyone?