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.
Related
I am using react-navigation with custom header for all the screens. I am trying to design the app in such a way that the small top portion of the content view should overlay on top of the custom header.
I am using options={{header: props => <CustomerHeader {...props} />}} way of defining custom header for all the screens. I don't want to use the header as a content for the screens though.
I tried using position absolute on the content but the content is always placed behind the header. Is there any way to place the content in top of the header?
Here's a snack with a minimal demo:
https://snack.expo.io/#tushark/absolute-header
probably a bad design, but here's an idea.
https://snack.expo.io/#yoobit0616/absolute-header
I have a StackNavigator, and I have a screen for creating new content on my app. Once the content is created I push to the screen for the content. At this point I can still create new content from that screen, so it's possible to push a new create content screen. But if the user does a GO_BACK, or swipes i.e. POPs back, I want them to skip the previous create content screen.
I think it's fairly common behaviour where you want to selectively skip screens on the way back. I've looked at the docs to try and figure this out. The easiest looking fix was the auth-flow. That skips the screen going back, but it also stops you pushing the screen if you take it out of the navigator.
The current best approach I have is to use a custom stack router, and in getStateForAction remove the create content screen from the routes whenever the user is pushing away from it. The downside on this is that there's a janky animation on iOS pushes from the create content screen, as the create content screen is sliding out it's also sliding up (I guess because it's being removed).
Is there a recommended best way to do this?
On the previous create screen use navigation.replace("ScreenName", {params})
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.
I have this use case which is a bit confusing compared to the norm , and Im not sure how to structure it. I have a screen (tabs) with 4 tabs .
The thing is that the contents of each tab (their screens) are actually in One big page, when scrolling down the page and it reaches the contents of Tab2 , the tab should change too to Tab2 (its not actually a screen change) .
Now initially I have used react-navigation and it's tab navigator. But here Im not sure if this should use tab navigator. The questions that arise to me (from the top of my head):
Q1) If we wrap the components (each tab's screen) in a parent one. How do we go about detecting where the scroll reached! (or something that notifies we are viewing contents of tab2 and so on...)
Q2) How can I handle the animation of the tabs (especially the line under them as shown in the image) to transition back and forth?
Q3) Is there a better way to do this! (better than my initial thoughts above)
Q1. You must use the TabNavigator to avoid the problem as you asking in Q1. So you don't need to worry about the Scroll.
Q2. I recommend using StyleSheet, create a CSS style for line bar then maybe you just need to call a function to set the CSS of current tab or use the navigation options.
Q3. TabNavigator is a good option here and it belongs to react-navigation.
TabNavigator
Animation example with custom function
--- Update ------
I have created an example project for you to solve the problem, I'm not sure if you're doing the same.
Check the Scroll.js, I added a function Callme that changes tabs when scroll reaches to end.
To detect the Scroll reaches to end or not, I have used the isCloseToBottom from another StackOverflow answer.
Follow the following link to Github project.
Change-Tabs-When-Scroll-End
Thanks
_Pradeep
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.