I am trying to implement a page where top part of page is static and bottom part keeps on changing. I was able to achieve this using react-native-modal. But the problem is the back arrow button which is always supposed to be on the top of page becomes inaccessible entire time. I want to access the button even when modal is active.
Any help will be really appreciated cause it's not available anywhere, I went through the entire react native and react-native-modal docs related to this
Related
So we have a primereact components based app,
and the problem occurs when triggering the show of an overlay component
(usually a Dialog, but I've noticed it could also happen with Sidebar),
in a specific page that concerns with showing a table and the basic crud associated with it,
we show the form to create/update inside a Dialog,
when clicking the appropriate button the dialog shows..
only sometimes the dialog crashes and this error shows:
this have been happening for a very long time, and there were many attempts,
not even to fix it, but just to get the bug re-produced consistently.
couldnt do it...
of course tried finding a setState that could get stuck in a loop
any help would be appreciated :)
would anybody here know if it's possible to do something like what happens in this screen recording? https://www.dropbox.com/s/snhhbeq8knk5dyc/modal-window-routing.mp4?dl=0
It's about routing a modal window, while keeping the UI underneath intact. Normally I'd say that to achieve this in React router the URL would need to encode both what's behind, and the modal. Maybe with some nesting scheme (e.g. /mainview/settings/general). But Outlook web manages to do so while not reflecting in the URL the view that was present when the modal was fired.
Note in the recording how the URL for the settings modal is the same, regardless of whether you open it from the Drafts or the Sent Items or wherever. However, the view from which you opened is kept rendered, and it's where you go back to when you close the modal.
according to the react-router-dom documentation, the following link lays out the proper way to go about achieving your desired result https://reactrouter.com/web/example/modal-gallery
I am able to change the position (swipe up) of my View accordingly with PanResPonder. The problem is during the swipe motion, the content of the View being dragged for the swipe do not render.
I tried using flexGrow:1 and flex:1 so as the View enlarge with the swipe, the View would be getting filled by content.
I know there a few libraries out there for swipes but I think this is fairly doable without library.
Thanks in advance cheers.
It really depends on your approach there. First things first.
You have to understand about JS Bridge and Native on react-native. The JSBridge is single-treaded and all the fired renders go through there. It means you can easily get dropped on FPS if you do not take it into account. The Native, well, is native code running, thats all.
To have performant app, you have to keep the passes over the bridge to a minimun.
The PanResponder touches happen on the native side, while the component renders use the bridge. You should put some code there, but i would bet that the problem is with too many renders happening and the JS Bridge gets overloaded.
Also try to use Direct Manipulation (https://facebook.github.io/react-native/docs/direct-manipulation.html) to avoit rendering one entire tree and perform it on the native side.
I want to pop a modal with "Cancel" and "Yes" buttons when a user attempts to leave the single-page app.
To provide some context, I am working on a single page app that appears on a larger site that is not part of the single page app (so, the header and footer is part of the larger site, and single-page-app is the content). When a user attempts to leave to another part of the site (by clicking somewhere in the nav for instance) that is not part of the single page app, I want a warning modal to display with a warning. A user can close or refresh the page as much as they want, and it shouldn't pop a modal. Same thing if a user hard-codes a url (say, google.com in the browser), the modal should not pop.
So far the other similar threads I found on stackoverflow either uses Prompt component, or window.onbeforeunload. Both of these have the issue of them popping a default text box with a warning, and not a custom modal, which is an important problem, but that isn't all of the issue.
Prompt, to my understanding triggers whenever a user redirects within the single page app, which is not the behavior that I want.
window.onbeforeunload, to my undertstanding triggers even when refresh or close, which is not the behavior I want.
Maybe this isn't such a common problem, since I can't seem to find an easy solution for this, but any and all ideas are greatly appreciated.
We are using angular-material's md-tabs to display information to the user.
Up until now we used an on-demand approach by adding
ng-click=vm.getForExampleDataForTab1(),
ng-click=vm.getForExampleDataForTab2()
and so on for each md-tab. But this solution has a problem that the first tab is displayed with no data because it doesn't get clicked by the user. So we switched to md-on-select instead. And that did the trick, the first tab was getting data and all was fine. Apparently. We then discovered in Chrome's Dev tools that when moving to another page in the app, all the other tabs that were not selected (the user didn't click on them to view the data) were called.
Did anyone encounter such a behaviour? It only happens when we used md-on-select, not ng-click on the tabs.
Thanks a lot,
ashilon