Pushing React Native Outside the Comfort Zone

Transcript

2. Thanks to our sponsors!
3. ME Seriously Another talk?
4. (Future) Frontend Software engineer at @rgommezz
5. getDerivedStateFromProps() obtenerElEstadoDerivadoDeLasPropiedades() getSnapshotBeforeUpdate() obtenerLaInstantaneaAntesDeLaActualizacion()
6. PUSHING REACT NATIVE OUTSIDE THE COMFORT ZONE
7. PUSHING REACT SPANISH DEVELOPERS INSIDE THE COMFORT ZONE
8. BY CREATING A BABEL PLUGIN THAT TRANSLATES REACT API FROM SPANISH TO ENGLISH
9. Origin
12. • 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
13. The backbone
15. Approaches
16. NetInfo BackHandler AppState COMPONENTS APIs Native UI Component Native Module
17. Native Module
18. 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, };
19. 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(); }); } componentDidUpdate(prevProps: Props) { if (prevProps.isPlaying && !this.props.isPlaying) { MediaPlayer.pause(); } else if (!prevProps.isPlaying && this.props.isPlaying) { MediaPlayer.play(); } } render() { return null; } } };
20. Sending progress to JS
21. 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,
22. 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, });
23. 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
24. Score renderer
25. Can we render an SVG with an <Image/> component?
26. Can we render an SVG with an <Text/> component?
29. Can we render an SVG with <Another /> component?
30. <WebView source={{ uri: svgUri, }} />
31. <WebView source={{ uri: `https://svgwrapper.net/?url=${src}`, }} />
32. 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(); }
35. 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
36. Native UI Component
37. ScrollView
38. <Animated.ScrollView onScroll={Animated.event([ { nativeEvent: { contentOffset: { y: this.scrollY } } }, ], { useNativeDriver: true })} scrollEventThrottle={16} > const bigTitleOpacity = this.scrollY.interpolate({ inputRange: [0, 50], outputRange: [1, 0], extrapolate: 'clamp', });
39. The mental model
40. <ScrollView /> <Playback />
41. <Playback ref={(ref: any) => { this.playback = ref; }} playing={this.state.isPlaying} tracks={this.state.tracksComposition} onProgress={Animated.event( [ { nativeEvent: { progress: this.progress, }, }, ])} />
42. 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> );
43. Benefits Can we go even further? (x1, t1) (x2, t2) • Easy to follow the tempo • Optimally setting styles with Animated Views
44. Using native driver
45. <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, }, )} />
46. Player demo
47. Diving deeper into interpolations The power of interpolation
48. Seeking
50. Pan Responder? React-native-gesture-handler?
51. Playback Progress Animated.Value Score Position Red bar position Animated.event Animated.interpolate Animated.interpolate
52. Playback Progress Animated.Value Pan Responder Score Position Red bar position Animated.interpolate Animated.interpolate onPanResponderRelease this.playback.seekTo onPanResponderMove this.progress.setValue
53. Pan Responder lifecycle
54. Negotiation onStartShouldSetPanResponder: () => !this.props.isPlaying, onStartShouldSetPanResponderCapture: () => !this.props.isPlaying, onMoveShouldSetResponderCapture: () => !this.props.isPlaying, onMoveShouldSetPanResponderCapture: () => !this.props.isPlaying,
55. 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); },
56. Touch release onPanResponderRelease: (evt, gestureState) => { this.props.progress.stopAnimation(lastTimeStamp => { this.playback.seekTo(lastTimeStamp); }); },
57. Seeking demo
58. Time Progress Component
59. <View style={styles.absoluteBottom} > <PlayerProgress /> <PlayerSongDetails /> </View>
61. Android first
62. <View style={styles.absoluteBottom} > <PlayerSongDetails style={styles.absoluteBottom} /> <PlayerProgress style={styles.absoluteBottom} /> </View>
63. Performance demands
64. <PlayerProgress style={styles.absoluteBottom} progress={this.state.progress} duration={song.duration} onSlidingStart={this.handleSlidingStart} onSlidingComplete={this.handleSlidingComplete} />
65. Animated ad-hoc listeners
66. /** * 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; }); }
67. 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> ); }
68. Time progress demo
69. Spotify example
71. Seeking by sliding
72. <View style={styles.progressBar}> <Slider minimumValue={0} maximumValue={maxValue} step={1} value={value} onSlidingStart={this.handleSlidingStart} onValueChange={this.handleValueChange} onSlidingComplete={this.handleSlidingComplete} /> </View>
73. Slide start handleSlidingStart = (value: number) => { this.setState( { value, isSliding: true, }, ); };
74. Slide move handleValueChange = (value: number) => { this.setState({ value, }); };
75. Slide release handleSlidingComplete = (tStamp: number) => { // Convert to ms this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, isSliding: false, }); };
78. Slide release handleSlidingComplete = (tStamp: number) => { // Convert to ms this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, isSliding: false, }); };
79. JS Thread Native Thread this.playback.seekTo() seekTo() nSources times postFrameCallback() onSeekComplete() UIManagerModule .dispatchEvent(‘onProgress’, ts); <Playback onProgress={Animated.event(…)} /> this.props.progress.addListener(…)
80. Slide release handleSlidingComplete = (tStamp: number) => { this.playback.seekTo(tStamp * 1000); this.setState({ value: tStamp, }); this._timeout = setTimeout( () => { this.setState({ isSliding: false, }); }, 1500, ); };
81. Seeking by tapping
82. <View style={styles.progressBar}> <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 ?
83. Benefits • Updates isolated on leaf component • Updates via setState are happening 1 time per second. • Avoiding unnecessary re-renders on other parts of the screens
84. Progress bar seeking demo
85. Replay
86. this.playback.seekTo(0)
87. Takeaways
88. 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
89. Gracias! :) @rgommezz