Skip to content

Commit 2957b27

Browse files
slorberalvaromb
authored andcommitted
Support Animated.ScrollView with Animated.event() (#264)
Hi, Current implementation does not support passing a onScroll listener using `Animated.event()` listener, which is particularly useful when you want to implement a ScrollView with native driver parallax effects or things like that. I just discovered there's this "Animated.forkEvent" method which permit to add a listener to the existing user onScroll callback. It works with both original function and Animated.event(): https://github.com/facebook/react-native/blob/c6b96c0df789717d53ec520ad28ba0ae00db6ec2/Libraries/Animated/src/AnimatedImplementation.js#L477
1 parent 2eb1363 commit 2957b27

File tree

1 file changed

+4
-11
lines changed

1 file changed

+4
-11
lines changed

lib/KeyboardAwareHOC.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import ReactNative, {
77
Platform,
88
UIManager,
99
TextInput,
10-
findNodeHandle
10+
findNodeHandle,
11+
Animated
1112
} from 'react-native'
1213
import { isIphoneX } from 'react-native-iphone-x-helper'
1314

@@ -81,7 +82,6 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
8182
mountedComponent: boolean
8283
handleOnScroll: Function
8384
state: KeyboardAwareHOCState
84-
8585
static displayName = `KeyboardAware${getDisplayName(ScrollableComponent)}`
8686

8787
static propTypes = {
@@ -382,15 +382,8 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
382382
}
383383
}
384384

385-
_onScroll = (
386-
e: SyntheticEvent<*> & { nativeEvent: { contentOffset: number } }
387-
) => {
388-
this._handleOnScroll(e)
389-
this.props.onScroll && this.props.onScroll(e)
390-
}
391-
392385
render() {
393-
const { enableOnAndroid, contentContainerStyle } = this.props
386+
const { enableOnAndroid, contentContainerStyle, onScroll } = this.props
394387
let newContentContainerStyle
395388
if (Platform.OS === 'android' && enableOnAndroid) {
396389
newContentContainerStyle = [].concat(contentContainerStyle).concat({
@@ -419,7 +412,7 @@ function listenToKeyboardEvents(ScrollableComponent: React$Component) {
419412
scrollToFocusedInput={this.scrollToFocusedInput}
420413
resetKeyboardSpace={this._resetKeyboardSpace}
421414
handleOnScroll={this._handleOnScroll}
422-
onScroll={this._onScroll}
415+
onScroll={Animated.forkEvent(onScroll,this._handleOnScroll)}
423416
/>
424417
)
425418
}

0 commit comments

Comments
 (0)