react-navigation errors

[Brendobrien]

trafficstars

Is there a way to configure react-navigation similar to the original repo, react-native-web-boilerplate? I've tried the same aliasing in the webpack config:

'react-navigation': 'react-navigation/lib/react-navigation.js'

However, it still throws errors when I try to

import { StackNavigator } from 'react-navigation'

I'd love to hear your thoughts. Should I look into using different navigators for react-native-web vs. react-native (which I know works well with react-navigation)

[agrcrobles]

I found that the usage of react-navigation + react-native-web is not recommended by react-native-web or react-navigation. react-native-web is using animated for compatibility purposes and there is no a 'native' implementation of the Animated API for web as of now.

I wonder about the effort of using react-navigation on web since there is no history or url rewriting implemented, most likely react router with react-router-navigation is a best fit but not sure.

Either way I think it can be configured, the most recent comment I have heard is from the following github issue, in case you make this work feel free to send a PR.

[ross-rosario]

At least the following works on latest react-navigation and react-native-web. Can't tell how useful it is for your use case, though.

First, add an alias to your webpack configuration. I use create-react-app as a template. In order not to eject my app prematurely, I use react-app-rewired in order to override CRA config:

// confg-overrides.js

module.exports = function override(config, env) {
  config.resolve.alias['react-navigation'] =
    'react-navigation/lib/react-navigation.js'

  return config
}

Then I created a dead simple tab navigator as follows:

// App.js

import { TabNavigator } from 'react-navigation'
const App = TabNavigator(
  {
    Screen1: {
      screen: props => <Somescreen extraProps={extraProps} {...props} />,
      path: 'screen1'
    }
  },
{
    Screen2: {
      screen: Screen2,
      path: 'screen1'
    }
  },
  {
    tabBarPosition: 'top',
    animationEnabled: true,
    swipeEnabled: false,
    initialRouteName: 'screen1'
  }
)

I hope that helps.

[ross-rosario]

Also, I would like to mention that I have been following this repo, hoping to find a more recent react-navigation implementation, on web :). Thanks @agrcrobles for the awesome work!

[Brendobrien]

@remon-georgy thanks! that looks like it should work. I guess I was having trouble with the StackNavigator specifically. Regardless, I think I'll go with react router with react-router-navigation for the web. @agrcrobles thanks for your help 👍