What does HackerNews think of react-native-web?
Cross-platform React UI packages
Personally though, I've found the DX of Flutter far above RN. I always had random packages break on RN that I had to fix every time, while with Flutter most of what you need is already included in the framework, including a component UI library for Android and iOS.
So anything you could do in React, you can also do in RNWeb, as it's a superset of React.
Of course, you'd need to use the RN components if you want to share code between web and native mobile. But there's nothing stopping you reaching a high degree of code re-use, and/or using React components for the web-only portion of a RNWeb project.
React DOM is very coupled with DOM elements, so React Native Web abstracts away web-specific things, so that code is more sharable.
Facebook has continued to use it, Microsoft has begun using it heavily, Twitter uses it on the web[0], Discord has been very happy with it -- and countless other examples.
Why doesn't the React team do an official release of https://github.com/necolas/react-native-web instead of leaving it on the community to support?
Works remarkably well. It’s already used for Twitter’s mobile site
It offers APIs compatible with React-native (which is obviously a huge time saver for cross platform UI dev).
Its disadvantage is that it does not offer (by intent and philosophy) any components outside of React native.
[1] https://github.com/necolas/react-native-web [2] https://github.com/Microsoft/react-native-windows
In the past, ReactJS and ReactDOM were completely interchangeable. However, some time ago now React split the DOM specific parts of the library into ReactDOM which allowed the non-DOM specific parts of the library to be shared more easily across different rendering targets. Some examples:
* android (via react-native)
* ios (via react-native)
* canvas https://github.com/Flipboard/react-canvas
https://github.com/necolas/react-native-web is a great production ready lib but requires a bit of setup to get it working with a react-native project.
https://github.com/vincentriemer/react-native-dom is an extremely cool experimental idea to bring react native projects more seamlessly onto the web. It's still in early stages and has some significant tradeoffs compared to react-native-web. For one, it includes a webassembly implementation of Yoga (https://yogalayout.com/) which makes layout much more consistent among ios/android/web but at the cost of delivering more JS upfront to the browser.
The next approach we started on was using https://github.com/necolas/react-native-web. This was very exciting and very fun to work with. However, we found it difficult to optimize the web experience. Most of our traffic is on the website so we are spending a lot of time optimizing the web experience. This might not line up with other's experience but we kind of came to the conclusion that react-native-web works great for apps where the native app is the primary driver and you want to offer a web experience as a secondary experience. This became more clear when we started trying to work with our SEO team. And again when we started trying to build responsive designs with react-native-web. Doable but we ended up spending a ton of time to make the web work the way we wanted to.
Eventually we decided to go a different direction. Most of our display logic is the same or very similar between the mobile web/ios/android with a few exceptions. We found that mixing ReactNative with the webview component gave us the ability to use webviews to share the majority of the code that can be shared. When we need more native functionality we communicate with postMessage and we have access to ReactNative. Once in ReactNative if we need to go down to iOS specific or Android specific code we have the ability to do that too. We found this to be much more powerful than Cordova and the user experience is honestly amazing. This is still a work in progress but we are excited about what we've seen so far.
The author mentions Flow as a typing solution to solve some of the problems with Javascript development, but didn't like it because you can still write code that crashes if you ignore the warnings. They also complained about the lack of immutability, and mentioned Immutable.js, but weren't happy with that. They went on to say that most of these problems they mentioned are already solved with libraries, but ... libraries are bad? I didn't really pay attention to the huge Javascript rant in the middle, but I've heard it all before, and I totally disagree. I've started to realize that I prefer ES7 Javascript with Flow or Typescript, jest, babel, webpack, etc. I think I actually enjoy writing it more than Ruby or Swift.
I really like react-native-web [1]. I've used it to build an app that runs on all mobile devices (iOS, Android, Windows Phone), as well as on the web. There's a lot of quirks and workarounds, but it was actually a lot easier that I expected. Even if you just use plain react on the web, it's easy to write re-usable components and code.
They also mentioned hot reloading. If I wrote an article titled "Why I'm a React Native developer", the content would just be the words "Hot reloading." I spent a year developing a native iOS app with Swift, and I never want to go back to waiting for my code to compile.
I just launched a little game that I built with React Native [2], where I have a single codebase that supports iOS, Android, Windows, and web.
You can also currently use React to share code across iOS [2], Android [3], UWP [4], macOS [5], web [6], VR [7] and a bunch of other stuff that is there mostly for fun (like React Hardware [8] and React Sketch.app [9]).
There's also experimental work on defining a set of primitives that works across all of these platforms [10].
[1] https://github.com/CanonicalLtd/react-native/blob/ubuntu/REA...
[2] https://github.com/facebook/react-native
[3] https://github.com/facebook/react-native
[4] https://github.com/Microsoft/react-native-windows
[5] https://github.com/ptmt/react-native-macos
[6] https://github.com/necolas/react-native-web
[7] https://github.com/facebook/react-vr
[8] https://github.com/iamdustan/react-hardware
React Native already supports iOS, Android, and UWP. To add browser support all you need is something like React Native for Web. I made a small presentation a few months ago that shows this. Here's the source code: [2]. Take a look at the web folder.
Libraries like React Navigation [3] have also been built to support any platform that runs React code. It looks like Microsoft built yet another navigation library [4].
Also, check out React Primitives [5]. It aims to define a set of primitives that work on any platform that can be used to build more complex components. This is highly experimental, but I'm liking the direction where it's going, a unified React interface for any platform.
In addition, ReactVR is a great example of how React Native primitives can be extended to new emerging platforms [6].
Finally, React Native for macOS [7] answers the question that many have here about building native apps for macOS without relying on Electron.
[1] https://github.com/necolas/react-native-web
[2] https://github.com/migueloller/HelloWorldApp
[3] https://github.com/react-community/react-navigation
[4] https://microsoft.github.io/reactxp/docs/components/navigato...
[5] https://github.com/lelandrichardson/react-primitives
https://github.com/necolas/react-native-web
If you're doing cross-platform prototyping, it can actually be easier than writing the app in React (or vanilla JS) and then porting to React Native, because the React Native elements are at a slightly higher semantic level of abstraction than stock DOM elements. The markup it generates is pretty atrocious, but if you just want to get something up on the screen, you can work out your design compromises first and then optimize it.
It is entirely possible to reuse your React Native code on the web, especially thanks to projects like react-native-web[1].
Ideally web is just another taraget :) https://github.com/necolas/react-native-web
That said, while writing a website with react-native-web is potentially interesting for new sites, it can be less worthwhile for an existing site to just embed a little bit (which is one of the huge values of React). It's also still very experimental. But I suspect it will be supported in a huge way soon.
Components aside, you can share your models and data stores, utilities like Immutable.js and lodash, and other environment-agnostic JavaScript. In addition to code, you can share a lot of knowledge like how to write components, structure an app, use npm, and even just write JavaScript.
* iOS
* Android
* OS X https://github.com/ptmt/react-native-macos
* Windows https://github.com/ReactWindows/react-native-windows
* Ubuntu https://developer.ubuntu.com/en/blog/2016/08/05/introducing-...
A fundamental problem with the web as it exists right now is that as a "user", you cannot go one level deeper when you want/have to in order to provide a good experience. There's a big list of things like customizing image decoding/caching or extending layout part of css that is encoded in the browser and cannot be changed in userland.
The way to solve your problem is to convince a browser vendor to implement a solution, then all the other browsers to support it and wait for years such that your userbase can use it. This loop is extremely long and involves a lot of conflicting interests and having to support it forever.
The idea of React Native is to provide a subset of the web platform and hooks to drop down lower whenever you want to. For example, as a user you can use which behaves like a web and be done with your day. But, if you want to use another image format, or manage your image cache differently then you can implement it and provide a component to the end user.
The advantage is that each app can start building and experimenting with its own low-level infrastructure and replace pieces that the default platform doesn't do adequately for the use case they are trying to solve.
Now, why is it good for the web? Since React Native primitives have been designed to work on the web with a small polyfill ( https://github.com/necolas/react-native-web ), there's now a concrete way to improve the web platform without being a browser vendor. You can prototype with your ideas on React Native and when you figure that one is actually good, now start the process to ship it to the entire web platform. Kind of the same way you can prototype your js transforms with babel and then push them to tc39 to make them official.
If React Native is as successful as I want it to be, the web platform is going to supports all the use cases that only React Native can provide today and we can just rm -rf the entire project and use the web.
NavigationExperimental: new multi-tab-aware navigation component https://github.com/facebook/react-native/tree/master/Librari... cf. previous work on in-app "paths"by TaskRabbit http://tech.taskrabbit.com/blog/2015/09/21/react-native-exam...
Nuclide is an IDE for building react-native apps http://nuclide.io/docs/quick-start/getting-started/ source https://github.com/facebook/nuclide
Realm is a mobile database: an alternative to SQLite & key-value stores. Previously iOS and Java, now works with react native too https://github.com/realm/realm-js
Exponent lets you write apps in js w/o need for iOS/Android toolchain https://exponentjs.com/
Static site generator using React.js https://github.com/gatsbyjs/gatsby
React Native for Web: A framework for building Native Web Apps https://github.com/necolas/react-native-web
The source code of wp-calypso, an example of a large React.js project: https://github.com/Automattic/wp-calypso/tree/master/client
enzyme's shallow-DOM testing utilities for React https://github.com/airbnb/enzyme#shallow-rendering
react-native-mock: a fully mocked and test-friendly version of react native https://github.com/lelandrichardson/react-native-mock
graphene: GraphQL framework for Python https://github.com/graphql-python/graphene and their hosted version http://resolver.cloud/
KeyboardRender.ios.js: https://github.com/benoitvallon/react-native-nw-react-calcul... KeyboardRender.js: https://github.com/benoitvallon/react-native-nw-react-calcul...
I'm wondering, though, if we can take this a step further and write Keyboard as the exact same code by composing it with more general components like `` instead of `
I theorize that this will be made a little easier for you with the use of react-native-web: https://github.com/necolas/react-native-web
Cool project, though, thanks for sharing. Code is very clean, I'll definitely be using it as a reference.