Nested scrollview?

LOCKED: General
1

I’m searching for a while for handling an animated header, facebook/twitter like, with a scrollview/flatlist etc
like

The main problem is that the best solution hide the refreshComponent down the header (absolute header with content container style on the flatlist). An other solution (that works ok in ios) ask to transform the view parent of the flatlist while you scroll. But on android this is pretty staggering, becouse you are scrolling and moving the flatlist on the same time.
An other more intelligent solution is to use nested scrollview.
something:

You can only scroll one scrollview at the time, so you have to enable/disable the scroll.
With some research i found a solution, but this is pretty buggy (you need to doubletouch the screen for making work the scroll. I think because of setState that is async)

2

hi! i don’t quite understand what the problem is here. maybe you want to use this? https://github.com/janicduplessis/react-native-scrollable-header

3

UPDATE: working solution
snack diffClamp header with visible refreshControll

Ohhh
This is what I missed:

<RefreshControl

refreshing={this.state.refreshing}

onRefresh={() => {

this.setState({ refreshing: true });

setTimeout(() => this.setState({ refreshing: false }), 1000);

}}

// Android offset for RefreshControl

progressViewOffset={HEADER_MAX_HEIGHT}

/>

}

// iOS offset for RefreshControl

contentInset={{

top: HEADER_MAX_HEIGHT,

}}

contentOffset={{

y: -HEADER_MAX_HEIGHT,

}}

>

I searched how to control the refresh component, without lucky! The medium article was totally different from the implementation! (used height, instead of transform, and I needed transform)

edit: In fact, without this 2 properties ( contentInset for IOS and progressViewOffset for Android), will be impossibile to see the refresh animation!

4

UPDATE: fixed with this code
working solution on both ios and android

I founded the bug on react native:
Offsetting RefreshControl on iOS via progressViewOffset (Closed without solution.)

The one that you linked work well if you just hide the header.

But, if you want to collapse it instead, you have to work with some hacks.

This one work: collapsible navbar, with a lot of code just to fix IOS bounce. But now it is not so easy to handle the contentOffset/Inset on IOS.

Any way to fix this?

https://snack.expo.io/B1mDLPrkX

1 Like
5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.