Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support React Native Web #316

Milestone

Comments

@grigio
Copy link
Contributor

grigio commented Aug 1, 2016

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
Copy link
Contributor

gaearon commented Aug 1, 2016

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
Copy link
Contributor Author

grigio commented Aug 1, 2016

@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

@lacker
Copy link
Contributor

lacker commented Aug 1, 2016

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

@gaearon
Copy link
Contributor

gaearon commented Aug 1, 2016

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
Copy link
Contributor Author

grigio commented Aug 1, 2016

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
Copy link
Contributor

gaearon commented Aug 1, 2016

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
Copy link
Contributor Author

grigio commented Aug 2, 2016

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 :)

@image72
Copy link

image72 commented Aug 5, 2016

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

@gaearon
Copy link
Contributor

gaearon commented Aug 5, 2016

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
Copy link
Contributor

gaearon commented Aug 5, 2016

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 gaearon closed this as completed Aug 5, 2016
@gaearon gaearon reopened this Aug 8, 2016
@gaearon
Copy link
Contributor

gaearon commented Aug 8, 2016

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.

@gaearon gaearon changed the title Is there a way to enhance webpack config? Support React Native Web Aug 8, 2016
@grigio
Copy link
Contributor Author

grigio commented Aug 9, 2016

Ok, I will make it

@RangerMauve
Copy link

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

@gaearon
Copy link
Contributor

gaearon commented Aug 17, 2016

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

@RangerMauve
Copy link

Cool, thanks for the update.

@grigio
Copy link
Contributor Author

grigio commented Aug 17, 2016

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

@RangerMauve
Copy link

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

@gaearon gaearon added this to the 0.2.2 milestone Aug 22, 2016
@grigio
Copy link
Contributor Author

grigio commented Aug 29, 2016

@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
Copy link
Contributor

remon-nashid commented Sep 10, 2016

@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
Copy link
Contributor

gaearon commented Sep 10, 2016

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

@grigio
Copy link
Contributor Author

grigio commented Sep 10, 2016

@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
Copy link
Contributor

remon-nashid commented Sep 12, 2016

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

@annelorraineuy
Copy link

annelorraineuy commented Jun 8, 2017

@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
Copy link

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
Copy link

annelorraineuy commented Jun 8, 2017

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
Copy link

RangerMauve commented Jun 8, 2017

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
Copy link

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

@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.