Fix RNTester strict mode warnings (#48620)

Summary: Follow up from #48619. While investigating #22186, some false positives showed up as some of the examples also have non-strict mode compatible code. In this PR: Converting from class to functional components some `AnExApp` examples that were using `UNSAFE_` lifecycles. ## Changelog: [INTERNAL] - Fix RNTester strict mode warnings for AnExApp examples Pull Request resolved: #48620 Test Plan: - Wrapped the the entry app component in `RNTesterAppShared.js` with `StrictMode` and verified that no warnings are shown anymore for the updated components. - Checked the examples are still working as they were. Reviewed By: rshest Differential Revision: D68092958 Pulled By: cipolleschi fbshipit-source-id: 0f2cea3c679f8db0f13054e2851a73dc23a4c906
facebook · Jan 13, 2025 · cc4e4c7 · cc4e4c7
1 parent 2f22817
commit cc4e4c7
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 225 deletions.
diff --git 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<any, any> {
       </Animated.View>
     );
   }
-  _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
@@ -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
@@ -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<Object, any> {
   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
@@ -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
@@ -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<Object, any> {
-  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 (
-      <View style={styles.container}>
-        <Animated.View
-          style={[styles.header, {backgroundColor}]}
-          {...this.state.dismissResponder.panHandlers}>
-          <Text style={[styles.text, styles.headerText]}>{this.props.id}</Text>
-        </Animated.View>
-        {this.props.isActive && (
-          <View style={styles.stream}>
-            <View style={styles.card}>
-              <Text style={styles.text}>July 2nd</Text>
-              <AnExTilt isActive={this.props.isActive} />
-              <AnExBobble />
-            </View>
-            <AnExScroll panelWidth={panelWidth} />
-            <AnExChained />
-          </View>
-        )}
-      </View>
-    );
-  }
+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 (
+    <View style={styles.container}>
+      <Animated.View
+        style={[styles.header, {backgroundColor}]}
+        {...dismissResponder.panHandlers}>
+        <Text style={[styles.text, styles.headerText]}>{id}</Text>
+      </Animated.View>
+      {isActive && (
+        <View style={styles.stream}>
+          <View style={styles.card}>
+            <Text style={styles.text}>July 2nd</Text>
+            <AnExTilt isActive={isActive} />
+            <AnExBobble />
+          </View>
+          <AnExScroll panelWidth={panelWidth} />
+          <AnExChained />
+        </View>
+      )}
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {
@@ -144,4 +144,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = AnExSet;
+export default AnExSet;