This would allow Pages to be kept in memory rather than removed automatically upon Page dismount.

Will have to think hard about which is preferable. Maybe there are cases for both.

I have git clone https://github.com/shirakaba/react-nativescript.git then inside sample ran npm install. When I then run the sample: tns run ios --bundle --syncAllFiles --emulator I get the following error:

ERROR in ../node_modules/react-hot-loader/dist/react-hot-loader.development.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/Me/Projects/react-nativescript/sample/node_modules/react-hot-loader/dist'
 @ ../node_modules/react-hot-loader/dist/react-hot-loader.development.js 10:31-51
 @ ../node_modules/react-hot-loader/index.js
 @ ./testComponents/HotApp.tsx
 @ ./app.ts

Inside react-hot-loader-development there is this line var ReactDOM = _interopDefault(require('react-dom'));. I have tried to install react-dom into that node_module but it does not make a difference.

The error is only the first and are followed by other errors.

Might be working already, but need to check.

With reference to:

• Get component name in React

May be a case for using a Mixin or decorator.

Having troubles understanding NativeScript's UI architecture.

Disregarding the React renderer for the moment, I need to understand how one starts up an app and starts building the UI (I normally do this via the more magical XML route). In this minimal example, the background goes green (the colour of the Page), but I'd expect a purple ContentView to fill the page, too.

Do my components have to be in a Layout container of some sort (note: I did try a variation on this without any more success)? And is there anything further I'm missing?

import { on, run, launchEvent } from "tns-core-modules/application";
import { Frame } from "tns-core-modules/ui/frame/frame";
import { ContentView } from "tns-core-modules/ui/content-view/content-view";
import { TextBase } from "tns-core-modules/ui/text-base/text-base";
import { Page } from "tns-core-modules/ui/page/page";

on(launchEvent, (data) => {
    const frame = new Frame();
    const page = new Page();
    page.backgroundColor = "green";

    const contentView = new ContentView();
    const textBase = new TextBase();
    contentView.height = 100;
    contentView.width = 100;
    contentView.backgroundColor = "purple";
    textBase.text = "Hello, world!";
    contentView._addView(textBase);
    page.bindingContext = contentView;
    
    frame.navigate({ create: () => page });

    data.root = frame; // Incidentally, should this be the frame or the page?
});

run();

This would allow inheritance of all of that View component's event listener-handling code.

I haven't thought about this for a while and have forgotten what's going on.

1. Slider doesn't implement updateListeners():

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/Slider.ts

2. "submit" and "close" are implemented in SearchBar's updateListeners, but only "textChange" is mentioned in its componentDidMount and componentWillUnmount methods.

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/SearchBar.ts

I'd expect Page, View, and EditableTextBase to be reliable prototypes to refer to:

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/Page.ts

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/View.ts

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/EditableTextBase.ts

I'll look into them when I have a moment.

Currently they will continue to trigger renders even when they are not the active TabViewItem. This is easily seen when using the Clock or GameLoopTest components.

So far I've not implemented it at all, but all the NativeScript Core examples just use a single child view. It's a pity that there's no code-behind example, but I can cross-check with how they handled the Vue implementation.

https://docs.nativescript.org/ui/ns-ui-widgets/scroll-view

https://github.com/NativeScript/nativescript-sdk-examples-js/tree/master/app/ns-ui-widgets-category/scroll-view

I am trying to access the native component of button.ios/textfield.ios etc. But layouts and controls are all undefined in the componentDidMount method.

export default class ComponentExample extends React.Component {
    stackLayoutRef = React.createRef<StackLayout>();
    buttonRef = React.createRef<Button>();

    componentDidMount() {
        console.log("did mount succesfully");
        // both native ios components are undefined...
        console.log("stackLayout " + this.stackLayoutRef.current.ios);
        console.log("and button: " + this.buttonRef.current.ios);
    }

    render() {
        return (
            <$StackLayout ref={this.stackLayoutRef}>
                <$Label text={"This is an example"}/>
                <$TextField text="input"/>
                <$Button ref={this.buttonRef} text="test" backgroundColor={new Color('purple')}/>
            </$StackLayout>
        )
    }
}

Both Frame and Page ios properties can be accessed however.

I have also tried to:

render() {
        return (
            <$StackLayout ref={(ref) => {
                // Intending on assigning ref to instance variable to use inside componentDidMount
                console.log("stackRef: " + ref); // <-- does print: 'stackRef: StackLayout(2)'
                // crash
            }}>
                <$Button text="test" backgroundColor={new Color('purple')}/>
            </$StackLayout>
        )
    } 

