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.
Related
I am thinking of using Bottom Tab Bar or a Bottom Sheet, but I am unable to make it visible on all screens of my Stack Navigator.
Any idea or suggestion will be hugely appreciated.
You probably need to use redux, and modal from react-native and wrap your component to the root.
if you use component in the root then you can use it anywhere with the help of redux.
I have looked through all the documentation and github issues and I can't find anything that answers this question. I want the set react-navigation header (which I set to a component with headerTitle: <Header /> to scroll with the page, I don't want it to be static at the top of the page. Is this possible in react-navigation for react native?
I have tried making the header=null and then manually adding the header to each page in my stack, but then the header re-renders with every new page in the stack.
As far as I know, React-navigation works with static headers. The actual view for the app in this case starts after the header and continues until a tab navigator if you have one.
If you want that scroll header in just a screen or two, it will be better to do it yourself actually. It will be easier and will take less time. However if you want it for the whole app I think it would be better to reconsider that and try to modify the native_modules react navigation package which I do not recommend
Yes you can set headerMode: screen in your stack. I hope this helps you.
I would like to realise an infinite stack with react navigation, that means I would need a dynamic stacknavigator where I can push in a unlimited number of screens (a maximum of 20 screens would be enough). You can imagine this like in the amazon app where you can click on a related product in the product details and it shows you another product details screen where you can do the same thing.
Does anyone of you has an idea how to do that ?
This can be done with react-navigation
Instead of using this.props.navigation.navigate('ScreenName') you can use this.props.navigation.push('ScreenName')
You would probably want to pass some sort of description to the screen so that it knows what to render you can do that by passing params
this.props.navigation.push('ScreenName', { key: productId })
You would just have to set up a few template screens that could then be populated by the parameters that you pass to them.
You can see more about the different functions that react-navigation has here
https://reactnavigation.org/docs/en/navigation-prop.html#navigator-dependent-functions
Here is a snack showing it working https://snack.expo.io/#andypandy/infinite-navigation
In the snack I pass a position and date, you can see these update as each screen is pushed onto the stack. Pressing Go Back goes back one place on the stack.
I'm working on a RN application which has share and comment features. In Facebook, modals are used to display the comment and share screen contents. In my application I have used seperate screens hence it is bit slower. What is be the better approach to use here?
Always try to use SCREEN with navigator. Think about your form modal screen in overall. May be it more similar on 'screen' then you thought before))
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.