Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Passing touch events through ScrollView

Tags:

react-native

I am trying to implement a UI where there is a full-page <ScrollView /> with a <View /> positioned absolutely underneath it. The <ScrollView /> has padding at the top, so initially the <View /> is visible and then the <ScrollView /> scrolls up to cover it. The issue, of course, is that the <View /> does not receive touches, as they're being eaten up by the <ScrollView /> responder.

Is there any way right now to implement or subclass <View /> such that you can pass events through to underlying elements?

like image 338
Mike Avatar asked Nov 06 '15 00:11

Mike


People also ask

How to scroll to the bottom of a ScrollView?

Methods # 1 flashScrollIndicators () #. Displays the scroll indicators momentarily. 2 scrollTo () #. Scrolls to a given x, y offset, either immediately, with a smooth animation. ... 3 scrollToEnd () #. If this is a vertical ScrollView scrolls to the bottom. ... 4 scrollWithoutAnimationTo () #. Deprecated, use scrollTo instead.

What is the purpose of the Scroll View?

When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump.

What does the ScrollView lock when dragging?

When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is.

When does the Scroll View stop on the next index?

When true, the scroll view stops on the next index (in relation to scroll position at release) regardless of how fast the gesture is. This can be used for pagination when the page is less than the width of the horizontal ScrollView or the height of the vertical ScrollView.


1 Answers

You should use an Animated.View that accepts ScrollView's y offset as an Animated.Value prop. Then, you can use that value to perform animations while scrolling the ScrollView. The scroll will catch the pan animation and pass it through props to whoever needs it.

One of the best code-samples you'll find for this is Facebook's F8 app. Precisely, this file: https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/common/ListContainer.js. In that file, ParallaxBackground gets the offset Animated.Value that comes from the ListView children.

like image 180
amb Avatar answered Oct 07 '22 14:10

amb