When using react 19 a warning is shown about element.ref being removed

[MJanOthman]

Describe the bug We have a UI Library where we use:

"@storybook/addon-ondevice-actions": "^8.5.2",
"@storybook/addon-ondevice-backgrounds": "^8.5.2",
"@storybook/addon-ondevice-controls": "^8.5.2",
"@storybook/addon-ondevice-notes": "^8.5.2",
"@storybook/addon-react-native-server": "0.0.6",
"@storybook/addon-react-native-web": "^0.0.26",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/blocks": "^8.5.1",
"@storybook/builder-webpack5": "^8.5.1",
"@storybook/global": "^5.0.0",
"@storybook/react": "^8.5.1",
"@storybook/react-native": "^8.5.2",
"@storybook/react-native-theming": "^8.5.2",
"@storybook/react-webpack5": "^8.5.1",
"@storybook/test": "^8.5.1",
"expo": "52.0.25",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.76.6"

When we used react 18.3.1 it was working without any errors, but now after upgrading react 18.3.1 to react 19.0.0, we are getting this error: Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.. When I run the App without storybook, it works without showing that error, so I am 100% sure it is coming form one of the storybook libraries. Any Idea how can this be fixed now? if there is no temporary solution, when will storybook react native support react 19?

[dannyhw]

@MJanOthman this seems like a warning not an error, it should be ignorable as a workaround for now.

I'm not sure how we would resolve this and have things still work for react 18 so I need to think about this a bit.

I will setup an example to debug this, I will need some time to investigate further.

[dannyhw]

I didn't forget about this but I have been focused more on getting v9 alpha out. Will come back to this in the next few days.

[kresli]

I can be mistaken but this warning appear when you using useRef inside render directly.

export const Default: Story {
  render: MyComponent
}

function MyComponent() {
  const ref = useRef(null);
  return <div ref={ref}/> // <--- ISSUE HERE
}

rendering MyComponent inside component will fix the issue

render: (props) => <MyComponent {...props}/>

[dannyhw]

I think the issue is more that there are uses of forwardRef in the codebase that are deprecated in react 19

the difficult thing is that I can't really remove that without breaking react 18 support.

are you saying that spreading the props fixes the warning for forwardRef too?

[dannyhw]

Now that expo 53 is out this will be more of a priority though so I'm going to have to solve it soon, sorry that I wasn't able to yet

[dannyhw]

updating the example and I didn't get this warning, at least not with the v9 beta.

Is there anything I need to do to make the warning appear?

[dannyhw]

let me know if you still see this issue because I'm not seeing it

[dannyhw]

@MJanOthman can you confirm this is still an issue? not able to reproduce.

[MJanOthman]

@dannyhw I did not manage to update to v9 beta, I am getting this Error: Error: main config file not found

[dannyhw]

@MJanOthman please check the migration steps

Update storybook dependencies to 9.x

Rename .storybook to .rnstorybook

install the 'storybook' package if not already installed

Regenerate your .storybook/storybook.requires.ts file by running yarn storybook-generate.

[dannyhw]

however even if its an issue with v8 still that would be good to know

[MJanOthman]

Yes it stilll show the issue with v8

[dannyhw]

@MJanOthman what exactly do I need to do to reproduce? does it just happen immediately when running the app? I didn't see this in my initial testing.

[MJanOthman]

@dannyhw Sorry for the late reply, yes it just shows up immediately when running the App (storybook)