But then it crash with the following error: "*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'node.on') at". And I get the same error trying it with the Button as well - coming from simply assigning ref with a anonymous method (ref) => { };

How can I for example access the UIButton from the Button in react-nativescript?

ReactNativeScript.render() needs a root node (AKA container) to render into. Thus, I need to get a reference to the application's root view at startup time (which I'll use as the React root). However, I'm facing difficulties:

/* app.ts */
import { on, run, launchEvent, getRootView } from "tns-core-modules/application";

console.log(getRootView());
// application root view is undefined

on(launchEvent, (data) => {
    console.log(data.root);
    // application launch event's data.root is undefined
});
run();

Clearly I am misunderstanding the application lifecycle here. Wondering how I get a reference to the root view (frame) of the app at startup.

References:

• https://github.com/nativescript-vue/nativescript-vue/blob/master/platform/nativescript/runtime/index.js
• https://github.com/NativeScript/nativescript-angular/blob/1da4cfbadacfcba398519b274e426c1ab01d451d/nativescript-angular/platform-common.ts

See: NativeScript/nativescript-cli#4944 (comment)

I get the following error using $SegmentedBar in my tsx:

file:///node_modules/tslib/tslib.es6.js:121:0 JS ERROR TypeError: undefined is not an object (evaluating 'o[Symbol.iterator]')

From @Lelelo1 on the Slack channel:

I have noticed when creating a custom component - then there is no differentiation beetwen $MyComponent and MyComponent. Couldn't direct access to tns-core-modules/ui be restricted eventually? I have also noticed nativescript components can be imported from these 3 places currently:

import { AbsoluteLayout } from "tns-core-modules/ui/layouts/absolute-layout/absolute-layout";
import { AbsoluteLayout } from "react-nativescript/dist/components/AbsoluteLayout";
import { AbsoluteLayout } from "react-nativescript/dist/client/ElementRegistry";

My response

Regarding component naming

When creating a custom component, you can of course name it whatever you like.

For UI plugins that wrap a UI element (e.g. AbsoluteLayout), my convention is to use the name $AbsoluteLayout to refer to the component class, which prevents a name clash with the underlying UI element that it's wrapping.

For custom components that wrap other React components, there is no 'underlying component' to get a reference to, so there is no need for the $ prefix to prevent a name clash.

Regarding import paths for NativeScript core components

Yeah, the many different import paths are indeed annoying. I re-exported them via ElementRegistry for convenience (just like React Native does), but quite likely I've missed some so you can't get every module you need from there.

There is a long-standing open issue in NativeScript Core to address this.

NativeScript/NativeScript#4041

Actionables

Good point about import { AbsoluteLayout } from "react-nativescript/dist/components/AbsoluteLayout";, though. Any component export under "react-nativescript/dist/components" currently lacks a $ prefix (which is indeed confusing). I'd better address that at some point to prevent the Intellisense auto-importing a React component when the user was intending to import a NativeScript Element...

New to Nativescript coming from React Native so maybe my expectations are a little different. I'm noticing a few things that make hot reloading really unpredictable to use.

1. When enabling a component prop like isScrollEnabled={false} and then removing it from the markup it doesn't reset back to true thus indirectly defaulting to scroll enabled.
2. Modifying the logic in something like an onTap callback of a button doesn't reflect code changes.

I'm just curious if I am doing something wrong or if this is just normal at the moment.

With a vanilla install I end up getting this when running tns preview I vaguely recall mention about react not guarding process somewhere, maybe that was redux.

2020-04-11 13:29:05.267 nsplaydev[26749:9709575] *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: ReferenceError: Can't find variable: process
 at 
