react-native-ui is not compatible with jsxRuntime: 'classic'

[shawnthye-guru]

Describe the bug
I am using @fluentui/react-native, but unable to use jsxRuntime: 'classic' due to @storybook/react-native-ui/src/util/status.tsx and other file without importing React

Blank expo template will work as expected with step no.2 below

To Reproduce
Steps to reproduce the behavior:

1. Create fresh new project with npx create-expo-app --template expo-template-storybook AwesomeStorybook
2. Modify babel.config.js as follows
   presets: [['babel-preset-expo', {jsxRuntime: 'classic'}]],
3. Run the storybook on IOS or Android

Expected behavior
What is the correct way to support classic runtime on @storybook/react-native-ui?

Screenshots

[dannyhw]

whats the usecase for using jsxRuntime classic?

[shawnthye-guru]

whats the usecase for using jsxRuntime classic?

Hi @dannyhw , Thanks for the reply.

In short, Fluent UI require Pragma

The simplest/quickest way is to add import React from 'react' on all *.tsx, but I wonder if it is the correct way.

see microsoft/fluentui-react-native#3263

[Saadnajmi]

(Maintainer of FluentUI React Native here) Would be curious to see if FluentUI React Native can do something differently to not require the classic runtime. This bit of code has always eluded me

[dannyhw]

Maybe jsxImportSource is part of the solution rather than classic mode , just guessing based on that issue title but i dont know this area very well😅.

[shawnthye-guru]

Maybe jsxImportSource is part of the solution rather than classic mode , just guessing based on that issue title but i dont know this area very well😅.

yea, i guess lets wait for @Saadnajmi 😄

[dannyhw]

There is some discussion here that seems related, seems like maybe if fluent-ui could provide the jsx exports then it could be set as jsxImportSource

Nativewind using the same setting, not sure if its for the same reason.