necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.7k stars 1.79k forks source link

ReactNativePropRegistry is undefined #280

Closed ngduc closed 7 years ago

ngduc commented 7 years ago

What is the current behavior?

"react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry" is undefined in react-native-web https://github.com/GeekyAnts/NativeBase/blob/master/Utils/computeProps.js#L3

What is the expected behaviour?

ReactNativePropRegistry should be there in react-native-web

Steps to reproduce

  1. import NativeBase lib
  2. include a sample component from that lib & run the webapp
  3. JS error will occur

Environment (include versions)

OS: MacOS Device: Macbook pro Browser: Chrome React Native for Web (version): 0.0.55 React (version): ~15.3.2

necolas commented 7 years ago

You can use webpack to alias that path to react-native-web/dist/modules/ReactNativePropRegistry

ngduc commented 7 years ago

Hi @necolas , sorry for commenting on a closed issue but I also have the same undefined-issue with LayoutAnimation. I tried webpack alias like this but it doesn't work:

alias: {
      'react-native/Libraries/LayoutAnimation/LayoutAnimation': path.join(__dirname, '../app/MyLayoutAnimationStub.js'),
      'react-native': 'react-native-web'
}

Do you have an example somewhere for mapping like that? Thanks.

necolas commented 7 years ago

LayoutAnimation isn't implemented and shouldn't be included in web builds. If a package is using it you could ask them to consider web in their implementations.

ngduc commented 7 years ago

I agree @necolas but in the mean time, could you help with alias? It's a bigger task to convince module authors to support web :)

necolas commented 7 years ago

I don't think aliasing is going to work. You might want to try defining ReactNative.LayoutAnimation = ... in your entry file.

fabriciovergara commented 7 years ago

You can use NormalModuleReplacementPlugin

// Native base compatibility
config.plugins.push(new webpack.NormalModuleReplacementPlugin(
  /react-native\/Libraries\/Renderer\/src\/renderers\/native\/ReactNativePropRegistry/,
  require.resolve('react-native-web/dist/modules/ReactNativePropRegistry')
));
BodhiHu commented 7 years ago

Hi by the way you need to put 'react-native': 'react-native-web' to last line of 'resolve':

    alias: {
      'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry': 'react-native-web/dist/modules/ReactNativePropRegistry',
      'react-native/Libraries/Components/StaticContainer': 'react-native-web/dist/components/StaticContainer',
      'react-native': 'react-native-web'
    },