anonymous(file:///app/tns_modules/react-hot-loader/index.js:3:12)

Sorry if this is another repo or in this repo and I could have linked to the code or even PR'd, I have no idea how nativescript templates work 😬

Anyway, the template has a couple of things missing/included that I wouldn't expect in a more general template or compared to nativescript core's template.

There's a tools/dot.gitignore instead of a typical .gitignore and there's a .awcache folder.

This would:

1. clean up the Host Config, and;
2. would make it clearer how to produce more complex UI plugins;
3. also allow subclasses of any NativeScript View to inherit the custom node hierarchy management code of the corresponding React component that they'd naturally extend, thanks to the mixin pattern I've come up with.

such as Preact (preact-nativescript?), Inferno, or even the rawact Babel plugin?

Can't use core themes on components:

<$TextField hint={"test"}
    className={"input input-border input-rounded"}
    onLoaded={(event) => {
        const textField = event.object as TextField;
        textField.className = "input input-border input-rounded";
    }}
/>

<$Span> should accept a text node similar to <$Label> considering they both use a text prop.

LOG from device Riz: 2020-03-17 06:07:54.795 nsplaydev[2936:806932] ***** Fatal JavaScript exception - application has been terminated. *****
2020-03-17 06:07:54.795 nsplaydev[2936:806932] Native stack trace:
1   0x10167e970 NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x1016c8f58 -[TNSRuntime executeModule:referredBy:]
3   0x10298e25c -[UIApplication(PlayLiveSync) swizzled_executeModule:]
4   0x100ed3524
5   0x18c3a4e18 <redacted>
2020-03-17 06:07:54.796 nsplaydev[2936:806932] JavaScript stack trace:
2020-03-17 06:07:54.796 nsplaydev[2936:806932] anonymous(file:///app/tns_modules/react-hot-loader/index.js:3:12)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])
at require([native code])
at react-hot-loader(file:///app/bundle.js:314:25)
at __webpack_require__(file:///app/runtime.js:751:34)
at fn(file:///app/runtime.js:121:39)
at file:///app/bundle.js:87:93
at ./app.ts(file:///app/bundle.js:172:34)
at __webpack_require__(file:///app/runtime.js:751:34)
at checkDeferredModules(file:///app/runtime.js:44:42)
at webpackJsonpCallback(file:///app/runtime.js:31:39)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation([native code])
at [native code]
at asyncFunctionResume([native code])
at [native code]
at promiseReactionJob([native code])

When I remove react-hot-reload, everything works as expected. But no hot-reload, so this is a deal breaker...

Currently we have a weird situation where the compiler will tell you when your props are simply wrong, but not hint at which props to fill in in the first place.

Have filed a Stack Overflow issue to no avail regarding the specifics of my problem in implementing a solution, but I may have to consult some TypeScript experts to proceed.

Hoping not to have to instruct people to manually add a <reference> tag into their projects.

I am encountering a difficulty in implementing CustomNodeHierarchyManager interface in my rns-reactifiy trial. This is due to the reactify mixin class in my project will need to implement all interfaces and declare all methods currently in use by all rns components - and __ImplementsCustomNodeHierarchyManager__ can only be set to true.

I am not quiet sure of the consequence but I suspected that property enabled at all times is undesirable.

Easy to see in action simply by using two ListViews in the same app (without unmounting one list prior to mounting the other). Each ListView generates root keys in the same way (using a counter) and those IDs very easily clash between instances.

Consequence: ListView cells appearing as being empty.

So instead, each ListView needs to at least have its own unique key to prefix the root keys we'd otherwise be generating.

We'll be using this trick a lot, as it's the only way to navigate.

May require special handling in the Host Config (e.g. to ensure that null.removeChild() is never called on Portal unmount). May also need to learn how properly to handle unmounting such a portal.

The abstract <RCTView> (I need to rename it to <$View> for consistency...) class component takes in props for onLoaded and other events. Although they indeed belong to the NativeScript View component, some of the event names (loadedEventName and unloadedEventName, at first glance) also seem to be registered on ViewBase.

https://github.com/shirakaba/react-nativescript/blob/master/react-nativescript/src/components/View.ts#L23

https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/core/view-base/view-base.d.ts#L209

https://github.com/NativeScript/NativeScript/blob/master/nativescript-core/ui/core/view/view.d.ts#L515

I don't know whether this means that ViewBase also supports its own onLoaded and onUnloaded events, but either way, it shall need looking into.

I have used the state management tool MobX in my app and everything has worked in debug - but in release however - MobX observables has stopped working and no more triggering render.

Usage, where I have button:

<$Button ref={this.recordButtonRef} text={"Personuppgifter"} onTap={() => {
    console.log("settin: " + !FormViewModel.get().isHidden);
    FormViewModel.get().isHidden = !FormViewModel.get().isHidden;
}}
/>

Where the FormViewModel is synonymous to a "Store":

@observable
isHidden = true;

And a form is rendered depending on the value of isHidden:

renderForm() {
    return FormViewModel.get().isHidden ? null : ( 
        <$CardView
            forwardedRef={this.cardViewRef}
            margin={10}
            borderWidth={2} 
            shadowOffsetHeight={2}
            shadowOffsetWidth={1}
            className={"cardStyle"}
         >
         <Form ref={this.formRef} />
     </$CardView>
            
        );
    }

Note that most of the app was developed without rns-reactify and those parts has also stopped functioning where they are using mobx observable. I am never calling setState in my app - using mobx instead.

My dependencies are the following:

"dependencies": {
"@nstudio/nativescript-cardview": "^1.0.0",
"@nstudio/nativescript-checkbox": "^1.0.0",
"mobx": "^5.13.0",
"mobx-react": "^6.1.3",
"nativescript-carousel": "^6.1.0",
"nativescript-cfalert-dialog": "^1.0.15",
"nativescript-contacts": "^1.6.2",
"nativescript-email": "^1.5.5",
"nativescript-floatingactionbutton": "^5.1.0",
"nativescript-iqkeyboardmanager": "^1.5.1",
"nativescript-theme-core": "^1.0.6",
"nativescript-toasty": "^2.0.1",
"react": "^16.9.0",
"react-nativescript": "^0.12.0",
"rns-reactify": "git+https://github.com/Lelelo1/rns-reactify.git",
"tns-core-modules": "6.0.1",
"tns-platform-declarations": "^6.0.6"
},
"devDependencies": {
"@babel/core": "^7.5.0",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-react": "^7.0.0",
"@types/react": "^16.9.2",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.6",
"fork-ts-checker-webpack-plugin": "^1.3.7",
"nativescript-dev-webpack": "1.0.1",
"react-nativescript-hot-loader": "git+https://github.com/shirakaba/react-nativescript-hot-loader.git",
"typescript": "3.4.5"
},

Currently only supported via FlexboxLayout component; would be nice to handle this transparently instead.

Using "react-nativescript": "^0.11.0",. And there appears to be no problem creating GridLayouts in componentDidMount and adding them.

Obviously the installation instructions are horrific. Would love to circumvent this with a NativeScript CLI starter template. Will have to get in contact with the team for that.

Bikeshedding to follow.

First of all I had to downgrade node to be able to start the build process with nativescript sidekick.

When building apk in release I get the following error

(CLI) TypeError: Cannot read property 'dispatch' of undefined
node_modules/fork-ts-checker-webpack-plugin/src/index.ts:690:60

Build failed. Executing webpack failed with exit code 1.

I have noticed that the "fork-ts-checker-webpack-plugin": "^1.3.7" module which is a dependency of my react-nativescript app has a node_modules/fork-ts-checker-webpack-plugin/lib/index path, not node_modules/fork-ts-checker-webpack-plugin/src/index.

I have the following webpack in my package.json: "nativescript-dev-webpack": "1.0.1"

In short, implement all of Architecture and Navigation in a React-friendly way.

So far <TabView> is fully implemented (as far as I can see), but is pending optimisation (#10).

What remains is the Frame/Page navigation. I've got reacquainted with the new React Context API (was previously used to the legacy version) which should provide a basis for approaching this.

More lightweight than a ContentView.

https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts

Best to refer to React DOM’s CSS handling here.

From a discussion with triniwiz, on Slack:

triniwiz: everything that is an instance of the property u can bind to it like propName + change
triniwiz: Property is from ui/core/view
myself: So can you even listen for events fired in response to styles (e.g. left) changing?
triniwiz: I have tried but something like borderRadiusChange

... To be honest, I'm not sure whether such a feature is necessary in React NativeScript, because after all React makes everything declarative to begin with. Want to record this information so that it doesn't become lost, in any case.

• Listeners always-on
• Listeners pass on the event to whichever callback is registered as the current prop

https://docs.nativescript.org/ui/action-bar

ActionItems can be as complicated as any view hierarchy!

When tns run ios --no-hmr- I encountered the prompt to update:

So I ran tns migrate - but it created an error:

file:///app/app.ts:1:74 JS ERROR Error: Cannot find module './AppContainer'

...That wouldn't go away. I made sure the export and import where correct - and had made no recent edits to the code.

It was solved by copying the old tsconfig.tns.json and webpack.config.js into the migrated project version - since I read the tns upgrade made edits to those files

I went back to the first commits made to the repo and saw it was the first file created - separate from the index file.

It's purpose (?) seem to have been to supply HostConfig with the NativeScript components. Currently tough when wrapping plugins - there also seems to be a necessary register() call to the element registry.

So it is not only a practical way of handling the ns imports?

Additionally I am tempted to grab all ns imports via the elements registry - as the imports then simply becomes more readable and coherent:

I assume there is no harm in doing that?

Hey @shirakaba.

Had a little downtime so started to look into react-nativescript and noticed that for those who may use npm over yarn, they'd be hit with the following error:

npm ERR! premature close

Adding a package.json seems to solve this (e.g. here https://github.com/LeslieOA/react-nativescript).

Hope this helps/let me know if a PR would be more helpful.

Peace.

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

May be tough to solve this in practice, as the core components don’t have unique event listener setter fields like onPress; they use on() for all types of event.