React support

[iliasbhal]

Hi :)

GitHub: https://github.com/iliasbhal/nativescript-react Npm: https://www.npmjs.com/package/nativescript-react

I was working on React support for NativeScript. I have a working prototype that handles basic stuff like eventListeners, childrens, HOC, react.refs, Nativescript components as JSX/TSX.

It works like a charm ( even animations ) 👍

I'd like to create a PR, but I don't know where should I add the folder?

I really believe that NativeScript is a superior technology when it comes to cross-platform mobile development. Best,

[NathanaelA]

This is awesome work (even though I don't use react).

I'm not part of the core team, so feel free to dismiss anything I say. :grinning:

Normally these are an added plugin to enable this functionality -- someone who uses Angular is not going to want the extra Vue or React code (and vise-versa, you don't want to bring tons of Angular code into your react project).

So currently we have nativescript-angular, nativescript-vue, so I would recommend you name your project nativescript-react. ;-)

One minor suggestion you could simplify import by change the top line so that you do: import * from nativescript-react and have that plugin/namespace actually import & export the react name space. This would allow you to override any react name space items that might need to be; without having to change any of the core react code. I assume you had to change something to make AppRegistry.runApplication actually bootstrap the NativeScript app, or did webpack rewrite the code?

[iliasbhal]

@NathanaelA it's not in the screenshot but AppRegistry is actually imported from a local file. It's part of the nativescript-react package. Nothing is overridden. So you'll have 100% access of React and 100% access of nativescript at the same time. 🎉

[MartoYankov]

Good job on this. It looks promising.

@NathanaelA is right. This repo contains the tns-core-modules package which is a bundle of cross platform widgets/wrappers of some basic native implementations. They are designed to work as close to vanilla JS as possible, so that they are framework agnostic.

Framework implementations are contained in plugins (nativescript-angular, nativescript-vue) that utilize the core modules in the framework paradigms. See the respective repos - nativescript-angular and nativescript-vue.

By the way, I happen to know that such a plugin with support for React is under construction right now by another member of the community - @shirakaba. And here is his repo - react-nativescript. Maybe you can join forces ^^

[shirakaba]

@MartoYankov thank you for tagging me! Yes, I'm actively developing React NativeScript myself. In fact, I see there is a fork on my repository from @iliasbhal from 14 days ago so Ilias must know of it. Good to see another working on this effort, but wish we'd been in contact.

@NathanaelA is right that a React renderer should live outside of the NativeScript Core repo.

Ilias, could you share what you have?

[iliasbhal]

Update: all NativeScript typings and JSDoc are now automatically available. 100% of NativeScript intellisense is now available within React JSX/TSX.

@MartoYankov @shirakaba I'll upload everything very soon 👍

[iliasbhal]

@MartoYankov @shirakaba @NathanaelA @tsonevn Here it is :)

GitHub: https://github.com/iliasbhal/nativescript-react Npm: https://www.npmjs.com/package/nativescript-react

[NickIliev]

@iliasbhal I would suggest creating a template (preferably in a different repo) or a demo project within the repo in order to show a base application structure and prerequisites for enabling react development (e.g. the page templates, tsconfig settings, etc.). Having a base template repo will allow to quickly create a project with nativescript-react via tns create myapp --template <paht-to-template>

[shirakaba]

@iliasbhal I don't know where to begin on this. Feeling quite sick.

You've deleted your fork of my project, but I did record that it was from approximately 28th March 2019. I'll compare your files (c5ca0ee1651d276c2e117c9f9ebcd673981960ba) with those of mine from commit ef6ba41962fbdcf1b42c3d63b5d9d9854d9166d1 (my last commit on 28th March), then.

Apologies for the large images; there's a lot to compare. My files on the right-hand side, @iliasbhal's files on the right.

AppRegistry looks awfully familiar

You've cleared up some, but not all, of my comments.

HostConfig nearly identical

I needed to move a few of my methods up and down and add whitespace to line things back up, but there's a lot of 'spot the difference' to enjoy here.

