React Native Navigation library showModal, push, pop relating to the React Native lifecycle - react-native-navigation

Using the 'react native navigation' library
Short:
How does the react native navigator library relate to the react native life cycle. I know it's built on top of native code. It seems you could call showModal, push, pop from several lifecycle steps (componentDidMount, componentDidUpdate, ...). Is there a best practice and what are the reasonings.
Details:
I'm currently using react native navigation to build on onboarding flow. During my onboarding flow (midway) there is a trigger for a secondary flow to launch. At this point I open a new modal and push a screen (screenB) into modal #2. I'm running into the issue where screenB will not render unless I enabled JS debug and set a break point within screenB . The break point can be anywhere in that file so long as it gets hit. I have retested this many times and can only get screenB to render if a break point is set.

Related

Should I use electron's webview to emulate a browser?

I want to write a browser for some purpose using electron and I choose the <webview> tag to emulate the browser page.
It has a toolbar which contains back forward refresh buttons.
I bind the new window event, in the handler I just create a new <webview> tag for that url.
However, I found that there are some limits.
1. window.opener in new <webview> is null
2. <form> with method="POST" can't be handled correctly, because there are no solutions to get postData from new-window event.(But there is probably a PR for this: https://github.com/electron/electron/pull/19703)
Perhaps I'm wrong from the start. I shouldn't use electron for this purpose? But I don't know much about c#/c++...
I do not recommend to use <webview> at the moment as its usage is strongly discouraged by the Electron team. The recommendation is to use a BrowserView instead (see documentation).
Using Electron to build a web browser should work fine, there is actually a similar project called Wexond. You could check it out as a starting point for your own browser.

Ionic 4/Angular 7 lifecycle hooks called just one time per page

In ionic 3 there was lifecycle events like ionViewWillEnter and ionViewWillLeave. But in Ionic 4 this event must be replaced by Angular lifecycle events like ngOnInit and ngOnDestroy.
In my application I need to realize some given operations when the user enter or leaves a page. For example, if the user push another page (navigate forward in Ionic 4), the app whould execute ionViewWillLeave for the current page before the new page being pushed. If the user came back from a pushed page (navigate backward in Ionic 4) the app whould execute ionViewWillEnter for the previous page.
I tried to replace this events with ngOnInit and ngOnDestroy. But this events are called just one time each per page. For example, if I route to another page (navigate root in Ionic 4) and came back to the first page, the first page the ngOnInit and ngOnDestroy events will not be called again.
How can I call a event each time a user enter or leaves a page?
I made a mistake. The documentation says:
With V4, we're now able to utilize the typical events provided by
Angular. But for certain cases, you might want to have access to the
events fired when a component has finished animating during it's route
change. In this case, the ionViewWillEnter, ionViewDidEnter,
ionViewWillLeave, and ionViewDidLeave have been ported over from V3.
Use these events to coordinate actions with Ionic's own animations
system.
Older events like ionViewDidLoad, ionViewCanLeave, and ionViewCanEnter
have been removed, and the proper Angular alternatives should be used.
Migration Guide - Lifecycle Events
**
Lifecycles in Ionic 4
**
Ionic 4 extends the Router Navigation of Angular
Ionic 4 introduces a stack functionality (like in Ionic 3)
Ionic 4 adds new Lifecycle Hooks to Angular:
ionViewWillEnter — Fired when entering a page (also if it’s come back from stack)
ionViewDidEnter — Fired after entering (also if it’s come back from stack)
ionViewWillLeave — Fired if the page will leaved (also if it’s keep in stack)
ionViewDidLeave — Fired after the page was leaved (also if it’s keep in stack)
ionViewWillUnload — In Angular not firing because here you have to use ngOnDestroy
Except ionViewDidLoad (because it’s the same like ngOnInit) and the two nav guards all Lifecycle hooks from Ionic 3 are still available
ngOnInit will not be triggered, if you come back to a page after putting it into a stack
By default, if you navigate forward, the current page keeps in stack, so NO ngOnDestroy will be triggered. Only if you set the new page as root (navController.navigateRoot())) or you navigate backwards, it will be removed from stack
If you want to cancel Observables, just do it ionViewWillLeave or ionViewDidLeave and subscribe to it again in ionViewWillEnter or ionViewDidEnter
Take a look at the DOM inspector, there you can see that your page is still in the stack
If you use the Angular Router, pages will add to the stack. I recommend to use the Ionic Angular NavController because here you can use the new stack functionality
I feel this is the problem you need, you can refer to my solution.(ionic 6 , angular 13).
Ionic Globally Call IonViewWillEnter on App.component.ts

Implementing react server side rendering and responsive components

I am using react-responsive-redux in which the whole Implementation of media queries is done based on a variable in state called fakeWidth . To get it working according to the docs we need to dispatch a redux action during request handler. In my project I do that in the serverEntry.js file, though the in built helper components of the module did not work because in my project I am using immutableJs.
So Now I am using selectors.js to get the fakeWidth that is present in the state.
This works well but the component in the media query component (that says Mobile device) does not show up in the first render of the app.
I am not able to figure out why is that happening and what should I do to prevent that.

implementing site wide progress indicators

I have a website running on the MEAN Stack (mongo, express, angular, node) and I am using jade as the templating engine for serving partial files.
Now, I already tried ngProgres but according to the API it can be used along with the $http services or file uploads only as only there my javascript function is waiting for response and during that time I can use ngProgress but how do i show progress indicator while the partial template files are being retrieved?
If you would like all the loading mechanism to happen automatically, have a look at this project:
Angular Loading Bar
An automatic loading bar using angular interceptors. It works automatically,
so simply include it as a dependency and it will automatically display
the progress of your $http requests.
For non-angular apps, see: PACE
an Automatic page load progress bar
Hope this helps.

Method(s) used to pass data to and from WebKit based browser

I'm using WebKitGTK+ ( WebKit ) application that will be a very simple web browser running in a Linux environment as a separate executable that will need to exchange data between another application. The system is described in the following image:
Example scenario:
Event such as smart card insertion detected in Backend processing Application
smart card data is read and passed to the WebKitGTK+ GUI Application
User interacts with "web page" displayed in WebKitGTK+ Application
Data is passed from WebKitGTK+ Application back to the Backend processing Application
What are the common methods of passing data between the WebKitGTK+ Application and the Backend processing Application?
Does `WebKitGTK+ provide some hooks to do this sort of thing? Any help at all would be appreciated.
I know this is a old question, but will try to answer it to best of my abilities so that it can be useful to someone else.
Webkit is basically rendering a html page. You can connect to various signals that webkit provides and act on these signals. More details at http://webkitgtk.org/reference/webkitgtk/stable/webkitgtk-webkitwebview.html
For your back end application, if something interesting happens, you can update page either by navigating to a new url, new page contents or just by setting text of desired element. Webkit provides DOM api functions and all of these are possible.
It becomes interesting when getting data from webkit and sending it to your back end system. Again, this depends upon your specific design, but generally you can hook up signals such as navigation signals when user clicks on a button and get contents. Another alternative is to use alert handler and simply use javascript alert and process the alert data on backend side.
Shameless plug for example : https://github.com/nhrdl/notesMD. It uses a simple database backend, probably can be good use case as it sends data back and forth between database and webpage. Even manipulates the links so that desired actions take place.

Resources