Have the web implementation point to React Native Web instead of React Native

[nnyath]

Feature request

Currently, UnimplementedView is used as a general support mechanism to have render compatibility for other non-supported platforms.

For web, ToolbarAndroid.web.js attempts to use it like so

https://github.com/react-native-community/toolbar-android/blob/e7b37ad740580c5ac202524fa888768af419cd67/js/ToolbarAndroid.web.js#L13-L21

However, most web installations alias react-native with react-native-web. Webpack would then try to look for the module in react-native-web/Libraries/Components/UnimplementedViews/UnimplementedView which doesn't exist and thus will always throw a warning.

I think the path should reference react-native-web's actual UnimplementedView path instead of react-native's.

Since .web files are normally only picked up during web targeted builds, I would guess that react-native-web should almost always be installed as well.

Why it is needed

• Some CI systems fail on warning by default (that's mine!)
• Even though it shouldn't be used on Web
  • It will error since the module will return {} rather than a generic View component that UnimplementedView implements
  • This should circumvent that above scenario majority of the time
• Even if the module is not found, it will still have the same intended fallback behavior before the change

The current workaround is using webpack's resolve.alias like so

resolve = {
  alias: {
      'react-native/Libraries/Components/UnimplementedViews/UnimplementedView$': 'react-native-web/dist/modules/UnimplementedView',
      'react-native': 'react-native-web',
      ...
  }
}

but I think in a create-react-app scenario, it'd be a huge hassle to tell users to modify the webpack config since it's not readily available.

Possible implementation

Change the path to react-native-web/dist/modules/UnimplementedView

Code sample

let m;
try {
  // This is an optional dependency. However, webpack might still show warning message.
  m = require('react-native-web/dist/modules/UnimplementedView');
} catch {
  // If failed to find react-native-web's UnimplementedView, just returns an empty module so
  // this won't cause bundling related error, however any subsequent attempt of using this module
  // in such situation shall caused compile-error because it really should not be used for web.
  m = {};
}

I can open a PR if you'd like.

[connectdotz]

hmmm... if react-native-web is to alias react-native components, I wonder why UnimplementedView is an exception? Would it be better for react-native-web to address this?

[nnyath]

Yeah, good point.

I remember finding a comment somewhere by react-native-web's maintainer about module paths being unstable and that we should avoid directly referencing them like in my proposed solution.

So I assume there's some reasoning behind that exception, but I'll try to dig up that comment and maybe open a question/issue in that repo instead.