How does react-native get "forwarded" to react-native-web?

[ryantrem]

Initially I thought https://github.com/necolas/react-native-web/tree/master/packages/babel-plugin-react-native-web was the magic that made this work, but the docs seemed to indicate that using this babel plugin is optional, and I tried not installing it and everything seemed to work (e.g. my web app with a devDependency on @types/react-native and a dependency on react-native-web works without error).

I'm trying to understand how this forwarding actually works for a couple reasons:

1. It's unclear to me how things are supposed to work if a library (an npm package) uses react-native-web. For example, if I have a library with a devDependency on react-native and a peerDependency on react-native-web, does the app consuming my library simply need react-native-web as a dependency and everything will work?
2. It's amazing how much of the react-native API is included in react-native-web. I also have a react native library that adds additional controls, and to use those controls in my web app, I'd need to follow the exact same pattern as react-native-web for my control (to provide a web/html implementation of that control and properly do the forwarding). The more react native controls that do this, the more powerful react-native-web is as a solution. So it seems like react-native-web should provide a guide for how other react native libraries can follow suit and provide the same support for web apps.

Any info on how this forwarding works and/or how other react native libs and achieve the same thing would be super helpful!

[necolas]

1. Usually all that's needed is for the consumer of your library to alias 'react-native' to 'react-native-web', and your library should have no direct imports to RNWeb.
2. You can put web-specific implementation in files with *.web.js extensions, and configured bundlers should use that file on web instead of the native ones. The 'unstable_createElement' export from RNWeb can be used in web-specific files to build custom components from React DOM elements, and they will accept the RN accessibility and style props. But there's no official building blocks for making first class components from scratch.

https://necolas.github.io/react-native-web/docs/multi-platform/

https://necolas.github.io/react-native-web/docs/unstable-apis/

[ryantrem]

Thanks for this extra info! Couple of follow up questions:

1. If the consumer of the library needs to alias 'react-native' to 'react-native-web', and if react-native-web works by default in a new React.js web app, then I guess this means the tooling used to create a new React.js app creates it with this aliasing already configured?
2. Is there any aspiration to provide a "foundation" (library + documentation) to more officially enable react-native library developers to provide web implementations of their libraries? It seems like this could really amplify the value prop of react-native-web.