vonovak / react-navigation-header-buttons

Easily render header buttons for react-navigation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ActionSheetIOS is missing in react-native-web >= 0.12.0

chrda81 opened this issue · comments

commented

When using react-native-web package I get the error

Module not found: Can't resolve 'react-native-web/dist/exports/ActionSheetIOS'

which points to file react-navigation-header-buttons/src/overflowMenuPressHandlers.js. Since react-native-web package >= version 0.12.0 the export of ActionSheetIOS was removed. Could this be fixed?

hello, on web you can only use overflowMenuPressHandlerDropdownMenu (see https://github.com/vonovak/react-navigation-header-buttons#overflowmenu).

regarding removal of ActionSheetIOS from react-native web, nothing can be done about that, you need to provide your own implementation

you can pass your own custom handler, eg. @expo/react-native-action-sheet as seen in https://github.com/vonovak/react-navigation-header-buttons/blob/master/example/screens/UsageCustomOverflow.tsx

hope this helps!

commented

regarding removal of ActionSheetIOS from react-native web, nothing can be done about that, you need to provide your own implementation

I've found the solution for my problem. I forgot to install and configure the babel plugin for react-native-web, so that all imports are correctly rewritten. The wrapper class ActionSheetIOS is not part of react-native-web anymore and is now rewritten by the babel plugin to the original class of react-native.

If someone else runs into that same problem, this link might help: https://github.com/necolas/react-native-web/tree/master/packages/babel-plugin-react-native-web

@chrda81 Could you share some more details about how you got it working?

I’m trying to run an Expo project (latest SDK 38) with react-navigation-header-buttons on react-native-web, but I’m getting the same error as you did:

./node_modules/react-navigation-header-buttons/src/overflowMenuPressHandlers.js
Module not found: Can't resolve 'react-native-web/dist/exports/ActionSheetIOS' in './node_modules/react-navigation-header-buttons/src'

I’ve already added babel-plugin-react-native-web to my Babel config, but that doesn’t make a difference here.

Update: I got it working by downgrading react-native-web to v0.11. Apparently, ActionSheetIOS was removed from it in v0.12, which caused this issue.

Also, when using babel-preset-expo, it seems not necessary to explicitly add babel-plugin-react-native-web to your Babel config, since it’s already included in Expo’s preset.

On the same boat guys,

image

im using only one item in my headerRight why i need to define OverflowMenu?