React Native Navigation view list of screens - react-native-navigation

I'm currently using the react native navigation library. I'm having trouble debugging certain issues and I want to know :
how do you view the stack of screens that are currently pushed?
when you have cascading modals, how do you view their order and do the modal instances have a unique ID?

In case your are using react navigation with redux. You can locate them in the debugger tools which also gives you the order and the unique ID.
something like this.
edit for your comment:
you can watch for state change in redux to determine the current screen. I guess there is no getCurrentScreen. React navigation provides callback for state change which you could use.
onNavigationStateChange={(prevState, newState) => {
// your code to determine screen
})

Related

Chrome Extension Disappears while clicking outside of its resolution

Is there anyway that I can make Chrome Extension's window stick in window even while clicking outside of its resolution?
I'm trying to make it Sticky on the window for one simple google login so that I don't need to go back again to click extension to open it.
By using tabs API you could retrieve windowId of the window you want to focus on. You could do it only if needed e.g. by using query method from that API. You could pass url for example.
If you created a window that you want to be still focused then you have its id already in the hand.
After that, you could use window API update method in order to draw attention or focus. Take a look at updateInfo params - focus and drawAttention.
The same could be done by using tabs API. You could pass tabId and the URL you want to redirect someone.
Now in order to make it work you have a couple of options:
You can use setInterval which would be used to check if the tabId and windowId you want are active and focus the window/tab you want in another case.
Because in the MV3 extensions using setInterval is not recommended you could use alarms. Please take a look at AlarmCreateInfo, when param should help you instead of triggering the alarm periodically.
You could also use event listeners from both windows and tabs API to listen on tab / window focus change. Then you will be able block the change (from user perspective) by methods I described before.
You should play with all approaches and pick on that suits you, because all of them have some drawback. But don't want to make that comment very long.

How to use Yahoo YUI in SuiteCRM

I am learning SuiteCRM and have a longway to go. I have never used Yahoo's YUI library.
I am wanting to create a popup dialog in the AOS_Quotes Edit View page with some ajax calls and noticed in some examples that SuiteCRM makes use of Yahoo's YUI. I searched the documentation and after several search engine searches, I was not able to find anything that tells me how I include the YUI library.
Can someone direct me to how I make use of YUI in SuiteCRM and some direction on how popup's and ajax calls are made?
Thank you.
Still Learning...
SuiteCRM deprecated and totally removed YUI library with version 7.11.16
You can use existing SuiteCRM backend methods to save data using ajax and create your own popups with jQuery (latest version have an updated jQuery version)
For example, saving a field could be done with QuickEdit calls Sending these params in the call:
module: Home
action: saveHTMLField
field: phone_office
current_module: Accounts
id: 123-123-123-123
value: 563-1231-3355
view: DetailView
parent_type:
to_pdf: true
Again, don't use YUI, and if you don't need to tweak an existing popup create your own popup and use existing AJAX calls, just pay attention to the developer console (network tab) while using the CRM.

How do I save form data using react-router-dom?

I have a route with a component that displays some form data. When I hit the submit button, I'll navigate to a different route that contains a receipt. If the user hits the back button, I want to remember what was entered in the form. How can I achieve this when using react-router-dom?
What you need is some type of data/state management for your react application.
Mobx is a good example for this. Search up how mobx works and how you can use this together with react.
With Mobx, you can store the user's form inputs in some type of class that you can decorate with mobx (for example DataStore class), which you can then read on your other page when you navigate there with router.

Custom theme as feature

so i'm creating an app that needs a dashboard where the user can adjust a "custom" css layout, i cant think on a solution for this problem. You have something in mind that could help me accomplish a solution for this?
Thanks.
Im currently using expressjs and mongoose if you need to know.
front-end will send you via a POST the name of the theme when the user will try to change it and you will save it in the users collection for that user id. The front-end app will use the default theme, unless it gets the theme name via a GET and apply new css.
Also, you could use local storage for this feature.
EDIT: I assume that the user can pick theme from predefined names (templates) like "Dark", "Light" theme etc.

Method to autoupdate Chrome Extension badge

I'm building a Chrome extension that makes the badge show a number returned from an API. I have the code working fine, but I have it listening for DOMContentLoaded, so it only updates when the user opens up the extension.
I would like the extension to check the API every time the browser loads a page. I do not need to change anything in the page, I just want to use it for timing.
I'm not sure what I should be using, should I be using background pages, event pages, or something else? What would be the best way to go about this?
Thanks in advance!
The api you want for “every time the browser loads a page” is chrome.tabs.onUpdated. You’d have:
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab) {
chrome.browserAction.setBadgeText({"text":"ABCD","tabId":tabId});
});
An easy approach for development is to use a background page, get it working, and then figure out what changes you need to convert it to an event page. With this stub however, nothing is stopping you from making it an event page.

Resources