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.
Related
TL;DR version : Regarding navigation, how does one handle having the same screen in multiple different navigators ?
Long version :
I have a quite complex app made in React Native app, using React Navigation (social network type), with multiple nested navigators, depending on what the user is doing (registering, login, loading, using the app). The app basicaly allows you to share your experience in various places (who you are with, what you're drinking, etc). Those places have a dedicated profile screen that you can access.
When logged in, I have a bottom tab navigator that leads to the four main sections of the app : feed, post new content, search, user profile.
Each of those sections have a specific stack navigator.
My issue is that some screens can be accessed in multiples sections. I'll take a specific example but it applies to many screens. So, the "Place profile" screen can be accessed through the feed when you click on the place name, from the
search, when you search places, or from the user profile (because we list the user posts, and those posts can have a place mentionned).
I first tried to say that it belongs to the feed navigator and everytime a place is clicked, we move back to the feed tab and to the place screen. It works fine until I click on the "related places" link that opens the map in the search section. The back button (that use navigation.goBack()) goes back in the search stack instead of the global navigation history.
I then tried to add every potential screens to every needing section navigators. Back button is working fine, but I'm having navigation issues now when trying to go to a screen that belongs only to a specific navigator. For those, I then specified the "owner" of it (using navigation.navigate("Foo", { screen: "Bar", params: { baz: buz }})), but I'm having weird navigations results where the navigator state is preserved between tab navigations, despite using unmountOnBlur. Also, that solution is ugly as hell with typescript.
I thought of doing a generic screen version, that would be hosted by a specific parent screen that would handle the navigation. But I'm then required to inject so many things from that parent screen (I need the navigation object in almost every component) which also leads to another typescript hell.
Also, almost every screen and complex component is a class component and not a functionnal one. No debate on the topic, it is as it is and can't be changed, so useNavigation() is out of the realm of possibilites right now (even with a HOC).
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
Im trying to build a mobile app where we have a constant header bar throughout the app. I have the body where I have buttons.. Each button navigates to a screen. I need the header bar in every screen but I dont wish to repeat the code in all screens. I dont intend to use TabNavigator either. Is there any alternative??
in image1 and image 2 the bar with the search,cart and offerzone tag remains same. The rest changes..I need this behaviour without repeating the header code in both screens.
You can separate the code of headerBar into a independent component, and use redux store to manage this component's props.
After you do this, you just need to import the component in each screen, the component will get its props from redux store automatically. Each screen can contact headerBar with redux actions
i am troubling using of NavigatorIOS in react native,
<NavigatorIOS
style={styles.navigator}
initialRoute={{
title:'xxx',
component:xxx
}}
navigationBarHidden={true} />
here component xxx is my starting file here i don’t want navigator,after this i am using login screen there also i don’t want navigator after completion of the these screens,I need a navigator in my screen.
for hiding i used above code but to show it in child screen i wrote like this but not showing
this.props.navigator.push({
component:xxxx
title:’xxxx’,
navigationBarHidden:false
})
any help much appreciated
There are a lot of issues when using NavigatorIos. You have 2 options:
Dump NavigatorIos and move to Navigator. I was in the same scenario as you. I was using NavigatorIos and I wanted to completely replace the scene. It was a known issue and since Facebook stopped developing it and moved completely to Navigator, I was pretty much forced to make the change.
Here is more info: Navigator comparison
You can use a custom navigator like this one by Kureev. However, you should take into consideration that the way he implemented it, the navigator bar is part of your view, so when you move to a new scene, the whole page shifts, including your navigator.
I tried both option #1 and #2, and ultimately went with #1 and never looked back. It feels much more native and there is growing support for it.
Hope that helps.
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!