'ActionSheetIOS' is not exported from 'react-native-web/dist/index'

Question

How to avoid the this kind of warning?
My app is working but it gives warning in terminal like below

Compiled with warnings.
/home/karim/Desktop/React-Native/RN-Complete-Guide/node_modules/react-navigation-header- 
buttons/src/overflowMenuPressHandlers.js
Attempted import error: 'ActionSheetIOS' is not exported from 'react-native-web/dist/index'.

It is because of of I imported HeaderButtons and HeaderButton from react-navigation-header-buttons like below

import { HeaderButtons } from "react-navigation-header-buttons";
import { HeaderButton } from "react-navigation-header-buttons";

And I am using react-native 4.x veriosn.
is there any way to avoid this warning?

Answer 1

This file in the source for react-navigation-header-buttons imports ActionSheetIOS, which is not supported by React Native web applications. This seems like it's probably an issue with React Native web itself, as even importing the ActionSheetIOS component in your project without actually using it will cause a crash from my past experience.

You probably won't be able to use react-navigation-header-buttons for your solution because of this issue. The authors also go on to say in their README that web support is currently experimental:

Supports iOS and Android, web support is experimental.

I'd suggesting either finding a way to avoid this library or flag an issue on the repo to suggest swapping ActionSheetIOS in with a cross-platform action sheet solution like react-native-action-sheet.