
Show HN: Target almost all platforms at once with react native - amoghbanta
https://github.com/amoghbanta/reactNativeEverywhere
======
rvanmil
I really like React for the web, but after trying React Native it reminded me
a lot of Cordova/Phonegap. You'll quickly run into requirements for which you
need to install a plugin, and another plugin, and another... of questionable
quality and low maintenance activity. So currently I'll stick to just building
separate native apps, which also means no cross platform concessions have to
be made.

~~~
t1amat
I've actually had the opposite experience. I've built roughly a half dozen
cross platforms mobile apps with React Native now and it has been a really
fantastic experience. For the most part, most of the native modules I have
consumed from the community have been high quality and are maintained
sufficiently (merging PRs, responding to issues within a day or two).
Conveniently the surface area of native modules is small, so it becomes
trivial to fix or extend them should you run into issues. Building cross
platform UI is trivial- between fixed and flex layouts with absolute and
relative positioning there hasn't been anything yet I could not build. Apps
ranged from brochure-style marketing "apps" with forms and wizards to a
application that had augmented reality features using only React Native and
without having to create a native module myself (although I have contributed
to quite a few now). Recently I have been using `react-native-web` as this
repository shows for mobile applications that don't have native module
requirements to build cross platform native mobile and web applications that
are responsive to all devices (phone, tablet, laptop, desktop, 4k). It's
become so easy to do this that I'd probably hesitate to write a standard web
application again (given the requirements aligned); doubly so if there was
even a remote possibility that the client would want a native mobile version
eventually.

EDIT: If you're interested in React Native but don't necessarily want to go
through the (very short) motions of getting set up with a local environment,
give the web player[1] a shot or take a moment to play with the interactive
documentation[2].

