Slide 2
Slide 2 text
• Handling touch in JS
• Native gesture recognizers
• Problems
• Solutions
Slide 3
Slide 3 text
TOUCHABLE
Slide 4
Slide 4 text
TOUCHABLE
console.log('!!')}/>
console.log('!!')}/>
console.log('!!')}/>
console.log('!!')}/>
Slide 5
Slide 5 text
TOUCHABLE
Slide 6
Slide 6 text
JS RESPONDER SYSTEM
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
JS Thread
UI Thread
Slide 7
Slide 7 text
JS RESPONDER SYSTEM
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
JS Thread
UI Thread
Slide 8
Slide 8 text
JS RESPONDER SYSTEM
onStartShouldSetResponder
onMoveShouldSetResponder
Become a responder
onResponderGrant
onResponderReject
onResponderMove
onResponderRelease
https://facebook.github.io/react-native/docs/gesture-responder-system.html
Slide 9
Slide 9 text
PAN RESPONDER
gestureState = {
dx,
dy,
vx,
vy,
...
}
Slide 10
Slide 10 text
SWITCH
Slide 11
Slide 11 text
ScrollView is your friend
Slide 12
Slide 12 text
COLLAPSABLE HEADERS
Slide 13
Slide 13 text
COLLAPSABLE HEADERS
const yOffset = new Animated.Value(0)
const translateY = yOffset.interpolate({
inputRange: [0, IMG_HEIGHT - NAVBAR_HEIGHT, IMG_HEIGHT],
outputRange: [0, 0, NAVBAR_HEIGHT],
})
Slide 14
Slide 14 text
COLLAPSABLE HEADERS
const yOffset = new Animated.Value(0)
const scale = yOffset.interpolate({
inputRange: [-IMG_HEIGHT, 0, 1],
outputRange: [2, 1, 1],
})
https://gist.github.com/kmagiera/883c991e613de681e137dd01a25ae58f
Slide 15
Slide 15 text
COLLAPSABLE HEADERS
const yOffset = new Animated.Value(0)
const scale = yOffset.interpolate({
inputRange: [-IMG_HEIGHT, 0, 1],
outputRange: [2, 1, 1],
})
const translateY = yOffset.interpolate({
inputRange: [-2, 0, IMG_HEIGHT - NAVBAR_HEIGHT, IMG_HEIGHT],
outputRange: [-1, 0, 0, NAVBAR_HEIGHT],
})
https://gist.github.com/kmagiera/883c991e613de681e137dd01a25ae58f
Slide 16
Slide 16 text
COLLAPSABLE HEADERS
const yOffset = new Animated.Value(0)
const scale = yOffset.interpolate({
inputRange: [-IMG_HEIGHT, 0, 1],
outputRange: [2, 1, 1],
})
const translateY = yOffset.interpolate({
inputRange: [-2, 0, IMG_HEIGHT - NAVBAR_HEIGHT, IMG_HEIGHT],
outputRange: [-1, 0, 0, NAVBAR_HEIGHT],
})
animatedHeaderStyles = {
transform: [{ translateY }, { scale }]
}
onScrollHandler = Animated.event(
[{ nativeEvent: { contentOffset: { y: yOffset } } }],
{ useNativeDriver: true }
)
...
Slide 17
Slide 17 text
INTERACTIVE DRAWER
Slide 18
Slide 18 text
INTERACTIVE DRAWER
Slide 19
Slide 19 text
INTERACTIVE DRAWER
Slide 20
Slide 20 text
INTERACTIVE DRAWER
Slide 21
Slide 21 text
INTERACTIVE DRAWER
Slide 22
Slide 22 text
INTERACTIVE DRAWER
https://gist.github.com/kmagiera/710460dac3ba722bb6a8d552c343b44a
Slide 23
Slide 23 text
Problems
Slide 24
Slide 24 text
SCROLL & BUTTON
Slide 25
Slide 25 text
GESTURE RECOGNITION
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
RECOGNIZED
!
Slide 26
Slide 26 text
GESTURE RECOGNITION
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
UI Thread JS Thread
Slide 27
Slide 27 text
GESTURE RECOGNITION
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
UI Thread JS Thread
! CANCEL
Slide 28
Slide 28 text
GESTURE RECOGNITION
TOUCH DOWN
TOUCH MOVE
TOUCH MOVE
TOUCH MOVE
TOUCH UP
UI Thread JS Thread
! !
Slide 29
Slide 29 text
Problem #1
Gesture recognition logic is distributed
between threads that run in parallel
Slide 30
Slide 30 text
VIEWS WITH NATIVE GESTURE RECOGNIZERS
https://gist.github.com/kmagiera/b888b5c71dccbba4e9a97cc12e7c0013
Slide 31
Slide 31 text
VIEWS WITH NATIVE GESTURE RECOGNIZERS
https://gist.github.com/kmagiera/ab1ca0831bb42aa6927e68a4e5ede7d0
Slide 32
Slide 32 text
Problem #2
Lack of an API that would allow for defining
interactions between native gesture recognizers
Slide 33
Slide 33 text
NATIVE DRIVER
onScrollHandler = Animated.event(
[{ nativeEvent: { contentOffset: { y: yOffset } } }],
{ useNativeDriver: true }
)
Slide 34
Slide 34 text
NATIVE DRIVER
onScrollHandler = Animated.event(
[{ nativeEvent: { contentOffset: { y: yOffset } } }],
// { useNativeDriver: true }
)
Slide 35
Slide 35 text
NATIVE DRIVER
UI Thread JS Thread
SCROLL
updateTranslation
updateScale
Slide 36
Slide 36 text
NATIVE DRIVER
const translateX = new Animated.Value(0)
const translateY = new Animated.Value(0)
const moveEvent = Animated.event(
[{}, { dx: translateX, dy: translateY }],
)
const animatedStyles = {
transform: [
{ translateX },
{ translateY },
]
}
const panResponder = PanResponder.create({
...
onPanResponderMove: moveEvent,
onPanResponderRelease: handlePanResponderEnd,
})
Slide 37
Slide 37 text
NATIVE DRIVER
const handlePanResponderEnd = (e, gestureState) => {
// Merge value and offset for each animated node and
// then store it under offset keeping value set
// to 0 and ready for next pan move events
translateX.flattenOffset()
translateX.extractOffset()
translateY.flattenOffset()
translateY.extractOffset()
}
![]()
Slide 38
Slide 38 text
NATIVE DRIVER
https://gist.github.com/kmagiera/a147d437236094c4b3818df6b8824fcb
Slide 39
Slide 39 text
Problem #3
Touch events recognized by JS responder system
cannot be connected with native animated nodes
Slide 40
Slide 40 text
INTERACTABLE
https://github.com/wix/react-native-interactable
• Supports pan gesture recognition in native
• Works with Animated Native Driver
• Provides very easy to use API for building spring-based interactions
Slide 41
Slide 41 text
GESTURE HANDLER
https://github.com/kmagiera/react-native-gesture-handler
Components States
UNDETERMINED
FAILED
BEGAN
CANCELLED
ACTIVE
END
Handlers
onHandlerStateChange
onGestureEvent
Animated Native
Driver Approved
Slide 42
Slide 42 text
GESTURE HANDLERS INTERACTION
DOWN, MOVE, MOVE, MOVE, UP
DOWN, MOVE, MOVE, MOVE, UP
Single Tap
Double Tap
!
Slide 43
Slide 43 text
GESTURE HANDLERS INTERACTION
DOWN, MOVE, MOVE, MOVE, UP
DOWN, MOVE, MOVE, MOVE, UP
Single Tap
Double Tap
!
DOWN, MOVE, MOVE, MOVE, MOVE, UP
!
Slide 44
Slide 44 text
GESTURE HANDLERS INTERACTION
DOWN, MOVE, MOVE, MOVE, UP
DOWN, MOVE, MOVE, MOVE, UP
Single Tap
Double Tap
!
DOWN, MOVE, MOVE, MOVE, MOVE, UP
!
Slide 45
Slide 45 text
GESTURE HANDLERS INTERACTION
shouldCancelWhenOutside
shouldCancelOthersWhenActivated
shouldBeRequiredByOthersToFail
hitSlop (works for native views such as ScrollView or Slider as well)
Slide 46
Slide 46 text
render() {
return (
)
}
GESTURE HANDLER
Slide 47
Slide 47 text
ENJOY