Hi! No, there is currently no way to change the config, as it is preconfigured. I think we'd like to support react-native-web but this feels like a hacky way to do that. Is that what every such project requires? cc @vjeux

@gaearon I confirm it works just adding this line https://github.com/grigio/react-native-plus-web-boilerplate/blob/master/config/webpack.config.dev.js#L34
and rnw dependency in package.json

There are some warnings because of necolas/react-native-web#178

Why does it need a hook into webpack, as opposed to just importing it and using it like usual?

I think what’s happening is this project wants to “rewrite” existing react-native imports into react-native-web imports, even in third party code. This probably has to do with being able to reuse React Native components without actually adding support for react-native-web to them.

Yes aliasing react-native is possible to build React* agnostic components which can be used in "React Native" or "React Native Web" without depends explicitly on react-native-web

I googled "react native web" and found at least three projects doing this (each of them wants to be the resolve target of react-native). Is one of them significantly more popular than others?

Yes but the main ones are React Web and React Native Webtaofed/react-web#87 both work and switching from one to another is painless because you don't depend directly. Just pick one :)

how to use less-loader to webpack config with react-scripts command ?

You currently can't. We don't officially endorse any compile-to-CSS languages. You can, however, use the regular command line utilities to compile Less onto CSS, and import that CSS.

As for the issue I'm going to close because the community seems fragmented. If there is a clear winner in that space, and other projects join efforts, I'll be happy to reconsider.

Seems like react-native-web is getting some coverage and is actively being worked on.

I see no harm in getting a PR that implements that in.

Ok, I will make it

Any chances of having some docs on how to use this?

It’s not out in a release yet. When it’s released, we’ll add some docs.

Cool, thanks for the update.

@RangerMauve I'll release a valid React / React Native project when CRA will be updated

@grigio Perfect! I'll make sure to stalk your github in anticipation. 😉

@RangerMauve here is the example app which is both a valid React Native / React Native Web project https://news.ycombinator.com/item?id=12379070

@grigio Thanks for the example app. Would you please shed some light on how to use create-react-app script to generate a similar app? at least with that directory structure?

I assume I'll need to create an app via create-react-app, then add all react-native required dependencies, source files,...etc. I'm, not sure how useful create-react-app to create a web capable "Native" app.

cc @lacker, #316 (comment) would be an interesting direction to explore.
cc @ericvicenti who also asked about this

@remon-georgy currently I used create-react-app as is, and then I merged the files from react-native init.

If "the Web" will be an official React Native platform, I expect to run it seamlessly.

react-native run-web # run-ios # run-android

create-react-app is fine, then you have to adjust a package.json like this https://github.com/grigio/HAgnostic-News/blob/master/package.json#L11-L15

Thanks @grigio! I followed a similar approach and it works perfectly. Hopefully Web will be a standard react-native platform in the future.

@remon-georgy what navigation package did you use? I'm having compile time errors that say a loader might be missing from using react-navigation.

Using create-react-app without ejecting has proven to be hard since it doesn't compile node_modules and it uses a different babel preset from react-native.

I have ejected in order to try and plug in the necessary loader. But i cannot seem to get it working.

This is what i get:

./~/react-navigation/src/views/TouchableItem.js
Module parse failed: /projects/project_name/node_modules/react-navigation/src/views/TouchableItem.js Unexpected token (19:12)
You may need an appropriate loader to handle this file type.
|   View,
| } from 'react-native';
| import type { Style } from '../TypeDefinition';
| 
| const ANDROID_VERSION_LOLLIPOP = 21;

In the webpack config with the babel-loader you'll need to add node_modules/react-navigation to the include array.

Edit: Somewhere around here

@grigio I know this is a pretty old issue, but I'm reading about implementing react-native-web and non that I've read sounds so simple as:

I used create-react-app as is, and then I merged the files from react-native init

Would you be so kind to explain what the merging files involve exactly?