[1]: [http://dabbott.github.io/react-native-web-
player/](http://dabbott.github.io/react-native-web-player/)

[2]: [https://facebook.github.io/react-
native/docs/flexbox.html](https://facebook.github.io/react-
native/docs/flexbox.html)

~~~
Eridrus
Can you recommend any tutorials/components for making Android UIs with minimal
effort? I'm pretty comfortable with JS as a language, but have very little UI
experience and my previous attempt to make a simple Android messaging UI was
quite painful.

~~~
t1amat
Either of these[1][2] will get you a good distance. Also, check out Awesome
React Native[3] for a curated list.

Even if you use one of these component libraries though you will just be
deferring learning the basics of React Native layout and decorative styles
until later on. It's an unavoidable tax you will have to pay one way or
another. Thankfully it's not too hard- the documentation is explicit about
what style properties apply to which components (example: `View`[4]) and the
`StyleSheet`[5] helper will bark at you if you use invalid styles.

[1]: [http://nativebase.io/](http://nativebase.io/)

[2]: [https://github.com/xotahal/react-native-material-
ui](https://github.com/xotahal/react-native-material-ui)

[3]: [https://github.com/jondot/awesome-react-
native](https://github.com/jondot/awesome-react-native)

[4]: [https://facebook.github.io/react-
native/docs/view.html#style](https://facebook.github.io/react-
native/docs/view.html#style)

[5]: [https://facebook.github.io/react-
native/docs/stylesheet.html](https://facebook.github.io/react-
native/docs/stylesheet.html)

~~~
Mayzie
Unfortunately, each of those libraries are just 100% JavaScript, not utilising
the native Material Design components within Android, and thus end up being
_really_ slow, particularly when remote debugging and rendering lots of those
components on screen at once.

There really needs to be a library which bridges the native Android (and iOS)
modules and React Native, in order for React Native to be more useful and used
more.

------
masukomi
to be clear, CURRENTLY "almost all platforms" is android, ios, and web...

The TODO list includes

* support for macOS(react-native-macOS) * support for Windows (react-native-windows) * improve webpack config and add media queries for web * Add example projects for each branch

------
antoniuschan99
How are the arguments against React Native today? A few months back we still
had a lot of people saying that it underperforms with super complex stuff (ie.
Enterprise Grade stuff). Has it improved?

------
jongold
I'm glad to see more projects like this popping up.

React-as-paradigm is more powerful than any one particularly implementation;
it's a wonderful way to describe user interfaces, and using cross-platform
primitives is a perfect way to abstract design systems.

~= full disclosure - coworker is working on
[https://github.com/lelandrichardson/react-
primitives](https://github.com/lelandrichardson/react-primitives), which I've
used a bunch

~~~
t1amat
While I can see what the author is attempting to do (define a common set of
root components that all platforms can use with some preference libs thrown in
such as from the `Animated` project), it seems like this has already been done
(`react-native-web` aims to match what is present in `react-native` already)
and as such this is really more of a personal micro-framework. Or is the goal
to have this set of components be the base that all platforms rest on? Am I
missing something?

------
michaelbuckbee
Very basic question: am I thinking of these the right way?

React.js is the view layer of a web app/page. ReactNative is a whole framework
for making an app (that you could call back to a database, do some logic on
the data and display it to the user.)

Is that right?

~~~
lojack
React.js is the view layer for a website, ReactNative is the view layer for a
native app. In both instances you could call back to a database, but React
doesn't provide any of those abstractions. Neither is really a full featured
framework, and both focus on the View.

~~~
michaelbuckbee
Thank you. My point of reference was Appcelerator Titanium: which is a js,
cross-platform framework. Is ReactNative a "view" for something like that? Or
are they pretty similar.

~~~
lojack
Someone else may be better at explaining the differences than me, as neither
are my area of expertise. My understanding is that they both provide a view
layer, and Titanium provides more of an everything-included framework so you
don't have to touch any native code. With React, it provides an easy to use
view layer that helps you create compositions of components and layouts, but
it's expected at some point you'll want/need to build things in native code.
It's also expected that the overall architecture of the app to be provided by
the developer. This gives more flexibility to break out of React or add it to
existing projects where its helpful.

Without having more experience with Titanium, its hard for me to say if you
can use ReactNative along side it, but my gut says they probably have a
different way of doing things.

------
taasdadasd
Ironically, you can target all platforms instantly already. With nothing but a
text editor. It's called the web.

------
owebmaster
Looks good! For the clojurescript ecossystem, it would be a great base project
for something like re-natal with broader platforms support:
[https://github.com/drapanjanas/re-natal](https://github.com/drapanjanas/re-
natal)

I was thinking yesterday about fork it and add more platforms for my own use,
now I try your project first and create a thin clojurescript layer over it,
tks :)

------
jannotti
React Native has been moving to give common modules common names across iOS
and Android. That seems great, because it's easier to share code. I wonder why
there isn't a simple set of wrappers for HTML widgets, using the React Native
names, so you can also share code with web. Does this project do that?

~~~
t1amat
It's the opposite - instead of React Native mapping HTML elements into
appropriate native components, websites are just another platform target. You
write your components using normal React Native components (Views, Text,
ScrollView, etc.) and the `react-native-web` platform converts that into
structurally (but not semantically) compatible HTML.

The nice thing is, this is how all platform targets work. It's the platform
extension's responsibility to map React Native to their platform. In the case
of layout mapping, this typically involves mapping to the `Yoga`[1] layout
engine on that platform.

[1]: [https://github.com/facebook/yoga](https://github.com/facebook/yoga)

~~~
jannotti
Excellent, yes, that's exactly what I want.

------
runeks
This looks cool, although it appears a bit young still.

I'm looking for a cross platform (>= iOS+Android) mobile solution, so I can
write a web app once, and deploy it easily as a mobile app on multiple
platforms. The app will be very simple, almost proof-of-concept-like; I
basically just need something not ugly that can connect to the RESTful app
backend.

I've been Googling for the past couple of weeks, and so far
[https://coronalabs.com/](https://coronalabs.com/) and
[https://dropsource.com/](https://dropsource.com/) look interesting, but I
would love to hear from someone with experience.

~~~
Gys
I looked at those as well (plus options like Ionic) and decided to go for
React Native.

Coronalabs is all about graphics and therefore well suited for games. They do
offer some very basic widgets, which are not native (which is ok, but you
probably have to create some yourself, for example they no lists if I remember
correctly).

Dropsource focuses on offering the same dev experience for both iOS and
Android. But you still have to build each platform separately. Its a bit like
React Native without the cross-platform option.

------
problems
So, I've been considering learning React recently, and this is a reason for
it. How native is react native? Does it use the platform's look and feel or
essentially feel like a clunky web browser, more similar to NW.js or electron
apps.

~~~
hardwaresofton
[https://facebook.github.io/react-native/](https://facebook.github.io/react-
native/)

 _> With React Native, you don't build a “mobile web app”, an “HTML5 app”, or
a “hybrid app”. You build a real mobile app that's indistinguishable from an
app built using Objective-C or Java. React Native uses the same fundamental UI
building blocks as regular iOS and Android apps. You just put those building
blocks together using JavaScript and React._

You can use native code, the JS components render to native things -- there's
a lot to it, and I'm sure I can't explain it properly, better to just check
out their guide.

Also, React Native was not built to be used on all the platforms -- I remember
when RN for android (I believe IOS support was out first?), people started
asking (of course) whether they could write code that would run on both
platforms and the tools team said something to the effect of "the code will
look similar, but will not be the same".

Of course, that doesn't stop someone from writing components that compile to
other components or something or writing some sort of cross-platform group of
components on top.

~~~
problems
Huh, cool, I'll definitely check this out more then. Hopefully something like
this will catch on and replace the browser based, non-native UIs that seem far
too popular these days.

~~~
hardwaresofton
Yeah, this tech is definitely pretty amazing. I'm not the biggest fan of
facebook so I'll bash them a little bit here -- their biggest success with
this was envisioning it (or bolting on) the fact that the react model wasn't
built only for the DOM. Originally React & ReactDOM were the same (maybe it
was temporary), but when they started to target more platforms, they split
them out and that's been a changer as you can see now.

Honestly I think companies that opt for a browser-based non-native UI do those
for reasons that won't change just due to RN existing. Once developers get
comfortable with RN, and start offering themselves as "we do native apps in
half the time, give your users better-than-mobile-browser-site performance", I
think the companies that were content to jam a webpage into an app will start
improving.

Also note this article with a pretty good criticism of React (I find those are
lacking these days): [https://bitquabit.com/post/the-more-things-
change/](https://bitquabit.com/post/the-more-things-change/)

tldr; Turns out react is a little bit similar to a thing called COM, but maybe
we're better at this pattern now and things won't become spaghetti

------
to3m
Emoji in the commit messages. I've seen a few projects doing this now and I
don't know what to think.

What _should_ I think?

Is this best practice?

~~~
jansenv
Emojis are an effective way to communicate something in a small space. Ideal
for commit messages.

~~~
GabeRicard
Premature optimization in commit messages?

------
jbverschoor
I really don't understand why nativescript is not getting more coverage.

I guess many people on HN are working at FB....

~~~
t1amat
NativeScript is pretty neat, for sure. I'm guessing the reason it does not get
nearly as much exposure on HN is because it's quite a bit less mature with a
community at best an order of magnitude smaller than React Native. Or it could
be that everyone here is working at Facebook...

For those interested, NativeScript is Telerik's answer to React Native and
tends to leverage Angular JS as the front end framework. One of the
fundamental differences between the two are in how they give you access to
device/platform functionality. React Native forces you to drop down to native
code when you need access to device or platform functionality not exposed
through their framework API. Conversely, NativeScript attempts to expose the
device and platform APIs to your JS code. This difference has a very real
convenience/performance trade-off.

~~~
t1amat
I should mention that developer ergonomics is another key differentiator.
NativeScript exists for Telerik's bottom line. For example, instead of
providing a nice HMR facility, they invested thousands of hours into building
a pay-for cloud offering (AppBuilder LiveSync). They are a company and I don't
fault them for monetizing a significant investment they made in this platform,
but when looking at the available options this is a negative.

~~~
Gys
I had exactly the same thought: Telerik is a tool company so must make money
from nativescript (no problem with that) while Facebook can affort to make RN
into something really good without it ever hurting its bottomline. For them
its an investment to attract new devs.

------
yatsyk
Few questions:

Status of this project. Can I use it for production?

What are the differences from other starter kits like Este, which also could
be used for building react-native and react apps.

~~~
amoghbanta
hi yatsyk, The project is in a early stage, I've been using it in my recent
production project, depends on your requirements and complexity if it'd be
suitable for you in production. I also wrote a blog about it, hope this helps
you: [https://medium.com/@amoghbanta/write-once-use-everywhere-
wit...](https://medium.com/@amoghbanta/write-once-use-everywhere-with-react-
native-d6e575efe58e#.mdgwy05q6)

------
ap46
Why would you post something thats not even done? React-native was built to be
a better alternative to Cordova, it's not like you wrote it.

------
samblr
Demo apps or screenshots can help

~~~
amoghbanta
working on it, will soon be having some demos :)

------
demonshalo
no ty!

