Can we have sticky headers inside the modal?

[Ragularuban]

Is there a possibility to add sticky headers to the content inside modal?

<Scrollview stickyHeader={[0,1]}>
... Content
</Scrollview>

PS:

1. The absolute property of header and footer component is not clear

[jeremybarbet]

Are you thinking about something like this https://facebook.github.io/react-native/docs/sectionlist#stickysectionheadersenabled?

Maybe the absolute property for the header/footer is not specific enough. But in short, isAbsolute makes the header either on top of the scrollview or not.

Do you think about something better?

[Ragularuban]

@jeremybarbet that implementation also works fine.
A simple implementation would be https://facebook.github.io/react-native/docs/scrollview#stickyheaderindices

[Ragularuban]

Maybe the absolute property for the header/footer is not specific enough. But in short, isAbsolute makes the header either on top of the scrollview or not.

I figured it later on. I believe the documentation could state that we must add custom stylings to make it work.

[jeremybarbet]

I have to take a look for the stickyHeaderIndices, but I don't see a reason it wouldn't work.

Yes, you are right, this is confusing. I should say "if you use position absolute on your header component then you have to pass isAbsolute: true". I wanted and still, want to do it automatically, but I haven't found a way to check the header style object to see if the position property is passed or not. Any ideas are welcome!

[Ragularuban]

I guess you could use

let style =  element.props.style;
style = StyleSheet.flatten(style);
if(style.position == 'absolute'){
 ...
}

I have not tested this though.

[jeremybarbet]

Yes this is what I wanted to do, but I couldn't make it work. I'll try to find a way to remove this isAbsolute props, very not ideal

[jeremybarbet]

@Ragularuban Alright, I don't know what I tried last time, but the element.props.style works fine, the isAbsolute props will be remove in the next release 👍

[jeremybarbet]

You can now pass a scrollview/flatlist/sectionlist https://jeremybarbet.github.io/react-native-modalize/#/PROPSMETHODS?id=sectionlistprops

It will be available in next release