react-native-web 0.12.0+ doesn't work with storybook due to deprecated components

[Umair706]

Describe the bug
In React Native, while i run the command 'yarn web' storybook gives the following warnings:

Attempted import error: 'ViewPropTypes' is not exported from 'react-native-web/dist/index' (imported as 'RNViewPropTypes').

Attempted import error: 'TimePickerAndroid' is not exported from 'react-native-web/dist/index'.

Attempted import error: 'TimePickerAndroid' is not exported from 'react-native-web/dist/index'.

Attempted import error: 'TimePickerAndroid' is not exported from 'react-native-web/dist/index'.

Attempted import error: 'DatePickerIOS' is not exported from 'react-native-web/dist/index'.

Attempted import error: 'DatePickerAndroid' is not exported from 'react-native-web/dist/index'.

Attempted import error: 'AsyncStorage' is not exported from 'react-native-web/dist/index'.

And on the browser it gives the error

To Reproduce
Steps to reproduce the behavior:

expo init appName

npx -p @storybook/cli sb init --type react_native

yarn add @storybook/addon-ondevice-actions @storybook/addon-ondevice-knobs @storybook/addon-actions @storybook/addon-knobs

yarn add @storybook/react-native-server

yarn start-storybook
yarn web

Code snippets
In App.js
export {default} from './storybook';

Package.json

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@storybook/addon-actions": "^6.0.26",
"@storybook/addon-knobs": "^6.0.26",
"@storybook/addon-ondevice-actions": "^5.3.23",
"@storybook/addon-ondevice-knobs": "^5.3.23",
"@storybook/react-native": "^5.3.23",
"@storybook/react-native-server": "^5.3.23",
"babel-loader": "^8.1.0",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"formik": "^2.2.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-web": "~0.13.12",
"yup": "^0.29.3"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}

System:

Additional context
May be the issue is with the version of react-native-web

[filozofer]

Same error here too. I hope we will be able to use Storybook on web for React Native project as soon as possible !

[dannyhw]

This is an issue with the latest version of expo/react-native-web they included a new version of react native web which deprecated many of the components we are using. Currently expo 39 for web specifically won't work because of the update to react native web in that version.

See the breaking changes of version 0.12.0 https://github.com/necolas/react-native-web/releases/tag/0.12.0, both DatePickerAndroid and DatePickerIOS are removed from react native web whilst only being deprecated in the current react native release.

This is a difficult fix to make because it would be a breaking change forcing people to install the Datepicker library and other where previously they wouldn't need to. I was hoping to delay this change for a 6.0 release rather than making a 5.4.

If this is a concern for the community I would be open to merging the fix which is not really a lot of work but would cause new dependencies for ondevice-knobs. Also if anyone can think of a way to make this change not be require the user to install extra dependencies please let me know.

[dannyhw]

Also apologies for the slow response I've been really busy recently.

Another thing If anyone wants to create a pr for this, the fix is to change the ondevice-knobs package to use the packages that have been made to replace the deprecated components in react native and remove the deprecated components from the code. In the case of the datepicker the version of the modal datepicker package needs to be updated and the datepicker package added to the dependencies.

[filozofer]

Thanx for your answer on this !
Maybe an another way to "fix" this without adding new dependencies is to disable the DatePicker behaviour for web ? A simple text-input allow to modify knobs even if it's not so great for ergonomic reason.
At least it will allow us to use storybook on web too which is really usefull as our manager / designers team members use mostly the web interface rather than a small interface on mobile device to iterate on our components !

[dannyhw]

@filozofer I guess that might be a possible solution however I worry that the problem stems from the import and not the usage. I need to spend a weekend or something to really dig into this issue and try out a few things. I'll definitely update here if I find out anything new.

[filozofer]

@dannyhw You may already know that but you can adapt the import base on the OS. In my project I've got sometimes two files :
MyComponentImports.web.js MyComponentImports.android.js and when I do the import { Something } from './MyComponentImports' it choose the proper one.
In the web import file you can do something like export const Something = null and then check for null value inside your component which use this import.
You got my trust on this, have a good week !

[dannyhw]

I've changed the name of this so that others can find it more easily when having issue with react native web.

Also an update, I had tried all weekend to update the expo example in the project and I kept running into dependency issues from yarn/node modules. I might have to recreate the example project to get it working properly.

[icaru88]

HI @dannyhw, may I ask if this issue is resolved in 6.0, will the issue for web launching in storybook-reactnative be resolved?

[dannyhw]

@icaru88 yes this will be resolved in 6.0.

I'd like to find a temporary solution for 5.3 without making breaking changes however I've got some doubts about whether its possible.

---

Looking at my previous comment I had some issues with the tooling in the repo to test any changes the last time around. I'll take another look as soon as I can.

[icaru88]

Thank you so much @dannyhw. your quick response is very much appreciated.

[lauriharpf]

Opened #190 to try to tackle this. Note the list of known issues and limitations, any improvements & fixes are most welcome!

[dannyhw]

This is probably fixed but we need to test all the controls before confirming this is done

[dannyhw]

App will now run correctly in web with the controls addon (knobs replacement) however has the following issues.

Since the deprecated components issue is now gone I will be opening separate issues for these problems and then closing this one.

• Color picker modal is constantly open on web
• date picker doesn't appear to do anything when clicking on the input box "DateTimePicker is not supported on: web" message in logs
• object control is very small vertically
• select control behaves similarly to the color picker (always open) but weirder

[dannyhw]

I would love to resolve this for 5.3 however my focus is currently on 6.0 and due to limited time for now the plan is to focus all bug fixes into 6.0.

If there is a overall demand for this fix in 5.3 I can re-think this approach though so let me know.

[scousino]

This might not be the right issue to make this comment, if so I can open up another issue. But with version 5.3, the DateTimePicker from @react-native-community/datetimepicker does not fire its onChange callback when the component is rendered in a story on a emulated Android device. Is this something that is fixed in 6.0 or is there a workaround/hack I'm missing to get this working in 5.3

[dannyhw]

This might not be the right issue to make this comment, if so I can open up another issue. But with version 5.3, the DateTimePicker from @react-native-community/datetimepicker does not fire its onChange callback when the component is rendered in a story on a emulated Android device. Is this something that is fixed in 6.0 or is there a workaround/hack I'm missing to get this working in 5.3

@scousino I think this is unrelated to this issue however since we've moved to the datepicker library in 6.0 and previously the built in component was used then it's likely been resolved in 6.0

[scousino]

Got it, thank you for the quick response @dannyhw!

[dannyhw]

I'm closing this issue since react native web now works correctly in the current alpha build of 6.0