React-native-web: React native web crashes with react-navigation

Created on 10 Jan 2019  路  8Comments  路  Source: necolas/react-native-web

The problem

How to reproduce

With "react-navigation": "3.0.9"

simply use createStackNavigator, for example like this:

const App = createStackNavigator({
  TheList: { screen: TheList },
  Detail: { screen: Detail },
  initialRouteName: "TheList"
});

Simplified test case: https://codesandbox.io/s/l9vmp6241m

Steps to reproduce:

  1. Run the app
    2.
    3.

Actual behavior
Application crashes with the following error

Could not find module in path: 'react-native-web/Libraries/Animated/src/AnimatedEvent' relative to '/node_modules/react-native-gesture-handler/Swipeable.js'

Expected behavior
Application does not crash and a navigator is displayed

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.10.0-alpha.1
  • React (version): 16.5.1
  • Browser: Chrome

Most helpful comment

There's nothing to fix on this side. React Navigation doesn't even support the stack navigator on web yet. https://reactnavigation.org/docs/en/web-support.html

All 8 comments

This is an issue for react-navigation and react-native-gesture-handler (reaching into RN internals is not safe). Also the alpha releases are not stable

Thanks for nothing.

There's nothing to fix on this side. React Navigation doesn't even support the stack navigator on web yet. https://reactnavigation.org/docs/en/web-support.html

React navigation however works for me in a an Expo project. And having RNW without the commonly used navigators is kinda pointless.

Check https://github.com/kmagiera/react-native-gesture-handler/pull/406

And add "react-native-gesture-handler": "jaulz/react-native-gesture-handler#fix/web-compatibility" as temporary dependency in package.json till the PR is merged

RNW runs with navigators on my side now

@zamponotiropita I tried your method, now I ended up with this error:

/react-native-gesture-handler/DrawerLayout.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (30:8):

@AbhishekNairOfficial that PR is merged in the meantime. Use the npm version

Was this page helpful?
0 / 5 - 0 ratings