From 46a7d6491e5f8697dd3e47230be40904a68b7a58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateo=20Guzm=C3=A1n?= Date: Wed, 8 Jan 2025 14:07:55 +0100 Subject: [PATCH] (2/2) Fix RNTester strict mode warnings --- .../examples/AnimatedGratuitousApp/AnExApp.js | 10 +- .../AnimatedGratuitousApp/AnExBobble.js | 6 +- .../AnimatedGratuitousApp/AnExChained.js | 6 +- .../AnimatedGratuitousApp/AnExScroll.js | 8 +- .../examples/AnimatedGratuitousApp/AnExSet.js | 178 ++++++------- .../AnimatedGratuitousApp/AnExTilt.js | 236 +++++++++--------- 6 files changed, 219 insertions(+), 225 deletions(-) diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js index 217e16474137c7..c8bcda965fd296 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js @@ -10,15 +10,15 @@ 'use strict'; -const AnExSet = require('./AnExSet'); -const React = require('react'); -const { +import AnExSet from './AnExSet'; +import React from 'react'; +import { Animated, LayoutAnimation, PanResponder, StyleSheet, View, -} = require('react-native'); +} from 'react-native'; const CIRCLE_SIZE = 80; const CIRCLE_MARGIN = 18; @@ -188,7 +188,7 @@ class Circle extends React.Component { ); } - _toggleIsActive = (velocity: void) => { + _toggleIsActive = (velocity: ?number) => { const config = {tension: 30, friction: 7}; if (this.state.isActive) { Animated.spring(this.props.openVal, { diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js index 0a53c6d03b444b..4ffcab2a5734be 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js @@ -10,8 +10,8 @@ 'use strict'; -const React = require('react'); -const {Animated, PanResponder, StyleSheet, View} = require('react-native'); +import React from 'react'; +import {Animated, PanResponder, StyleSheet, View} from 'react-native'; const NUM_BOBBLES = 5; const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2); @@ -169,4 +169,4 @@ const BOBBLE_IMGS = [ 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851562_575284782557566_1188781517_n.png', ]; -module.exports = AnExBobble; +export default AnExBobble; diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js index b19508ec7b821b..079e8da1506343 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js @@ -13,8 +13,8 @@ import type {GestureState} from 'react-native/Libraries/Interaction/PanResponder'; import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes'; -const React = require('react'); -const {Animated, PanResponder, StyleSheet, View} = require('react-native'); +import React from 'react'; +import {Animated, PanResponder, StyleSheet, View} from 'react-native'; class AnExChained extends React.Component { constructor(props: Object) { @@ -119,4 +119,4 @@ const CHAIN_IMGS = [ require('../../assets/bunny.png'), ]; -module.exports = AnExChained; +export default AnExChained; diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js index 8907b48e49bb46..6d6a1cf30f8acf 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js @@ -10,15 +10,15 @@ 'use strict'; -const React = require('react'); -const { +import React from 'react'; +import { Animated, Image, ScrollView, StyleSheet, Text, View, -} = require('react-native'); +} from 'react-native'; class AnExScroll extends React.Component<$FlowFixMeProps, any> { state: any = {scrollX: new Animated.Value(0)}; @@ -118,4 +118,4 @@ const BUNNY_PIC = { uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png', }; -module.exports = AnExScroll; +export default AnExScroll; diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js index ea5b75df38bc3c..a9c2f209bdf774 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js @@ -10,100 +10,100 @@ 'use strict'; -const AnExBobble = require('./AnExBobble'); -const AnExChained = require('./AnExChained'); -const AnExScroll = require('./AnExScroll'); -const AnExTilt = require('./AnExTilt'); -const React = require('react'); -const { - Animated, - PanResponder, - StyleSheet, - Text, - View, -} = require('react-native'); +import AnExBobble from './AnExBobble'; +import AnExChained from './AnExChained'; +import AnExScroll from './AnExScroll'; +import AnExTilt from './AnExTilt'; +import React, {useRef, useState} from 'react'; +import {Animated, PanResponder, StyleSheet, Text, View} from 'react-native'; -class AnExSet extends React.Component { - constructor(props: Object) { - super(props); - function randColor() { - const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100)); - return 'rgb(' + colors.join(',') + ')'; - } - this.state = { - closeColor: randColor(), - openColor: randColor(), - }; - } - render(): React.Node { - const backgroundColor = this.props.openVal - ? this.props.openVal.interpolate({ - inputRange: [0, 1], - outputRange: [ - this.state.closeColor, // interpolates color strings - this.state.openColor, - ], - }) - : this.state.closeColor; - const panelWidth = - (this.props.containerLayout && this.props.containerLayout.width) || 320; - return ( - - - {this.props.id} - - {this.props.isActive && ( - - - July 2nd - - - - - - - )} - - ); - } +const randColor = () => { + const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100)); + return `rgb(${colors.join(',')})`; +}; + +type AnExSetProps = $ReadOnly<{| + openVal: Animated.Value, + containerLayout: {width: number, height: number}, + id: string, + isActive: boolean, + onDismiss: (velocity: number) => void, +|}>; - UNSAFE_componentWillMount() { - this.state.dismissY = new Animated.Value(0); - this.state.dismissResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => this.props.isActive, - onPanResponderGrant: () => { - Animated.spring(this.props.openVal, { - // Animated value passed in. - toValue: this.state.dismissY.interpolate({ - // Track dismiss gesture - inputRange: [0, 300], // and interpolate pixel distance - outputRange: [1, 0], // to a fraction. - }), +const AnExSet = ({ + openVal, + containerLayout, + id, + isActive, + onDismiss, +}: AnExSetProps): React.Node => { + const [closeColor] = useState(randColor()); + const [openColor] = useState(randColor()); + const dismissY = useRef(new Animated.Value(0)).current; + const dismissResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => isActive, + onPanResponderGrant: () => { + Animated.spring(openVal, { + // Animated value passed in. + toValue: dismissY.interpolate({ + // Track dismiss gesture + inputRange: [0, 300], // and interpolate pixel distance + outputRange: [1, 0], // to a fraction. + }), + useNativeDriver: false, + }).start(); + }, + onPanResponderMove: Animated.event( + [null, {dy: dismissY}], // track pan gesture + {useNativeDriver: false}, + ), + onPanResponderRelease: (e, gestureState) => { + if (gestureState.dy > 100) { + onDismiss(gestureState.vy); // delegates dismiss action to parent + } else { + Animated.spring(openVal, { + // animate back open if released early + toValue: 1, useNativeDriver: false, }).start(); - }, - onPanResponderMove: Animated.event( - [null, {dy: this.state.dismissY}], // track pan gesture - {useNativeDriver: false}, - ), - onPanResponderRelease: (e, gestureState) => { - if (gestureState.dy > 100) { - this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent - } else { - Animated.spring(this.props.openVal, { - // animate back open if released early - toValue: 1, + } + }, + }); + + const backgroundColor = openVal + ? openVal.interpolate({ + inputRange: [0, 1], + outputRange: [ + closeColor, // interpolates color strings + openColor, + ], + }) + : closeColor; - useNativeDriver: false, - }).start(); - } - }, - }); - } -} + const panelWidth = (containerLayout && containerLayout.width) || 320; + + return ( + + + {id} + + {isActive && ( + + + July 2nd + + + + + + + )} + + ); +}; const styles = StyleSheet.create({ container: { @@ -144,4 +144,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = AnExSet; +export default AnExSet; diff --git a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js index 3e9b54a338d7c8..9e35b96fe13241 100644 --- a/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js +++ b/packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExTilt.js @@ -10,77 +10,73 @@ 'use strict'; -const React = require('react'); -const {Animated, PanResponder, StyleSheet} = require('react-native'); - -class AnExTilt extends React.Component { - constructor(props: Object) { - super(props); - this.state = { - panX: new Animated.Value(0), - opacity: new Animated.Value(1), - burns: new Animated.Value(1.15), - }; - // $FlowFixMe[prop-missing] - this.state.tiltPanResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderGrant: () => { - Animated.timing(this.state.opacity, { - toValue: this.state.panX.interpolate({ - inputRange: [-300, 0, 300], // pan is in pixels - outputRange: [0, 1, 0], // goes to zero at both edges - }), - - // direct tracking - duration: 0, - - useNativeDriver: false, - }).start(); - }, - onPanResponderMove: Animated.event( - [null, {dx: this.state.panX}], // panX is linked to the gesture - {useNativeDriver: false}, - ), - onPanResponderRelease: (e, gestureState) => { - let toValue = 0; - if (gestureState.dx > 100) { - toValue = 500; - } else if (gestureState.dx < -100) { - toValue = -500; +import React, {useCallback, useEffect, useRef} from 'react'; +import {Animated, PanResponder, StyleSheet} from 'react-native'; + +const AnExTilt = (): React.Node => { + const panX = useRef(new Animated.Value(0)).current; + const opacity = useRef(new Animated.Value(1)).current; + const burns = useRef(new Animated.Value(1.15)).current; + + const tiltPanResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onPanResponderGrant: () => { + Animated.timing(opacity, { + toValue: panX.interpolate({ + inputRange: [-300, 0, 300], // pan is in pixels + outputRange: [0, 1, 0], // goes to zero at both edges + }), + + // direct tracking + duration: 0, + + useNativeDriver: false, + }).start(); + }, + onPanResponderMove: Animated.event( + [null, {dx: panX}], // panX is linked to the gesture + {useNativeDriver: false}, + ), + onPanResponderRelease: (e, gestureState) => { + let toValue = 0; + if (gestureState.dx > 100) { + toValue = 500; + } else if (gestureState.dx < -100) { + toValue = -500; + } + Animated.spring(panX, { + // animate back to center or off screen + toValue, + + // maintain gesture velocity + velocity: gestureState.vx, + + tension: 10, + friction: 3, + useNativeDriver: false, + }).start(); + + panX.removeAllListeners(); + const id: any = panX.addListener(({value}) => { + // listen until offscreen + if (Math.abs(value) > 400) { + panX.removeListener(id); // offscreen, so stop listening + Animated.timing(opacity, { + // Fade back in. This unlinks it from tracking panX + toValue: 1, + + useNativeDriver: false, + }).start(); + panX.setValue(0); // Note: stops the spring animation + toValue !== 0 && startBurnsZoom(); } - Animated.spring(this.state.panX, { - // animate back to center or off screen - toValue, - - // maintain gesture velocity - velocity: gestureState.vx, - - tension: 10, - friction: 3, - useNativeDriver: false, - }).start(); - this.state.panX.removeAllListeners(); - const id: any = this.state.panX.addListener(({value}) => { - // listen until offscreen - if (Math.abs(value) > 400) { - this.state.panX.removeListener(id); // offscreen, so stop listening - Animated.timing(this.state.opacity, { - // Fade back in. This unlinks it from tracking this.state.panX - toValue: 1, - - useNativeDriver: false, - }).start(); - this.state.panX.setValue(0); // Note: stops the spring animation - toValue !== 0 && this._startBurnsZoom(); - } - }); - }, - }); - } - - _startBurnsZoom() { - this.state.burns.setValue(1); // reset to beginning - Animated.decay(this.state.burns, { + }); + }, + }); + + const startBurnsZoom = useCallback(() => { + burns.setValue(1); // reset to beginning + Animated.decay(burns, { // subtle zoom velocity: 1, @@ -89,56 +85,54 @@ class AnExTilt extends React.Component { useNativeDriver: false, }).start(); - } - - UNSAFE_componentWillMount() { - this._startBurnsZoom(); - } - - render(): React.Node { - return ( - - - - ); - } -} + }, [burns]); + + useEffect(() => { + startBurnsZoom(); + }, [startBurnsZoom]); + + return ( + + + + ); +}; const styles = StyleSheet.create({ tilt: { @@ -152,4 +146,4 @@ const styles = StyleSheet.create({ }, }); -module.exports = AnExTilt; +export default AnExTilt;