Section 1

You've changed my comments from multi-line to single-line, and removed my JSDoc support. It took a lot of effort to write those in!

Clear improvement by collapsing methods to single lines where possible.

Thanks for leaving in my cryptic // TODO notices.

First original contribution I've seen: Text components are handled in a different way. I can't say whether it's better or worse than my implementation.

Section 2

Mostly identical here. createInstance() rather different, and in fact calls prepareUpdate() and commitUpdate() (which I believe will result in a duplicate render...)

Section 3

commitUpdate() shares features with both my createInstance() and same-named HostConfig methods; this commit was before I did my refactor to reduce redundancy in my HostConfig, so credit for code reuse here.

Event listeners handled in the way I used to handle them. Good point about removing the old listener (which was a bug back then, but I've since fixed).

Section 4

@iliasbhal has introduced some bugfixes since my original commit.

... However, they are my own bugfixes from upstream :(

Section 5

The HostConfig typings include my exact comments...

nativescript-registery.ts includes TextBase just like my elementRegistry.ts

You've even copied across my bugs! Who is going to be making a TextBase?

Licence removes my name

I don't get so much as a mention in your repository, you don't get in contact about collaboration, you take the credit for all the work in this issue filing (thanks again @MartoYankov for bringing this to my attention), and to top it all off, you break my already permissive licence and copyright the work under your own name instead.

Where is the copy of my licence in your repo..?

Almost no git history

With just 4 commits, this project seemed to come out of nowhere! I'd have loved to have seen its journey; it took me 73 commits to get to the state that you forked from.

---

Just reading through your readme now (which again, doesn't even mention that this is a derived work).

Paid support is also available.

Could I hire you? I'm working on something similar.

[iliasbhal]

@shirakaba, Sorry but I started working on react-renderer way before.

Section 1: Come on man, the comments aren't from you, they are from this guy. https://blog.atulr.com/react-custom-renderer-2/. Actually, he is the one who I should give credit to. He did an awesome job, his documentation about the react-reconciler is a piece of art.

Section 2: This is not the place to discuss possible issues. you can create an issue here if you want https://github.com/iliasbhal/nativescript-react/issues. This won't result in a duplicate render because I'm just reusing logic from other functions. hostConfig is just an object referencing functions to be used by React internal diffing algorithm, Why should I prevent myself from reusing my code?

Section 3: I don't understand, you want credit for using forEach on Object.keys()?. As far as I know, there isn't much you can do when looping through the keys of an object. Also, the way I use event listeners is from https://docs.nativescript.org/core-concepts/events.

Section 4: Sorry, I didn't understand that part. But I want to point out that I didn't introduce bug fixes. In your work, you introduced the so-called "bugs". But since I didn't branch my work from yours, I simply didn't introduce the so-called "bugs" in the first place ( i don't know which bug you are talking about btw ).

Section 5: Well, that's true, those 3 comments are from you, I'll remove them.

Section 6: Wait, what? you want credit because I use some of the NativeScript core modules that you use. Btw, I'm exporting them, not importing them.And, I found the majority by grep "extends View" ./ -r so ....

Section 7: Well, I took those arguments from the official blog post: https://github.com/NativeScript/NativeScript/wiki/Why-NativeScript%3F. I read it quickly and didn't notice, I'll remove that because it's confusing.

TLDR: I didn't branch my work from yours. And ( my bad ) I didn't mention the sources and references. So I'll add them very soon.

Anyhow, @shirakaba I'll be very happy to add you as a core contributor. send me a message :)

For issues, PR, absolutely everyone is welcome to contribute, and everyone will have its name as a contributor. ( I'll add a package to automate that soon ) Link: https://github.com/iliasbhal/nativescript-react

[iliasbhal]

@shirakaba I tried to find your email, but I didn't find a way to contact you 😕 Can you please send me an email, I'd like to collaborate with you on this project.

[corysimmons]

I thoroughly enjoyed reading this issue.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.