react-native-web cannot be used StackNavigator in react-navigation

Created on 21 Nov 2017 · 7Comments · Source: necolas/react-native-web

user config
"react-dom": "^16.0.0",
"react": "^16.0.0",
"react-native": "^0.50.3",
"react-native-web": "^0.1.14"

Source

littlecain

👍2

Most helpful comment

You can try import { StackNavigator } from 'react-navigation/lib/react-navigation.js', because in some webpack configuration, .web.js is prior than .js. In react-navigation, the implementation of WEB platform react-navigation/lib/react-navigation.web.js doesn't include *Navigator, just provides *Router.

BTW, you have to patch Linking to avoid another problem:

import { Linking } from 'react-navigation/lib/PlatformHelpers'

Linking.getInitialURL = () => {
  return new Promise(resolve => {
    resolve('') // you can returns url from window.location if need
  })
}

And must patch DeviceInfo because the latest version of react-navigation used it:

import RNW from 'react-native-web'
RNW.DeviceInfo = {}

To ensure all patches run before you other code, suggest you write following files:

// index.js
require('./patch') // require ensures running patch first
require('./main')

// patch.js
// All patches code likes above, maybe you need other patches, e.g. some libraries need patch NativeModules.

// main.js
// The content of your old index.js

cpunion on 21 Nov 2017

👍2 😕1

All 7 comments

BTW, you have to patch Linking to avoid another problem:

import { Linking } from 'react-navigation/lib/PlatformHelpers'

Linking.getInitialURL = () => {
  return new Promise(resolve => {
    resolve('') // you can returns url from window.location if need
  })
}

And must patch DeviceInfo because the latest version of react-navigation used it:

import RNW from 'react-native-web'
RNW.DeviceInfo = {}

To ensure all patches run before you other code, suggest you write following files:

// index.js
require('./patch') // require ensures running patch first
require('./main')

// patch.js
// All patches code likes above, maybe you need other patches, e.g. some libraries need patch NativeModules.

// main.js
// The content of your old index.js

cpunion on 21 Nov 2017

👍2 😕1

Thank you very much for replying to my question, but I tried, and it didn't work,，Or is there any other way to jump pages in using react-native-web?

littlecain on 21 Nov 2017

React navigation doesn't have good web support yet, and last time I asked they had no plans to improve that. Your best option is to ask the maintainers of that project about their plans for web