Create-react-app: Support React Native Web

[grigio]

I'd like to use create-react-app with React Native Web

https://github.com/grabcode/react-native-web-starter/blob/master/web/webpack.config.dev.js#L38-L42

[gaearon]

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

[grigio]

@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 https://github.com/necolas/react-native-web/issues/178

[lacker]

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

[gaearon]

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.

[grigio]

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

[gaearon]

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?

[grigio]

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

[image72]

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

[gaearon]

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.

[gaearon]

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.

[gaearon]

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.

[grigio]

Ok, I will make it

[RangerMauve]

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

[gaearon]

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

[RangerMauve]

Cool, thanks for the update.

[grigio]

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

[RangerMauve]

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

[grigio]

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

[remon-nashid]

@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.

[gaearon]

cc @lacker, https://github.com/facebookincubator/create-react-app/issues/316#issuecomment-246120562 would be an interesting direction to explore.
cc @ericvicenti who also asked about this

[grigio]

@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

[remon-nashid]

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

[annelorraineuy]

@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.

[RangerMauve]

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.

[annelorraineuy]

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;

[RangerMauve]

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

[coluccini]

@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?