As I wrote in the comments to Peter Theill's solution, the proposed solutions here do not work in 100% of the cases, e.g. for one of the following scenarios:
- You have a transparent Header where you want the content to scroll underneath (e.g. a blurred header).
You could solve this with Peter Theill's solution and replacing contentContainerStyle
with style={{paddingTop: headerHeight}}
.
But this won't help you if you have also the following typical scenario:
- You want to use RefreshControl. It will be displayed behind the header and there is no way to position it differently on iOS. Therefore, you need to use contentOffset & contentInset as Jamgreen proposed. However, I had kind of similar issues with initial rendering of offset. I solved it in my case with the prop
automaticallyAdjustContentInsets={false}
, so I would recommend to try this!
Here is the complete solution (for android & iOS) in my scenario:
<ScrollView
style={{paddingTop: Platform.select({android: headerHeight, ios: 0})}}
scrollIndicatorInsets={{ right: 1 }}
ref={scrollViewRef}
contentInset={{ top: headerHeight}}
contentOffset={{ x: 0, y: Platform.select({android: 0, ios: -headerHeight})}}
automaticallyAdjustContentInsets={false}
refreshControl={<RefreshControl
refreshing={refresh}
onRefresh={() => {
setRefresh(true);
setTimeout(() => setRefresh(false), 10000);
}}
colors={[inputPlaceholderGray]}
tintColor={inputPlaceholderGray}
progressViewOffset={headerHeight}
/>}
>
{CONTENT}
</ScrollView>
Hope it still helps people although the issue is already old.