I am using react-native-navigation library to navigate through screens in my app, the problem is that if I navigate to a screen by pressing a button and press fast multiple times then that particular screen opens multiple times. My question is if it's there any possibility to check if a screen exists in the stack before pushing it, I wonder if exist any method or property from which I can get the stack with the components ids.
PS: I don't want to disable the button after first tap.
You can throttle the function where the button click event is handled. lodash.throttle can be used quite easily for this.
Related
I'm in some component where user can provide some data. If user clicks any button or swipes or do anything to navigate to some different Scene I want to detect if he provided some changes he didn't save and if yes, I want him to stay on the current screen, not navigate, and finally probably show some modal with warning. How can I achieve that with react-native-router-flex?
I've tried many approaches with onExit function f.e but failed to make any use of it...
I have 3 tabs in my project
Home
Bookmarks
Random
Now I want to reload (fetch data) when i change the tab from either home to bookmarks or random or vice versa.
I could only call them once ie first visit as i have been calling the API from componentDidMount(). I was trying with willFocus listener events but couldn't able to use it.
How to reset data and load screen once tab is switched or pressed twice?
Any lead would be greatly appreciated.
The easiest way is to pass tabBarOnPress prop to your tab navigator where you can fetch your data and then call the defaultHandler: https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress
i am stuck in a problem that is,
in my application one screen has a Tabbar component so i have used Tabnavigation from react-navigation.
so there is two tabs in that screen and both of that tabs have GET API for displaying data
so my main problem is when tab screen is open at that time both tabs file is calling API because of tabnavigator is in stack navigator.
So please help me to solve this issue.
i have to do like this::-
when i click on tab then after API will be call but here when the screen is arrive at that time both tabs call their API.
so please sort out this issue guys.
You can use TabNavigator's lazy prop.
lazy - Whether to lazily render tabs as needed as opposed to rendering them upfront.
This way your API call will happen only when you switch to that tab. The call will happen only on first switch though. You may need to add some logic to recall API on certain event or time to get the new data.
Is there any way to prevent the default back button behavior in the navigation bar of a navigationview?
I'm trying to use Sencha Touch 2 history and linking abilities with routers, but that requires me to essentially intercept all button taps so that I can update the url.
The back button in a navigation bar creates all kinds of nightmares as far as thats concerned, and I can supply code if someone thinks they have an alternate solution, but preventing the default back button behavior seems best (so as to play nice with browser back button)
If you want to handle back button you can use back event of navigation view which fired when the back button of the navigation view was tapped.. Refer to my previous answer on how to do it.
If you want to completely hide the back button just simply use:
Ext.select('.x-button-back').hide();
try this Ext.getCmp('navigationview's id').getNavigatorBar().hide()
I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!