How production ready is this?

[CMCDragonkai]

Is there a lot of work necessary in order to be able to use simple React components inside Nativescript?

[shirakaba]

1. Don't use this in production yet, as there's still no documentation, only one sample app (note: only works on iOS if you're downloading via QR code), and there's no navigation library.
2. Using simple React components – yes, even complex React components are fully supported; there are many examples in here. To clarify, they need to be built up of the following NativeScript Core-based primitives, e.g. <$StackLayout>; abstracting them into React Native-style <View> and <Text> components requires a great amount of further work, but it's a long-term goal (see my next comment on React Native interoperability). Simple React-DOM components – no, never. Simple React Native components – proof-of-concept support has begun, but it's far away from being as usable as React Native Web.

All these things will be addressed in time, but I'm just one guy. The NativeScript team is also busy with the v6.0 release, so things like NativeScript Playground and NativeScript CLI support (key parts of aiding on-boarding) are bottlenecked until at least mid-July.

My immediate priority list, by popular demand, is:

1. A sample real-world app.
2. A documentation website.

React Native interoperability is definitely a long-term aim of mine, but can't be a top priority because the library needs to work well standalone before I add the complication of consuming React Native codebases.

I am chipping away at these features bit-by-bit!

[CMCDragonkai]

I wonder if the nativescript team would be willing to give official support to react. That would allow react devs to use nativescript instead!

[shirakaba]

... That would allow react devs to use nativescript instead!

@CMCDragonkai No, this project already allows React devs to use NativeScript. And it is perfectly possible to build apps with it, it's just a bit hard for newcomers without any documentation (which is planned).

What we'd gain from official support, to my understanding based on the precedent of NativeScript Vue:

• An option to create React projects from a template in NativeScript CLI*
• A starter template in Playground*
• Front-page advertisement on the NativeScript site
• A small dedication of contribution time by the core team (see the commit history for NativeScript Vue – it's not usually feature work)
• Professional UI components possibly coded by the core team (although I've done several already)

* I believe we'll get these features eventually from the core team even without "official" support, but it'll take some time.

[Lelelo1]

I am using this to create an app for a very small company right now. It is not an order - but given to me more as an educational assignment.

So far I have had no issue running this on Android at all - it works as you would expect.

The most limiting factor so far has been that I can't use plugins properly (mentioned as not being supported yet). However I have worked around it by manually adding the plugin components into the layout. It can be done with a method (build) that takes the parent layout as parameter.

stackLayoutRef = React.createRef<StackLayout>();
method() {
    const layout = this.stackLayoutRef.current;
}
build(layout) { // can also be called from parent component in componentDidMount
    const myPlugin = new MyPluginComponent()
    layout.insertChild(0, myPluginComponent)
}

and jsx/tsx like so:

render(){
    return (
        <$Stacklayout ref={this.stackLayoutRef}>
             {/* MyPluginComponent gets here */}
            <$Label text="my other..." />
            <$Label text="nativescript components"/>
            <CustomComponent /> {/* <-- is required to return a nativescript component or other components -  that in turn contains natvescript components */}
        </$Stacklayout>
    )
}

Once it is in the layout - the plugin component works just as one would expected. But again it would be much easier to be able to declare the MyPluginComponent in the jsx/tsx. of course.

I miss the react/reactnative View a great deal.

I am happy tough as I can use my favourite state management tool MobX (yes it seem work flawlessly). Also autocomplete and auto import in vscode works - which the former I was unable to get working in the xml (for describing the ui instead of jsx/tsx) in vanilla Nativescript.

[shirakaba]

@Lelelo1 Thank you for your continued efforts to use React NativeScript (even before I've written any documentation for it)! I'm impressed as always that you're doing so well with it, and humbled that you're even using it in a professional project.

UI Plugins

The most limiting factor so far has been that I can't use plugins properly (mentioned as not being supported yet).

Indeed, I haven't stabilised the API for writing UI plugins yet, and I do plan to change it to make it easier – but it is at least possible to make them. You just need to be aware that the API will change after the current version (0.11.0).

I have a few examples for RNS v0.11.0 here:

https://github.com/shirakaba/rpstrackerrns/tree/master/app/rns-plugins

That folder includes:

• @nstudio/nativescript-pulltorefresh – easy case, because it simply extends ContentView.
• RadSideDrawer – complex case, because although it extends View, you can't simply add children via sideDrawer.content = myContent like other views; you have to define a CustomNodeHierarchyManager mixin to assign to sideDrawer.drawerContent or sideDrawer.mainContent.
• RadDataForm – 22 different examples of custom components extending different views, and even extending each other; some easy and some complex cases. Writing this nearly killed me. I can't say it's pleasant to use RadDataForm, but it is possible...

React Native <View>

I miss the react/reactnative View a great deal.

Yes, it's a very nice component indeed.

I made an effort, in an older release of React NativeScript (where I called components like RCTLabel instead of $Label), to recreate <View> in React NativeScript here:

https://github.com/shirakaba/react-nativescript-compat-react-native/blob/master/compat/primitives.tsx#L33-L40

It works fairly well..!

I also tried to recreate <Text> (it's in the same file) but it was rather harder to translate because NativeScript Core lacks various features of React Native and none of TextView, TextField, or Label really fit the behaviour of <Text>. Deeply nesting these leads to app slowdown.

Obviously I haven't formatted the GitHub repo as a consumable library, so it's unclear how to run the code (you'd have to set up RNTesterApp as your entry component), but what the repo actually is is an unfinished port of RNTester.

Dev experience

Great to hear that auto-complete and auto-import are working nicely! I did always want the dev experience to be superior to that of NativeScript Core.