Extra header that scrolls immediately with page content

[alexpchin]

Is it currently possible in the library to have a variable height for the collapsable header?

BIGGER PICTURE: What I'm trying to achieve is essentially an instagram profile layout with a header at the top of the page containing the user's information and then a set of tabs which contain FlatLists of a users' uploaded images WITH an infinite scroll...

(Just random image off the internet)

There is an issue with having a FlatList inside a ScrollView: react/react-native#22008

I've tried several approaches but now what I'm thinking is to have a createMaterialTopTabNavigator with the FlatLists in their separate screens. Then when you scroll on either screen, the header at the top scrolls up...

PROBLEM 1. - The height of the user details at the top may be variable based? This is because if you are looking at your own profile or the profile of someone else, then the height may change. (One solution would be of course to redesign so that they are not... But I'm not looking for that at the moment).

PROBLEM 2. - I'd like to pull to refresh on the whole page and reload the data inside the top panel AND the data inside the Animated.FlatList.

I appreciate that this seems like a lot of issues in one - but I think a lot of people will be wanting this same solution.

[alexpchin]

I am also trying to avoid content folding underneath the header? So the header should move immediately as the FlatList moves... I'll have a look at the source and see if I can update your example?

[alexpchin]

FYI, this is how much needs to scroll before the header starts to disappear. I can understand that you use the code:

const getSafeBounceHeight = () =>
  _safeBounceHeight != null
    ? _safeBounceHeight
    : Platform.select({ ios: 300, android: 100, web: 200 });

To set a safe bounce height of 300 for the animation... The logic makes sense for a top header but not for the extra header example?

[benevbright]

Hi, I'm very sorry for such a late response.....
Those that you suggested or reported the problems are great.

• accept component's own layout
• pull to refresh whole page
• find better solution than safeBounceHeight

I really wish if we had solution for those. (PR is always welcome)
And I agree that they are very important issues.

To set a safe bounce height of 300 for the animation... The logic makes sense for a top header but not for the extra header example?

I did't quite get what you meant. safeBounceHeight is necessary for iOS's side-effect of scrollview bounce behavior. You can set it as 0 for Android.

function setSafeBounceHeight (height)

[kartikpr]

Any updates on this ?