Pushing RN outside the comfort zone

Transcript

2. Frontend Software engineer at @rgommezz
3. Origin
4. • Score rendering and motion • Support for mixing different audio sources • Seeking by interacting with the screen • Seeking by interacting with the progress bar (Spotify) • TImer component • Replay button
5. Can we build this with React Native?
8. The backbone
10. Approaches
11. NetInfo BackHandler AppState COMPONENTS APIs Native UI Component Native Module
12. Native Module
13. class Playback extends React.Component<Props, void> { componentDidMount() { MediaPlayer.init({ src: this.props.src }).then(() => { if (this.props.isPlaying) { MediaPlayer.play(); } }); } import * as React from 'react'; import { NativeModules } from 'react-native'; const MediaPlayer = NativeModules.MediaPlayer; type Props = { isPlaying: boolean, src: string, };
14. class Playback extends React.Component<Props, void> { componentDidMount() { MediaPlayer.init({ src: this.props.src }) .then(() => { // Song loaded into memory if (this.props.isPlaying) MediaPlayer.play(); }); } componentWillReceiveProps(nextProps: Props) { if (this.props.isPlaying && !nextProps.isPlaying) { MediaPlayer.pause(); } else if (!this.props.isPlaying && nextProps.isPlaying) { MediaPlayer.play(); } } render() { return null; } } };
15. Sending progress to JS
16. import { View, Button, NativeModules, NativeEventEmitter, Platform, DeviceEventEmitter, Score, } from 'react-native'; import Playback from ‘./PlayerNative'; const { MediaPlayer } = NativeModules; const mediaPlayerTimeProgressEmitter = Platform.select({ ios: new NativeEventEmitter(MediaPlayer), android: DeviceEventEmitter, }); type State = { isPlaying: boolean, progress: number,
17. type State = { isPlaying: boolean, progress: number, }; class Player extends React.Component<void, State> { subscription: *; state: State = { isPlaying: false, progress: 0, // progress of the song in ms }; componentDidMount() { this.subscription = mediaPlayerTimeProgressEmitter.addListener( 'TimeProgress', progress => this.setState({ progress, const mediaPlayerTimeProgressEmitter = Platform.select({ ios: new NativeEventEmitter(MediaPlayer), android: DeviceEventEmitter, });
18. isPlaying: false, progress: 0, }; componentDidMount() { // We are re-rendering 60 times per second with the new progress this.subscription = mediaPlayerTimeProgressEmitter.addListener( 'TimeProgress', (progress: number) => this.setState({ progress, }), ); } componentWillUnmount() { this.subscription.remove(); } render() { const { isPlaying } = this.state; // Calculating the left margin based on the score width, // and total duration of the song const scoreLeftMargin = this.calculateLeftMargin();
19. Score renderer
22. <WebView source={{ uri: svgUri, }} />
23. <WebView source={{ uri: `https://svgwrapper.net/?url=${src}`, }} />
24. render() { const { isPlaying } = this.state; // Calculates the margin left based on the time progress, // width of the score and duration of the song const scoreLeftMargin = this.calculateLeftMargin(); return ( <View style={{ flex: 1 }}> <Score style={{ marginLeft: scoreLeftMargin }} /> <Playback src={'https://player/song.mp4'} isPlaying /> <Button title={isPlaying ? 'PAUSE' : 'PLAY'} onPress={() => this.setState({ isPlaying: !isPlaying, })} /> </View> ); } componentWillUnmount() { this.subscription.remove(); }
26. Drawbacks • No way to follow the tempo • 60 bridge passes per second: frames skipped • Styles not set optimally • Animations run on JS thread • Not easy to scale
27. Native UI Component
28. ScrollView
29. <Animated.ScrollView onScroll={Animated.event([ { nativeEvent: { contentOffset: { y: this.scrollY } } }, ])} scrollEventThrottle={16} > const bigTitleOpacity = this.scrollY.interpolate({ inputRange: [0, 50], outputRange: [1, 0], extrapolate: 'clamp', });
30. The mental model
31. <ScrollView /> <Playback />
32. <Playback ref={(ref: any) => { this.playback = ref; }} playing={this.state.isPlaying} tracks={this.state.tracksComposition} onProgress={Animated.event( [ { nativeEvent: { progress: this.state.progress, }, }, ])} />
33. return ( <View style={styles.container}> <Animated.View style={[ styles.container, { transform: [{ translateX: marginLeft }] }, ]} > <WebViewComponent source={{uri}} /> </Animated.View> <Animated.View style={[ styles.tempoBar, { transform: [{ translateX: barOffset }] }, ]} /> </View> );
34. Benefits Can we go even further? (x1, t1) (x2, t2) • Easy to follow the tempo • Optimally setting styles with Animated Views
35. Using native driver
36. <Playback ref={(ref: any) => { this.playback = ref; }} playing={this.state.isPlaying} tracks={this.state.tracksComposition} onProgress={Animated.event( [ { nativeEvent: { progress: this.state.progress, }, }, ], { useNativeDriver: true, }, )} />
37. Player demo
38. Diving deeper into interpolations The power of interpolation
39. Seeking
41. Pan Responder
42. Playback Progress Animated.Value Score Position Red bar position Animated.event Animated.interpolate Animated.interpolate
43. Playback Progress Animated.Value Pan Responder Score Position Red bar position Animated.interpolate Animated.interpolate onPanResponderRelease this.playback.seekTo onPanResponderMove this.progress.setValue
44. Pan Responder lifecycle
45. Negotiation onStartShouldSetPanResponder: () => !this.props.isPlaying, onStartShouldSetPanResponderCapture: () => !this.props.isPlaying, onMoveShouldSetResponderCapture: () => !this.props.isPlaying, onMoveShouldSetPanResponderCapture: () => !this.props.isPlaying,
46. Touch start onPanResponderGrant: () => { this.progressAccValue = this.props.progress.__getValue(); this.props.progress.setValue(this.progressAccValue); },
47. /** * Copyright (c) 2013-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @providesModule ReactGlobalSharedState */ 'use strict'; const { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, } = require('ReactNative'); module.exports = __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactGlobalSharedState;
48. Touch move onPanResponderMove: (evt, gestureState) => { // Setting the new animated value based on the accumulated // distance of the gesture since the touch started, dx. // Duration and score width are constants const nextValue = -(gestureState.dx / (this.state.width / this.props.duration)); this.props.progress.setValue(nextValue + this.progressAccValue); },
49. Touch release onPanResponderRelease: (evt, gestureState) => { this.props.progress.stopAnimation(lastTimeStamp => { this.playback.seekTo(lastTimeStamp); }); },
50. Seeking demo
51. Time Progress Component
52. <View style={styles.absoluteBottom} > <PlayerProgress /> <PlayerSongDetails /> </View>
54. Android first
55. <View style={styles.absoluteBottom} > <PlayerSongDetails style={styles.absoluteBottom} /> <PlayerProgress style={styles.absoluteBottom} /> </View>
56. Performance demands
57. <PlayerProgress style={styles.absoluteBottom} progress={this.state.progress} duration={song.duration} onSlidingStart={this.handleSlidingStart} onSlidingComplete={this.handleSlidingComplete} />
58. Animated ad-hoc listeners
59. /** * Controlling the progress bar from the player. * We'll update the local state 1 time per second * when the value is controlled by the playback */ componentDidMount() { let prevValue = 0; this._listenerId = this.props.progress.addListener((e: *) => { // Math.round() will always round down to the lesser integer const nextTimeInSeconds = Math.floor(e.value / 1000); if (!this.state.isSliding && prevValue !== nextTimeInSeconds) { this.setState({ value: nextTimeInSeconds }); } prevValue = nextTimeInSeconds; }); }
60. render() { const { duration, style } = this.props; const { value } = this.state; const maxValue = Math.round(duration / 1000); return ( <View style={[styles.progressContainer, style]}> <Slider minimumValue={0} maximumValue={maxValue} step={1} value={value} /> <Timer duration={duration} value={value} /> </View> ); }
61. Time progress demo
62. Spotify example
64. Seeking by sliding
65. <View style={styles.progressBar}> <Slider minimumValue={0} maximumValue={maxValue} step={1} value={value} onSlidingStart={this.handleSlidingStart} onValueChange={this.handleValueChange} onSlidingComplete={this.handleSlidingComplete} /> </View>
66. Slide start handleSlidingStart = (value: number) => { this.setState( { value, isSliding: true, }, ); };
67. Slide move handleValueChange = (value: number) => { this.setState({ value, }); };
68. Slide release handleSlidingComplete = (tStamp: number) => { // Convert to ms this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, isSliding: false, }); };
70. Slide release handleSlidingComplete = (tStamp: number) => { // Convert to ms this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, isSliding: false, }); };
71. JS Thread Native Thread this.playback.seekTo() seekTo() nSources times postFrameCallback() onSeekComplete() UIManagerModule .dispatchEvent(‘onProgress’, ts); <Playback onProgress={Animated.event(…)} /> this.props.progress.addListener(…)
72. Slide release handleSlidingComplete = (tStamp: number) => { this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, }); this._timeout = setTimeout( () => { this.setState({ isSliding: false, }); }, 1500, ); };
73. Seeking by tapping
74. <View style={styles.progressBar} onLayout={this.handleLayout}> <TouchableWithoutFeedback onPressIn={this.tapSliderHandler} > <Slider minimumValue={0} maximumValue={maxValue} step={1} value={value} onValueChange={this.handleValueChange} onSlidingStart={this.handleSlidingStart} onSlidingComplete={this.handleSlidingComplete} /> </TouchableWithoutFeedback> </View> width xTap = duration ?
75. Benefits • Updates isolated on leaf component • Avoiding unnecessary re-renders on other parts of the screens
76. Progress bar seeking demo
77. Replay
78. this.playback.seekTo(0)
79. Takeaways
80. Takeaways • Is React Native ready for the challenge? YES! • Native Modules and Native UI Components are the game changers • Keep the ScrollView in mind as a reference model: Practical hacks for delightful interactions • Think. Research. Plan. Write. Validate. Fail. Modify
81. Thank you :)