I'm looking for an example of using react navigation 5 with class components - specifically for deep link handling.
Since class components can't use hooks the example doc does not help much. My implementation is using getStateFromPath(..) followed by ...reset(..) This works great when app starts closed but with app open the navigation never happens at ...reset().
An example of how deep linking works with class components would be great.
Related
When I integrated the "react-i18next" library it gave an error of "Invalid hook call" because the "useTransition" function is available for function-based components and we have pure class-based components.
So for an alternate solution, I have implemented it on a global level and currently it's working. But, now it has to be called in every page. Is this correct? Shouldn't it be set at the root App level so this is not needed in each child component?
So i have a laravel application that i built and is live using Laravel without Vue.js. Now, finding out about vue.js and its lightweight + numerous additional features for improved user experience, i have decided to include it and rebuild my app into components with much better reactivity.
The only issue is, with my little research, i found out that the main vue element in the resources/js/app.js points to an #app element in views/layouts/app.blade.php which would be fine if perhaps i had an SPA or and MPA that starts from there.
However, in my implementation i have different layout files for both back end and user section of my app, and i don't know how to go about it ( which element to point the vue object to).
Here's what i would like to have though, if possible. I would want a commons.js to have all my common components and imports and perhaps a [page].js for pages where i would need a bit more.
Thanks in advance!
I figured out how to handle this.
The Vue instance created in the app.js doesn't have to be your only instance. In MPA's you will most like have multiple vue instances, perhaps on per page. To keep my code clean, i kept the dependencies common to my whole application in app.js.
For my portals, each portal has a commons.js which containts dependencies specific to the management of my application and hence dont need to be loaded when the user is surfing my up. I set to bundle with webpack and include in all portal pages.
Furthermore, each page has a page.js which is also bundled and included only page specific dependencies (components etc) and a vue instance for each page.
By using this architecture i reduce the JS needed to be loaded to only the necessary on both portal pages and the main app for users.
Hope this helps someone! Happy coding.
I've been using NativeScript for a while in some projects. One think I noticed is that "default" NativeScript directives, such as nsRouterLink, tap and some others does not work with components that I created.
The only times those directives works are when they are using with its default" components such as GridLayout, Label, etc.
I've created a small PlayGround project to demonstrate my issue: https://play.nativescript.org/?template=play-ng&id=rZYQGP&v=3
I think I should import those directives into my custom components somehow, but I have no idea how.
Unfortunately it's not as same as Web with NativeScript, you have to attach the events to the actual element and not on the custom selectors. An alternative is that you can emit an event on your custom component when actual element is tapped.
There is a open feature request already.
I'm no expert but I had same issue recently and could make workaround.
NativeScript's pure component should be registered appropriate
ly on Angular environment to work properly.
This can be done with registerElement from nativescript-angular/element-registry.
By registering, the Angular Component should work like intended element.
Unfortunately, the property of the element can only be accessed with HostBinding
I have forked and applied workaround to PlayGround project you have provided: https://play.nativescript.org/?template=play-ng&id=SCLxVk
I'm in the process of creating my first NativeScript Angular app and it consists of a form that will need to span across multiple screens.
I tried to be creative and add the form pages into slides using TheOriginalJosh/nativescript-slides. This actually worked out beautifully as I was able to slide to each form page smoothly.
But a problem started to arise when initially navigating to the form component as it started to take a few seconds to load. I'm assuming this was happening because the form spans across 10 pages with multiple GridLayouts in each slide. I thought about using TabView but I wouldn't need the menu portion of it and I'm worried it will cause the same issue with loading speed.
So what is the best way to implement this?
Should I just create 10+ form components, use a universal service and just route each form part to another or is there a better way to "encapsulate" this into one component without any performance loss?
I also saw in the NativeScript documentation about this..
It is possible to nest <router-outlet> component inside <page-router-outlet> or another
<router-outlet>
But there isn't any documentation on how to implement this.
There are many way to use nested router-outlet in ns, and in a very big project, it is best to use shared modules architecture, which enable a module nested in another, so the view can be nested too.
Here is my nativescript sample with nested using shared modules architecture :
in profile is nested in app.component.
in parent view:
https://github.com/Arthurisme/auth0-iosmorphic/blob/master/Mobile/Nativescript-for-Spring-Auth0/app/app.component.ts
in childview:
https://github.com/Arthurisme/auth0-iosmorphic/blob/master/Mobile/Nativescript-for-Spring-Auth0/app/profile/profile.component.html
I started developing a desktop-class application using Electron, and am referring to the starter app as well as the Electron API demo app. This application has a single screen with multiple sections. Interaction within one particular section can cause other section(s) to get updated. These interactions must be in sync with an underlying model [object]; two-way data binding could be helpful here.
What is a recommended way to achieve a multi-section window with each section interacting with one another? Should I compose the layout using DIVs and CSS, or is there a library that I can use effectively with Electron? I was thinking about Handlebars or Jade but I am not sure if I need a template engine, as the entire screen is not rendered and only particular sections will be updated.