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
Related
I have a flatlist with two components on top of it that need to scroll the flatlist. The obvious fix is to make a header component which includes both components. The problem is i only want the second component to be sticky. I can make both headers sticky with
stickyHeaderIndices={[0]}
however since both components are wrapped to make them the header i cant use stickyHeaderIndices to make it sticky.
I'm trying to make whole screen scrollable. So I need to make the area marked with red ListHeaderComponent and style the actual content area (add a bacgroundColor and shadow to it).
columnWrapperStyle is exactly what I need to use to accomplish the task. But it only works if numColums > 1.
Separating FlatList and Header, and wrapping them into a ScrollView is another option but VirtualizedLists should never be nested inside plain ScrollViews with the same orientation.
There are props to style Header and Footer but there is no way to style only the actual content.
So, How can I style only the content area?
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've been able to render the Sectionlist in React Native with horizontal={true}, but when I have two problems with the section header.
The header appears as a part of the list, and not above it.
Even with stickySectionHeadersEnabled={true}, the header does not stick and scrolls along with the list.
Expected
How it actually appears
horizontal is a prop of ScrollView. Setting horizontal={true} will render every child component of a ScrollView to be horizontally rendered, be it the header or footer or empty component. If you need a layout as what you have drawn under "Expected", you have to make separate View for that.
It makes sense to make everything horizontally in-line, if you are setting horizontal to true. If a SectionList is rendered horizontal, its sections should come up horizontally. If you don't give section headers in between two sections, how will user differentiate between two sections? If you want to have a section header to start at the top of a new section, that's specific to you and you may have to write your own implementation of that.
That's behaving as intended. horizontal={true} means headers will also be rendered horizontally.
If you want headers to be above the items, you could likely hack it by setting the width of the section header to 0, and place a horizontal header within that element, positioned at the very top, so it overlays over the next element.
According to the ListView documentation, the stickySectionHeadersEnabled prop is not supported when horizontal is set to true. While it doesn't currently say this on the SectionList documentation, I assume it's also true for SectionList.
stickyHeaderIndices
(...) This property is not supported in conjunction with horizontal={true}.
I was testing out the Navigator component and I was trying to use its navigationBar property. I want it to appear on top of the "content" instead of below it, the only way I found to do that is by using position absolute, but that way I need to set the top of the "content" as well (requiring me to make a fixed height navigationBar plus unnecessary boilerplate code). Is there any other way to do this?