RN: Resolve Outstanding ESLint Warnings

Summary:
Resolves outstanding ESLint warnings in React Native.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D32291912

fbshipit-source-id: 61337d5a5a0e6ed55f732675e029f4b76d850af9

IntegrationTests/AppEventsTest.js

@@ -38,6 +38,7 @@ class AppEventsTest extends React.Component<{...}, State> {
     NativeAppEventEmitter.addListener('testEvent', this.receiveEvent);
     const event = {data: TEST_PAYLOAD, ts: Date.now()};
     TestModule.sendAppEvent('testEvent', event);
+    // eslint-disable-next-line react/no-did-mount-set-state
     this.setState({sent: event});
   }
 

Libraries/Animated/AnimatedImplementation.js

@@ -18,7 +18,6 @@ const AnimatedInterpolation = require('./nodes/AnimatedInterpolation');
 const AnimatedModulo = require('./nodes/AnimatedModulo');
 const AnimatedMultiplication = require('./nodes/AnimatedMultiplication');
 const AnimatedNode = require('./nodes/AnimatedNode');
-const AnimatedProps = require('./nodes/AnimatedProps');
 const AnimatedSubtraction = require('./nodes/AnimatedSubtraction');
 const AnimatedTracking = require('./nodes/AnimatedTracking');
 const AnimatedValue = require('./nodes/AnimatedValue');

Libraries/Animated/__tests__/Animated-test.js

@@ -140,21 +140,6 @@ describe('Animated tests', () => {
       expect(callback).toBeCalled();
     });
 
-    // This test is flaky and we are asking open source to fix it
-    // https://github.com/facebook/react-native/issues/21517
-    it.skip('send toValue when an underdamped spring stops', () => {
-      const anim = new Animated.Value(0);
-      const listener = jest.fn();
-      anim.addListener(listener);
-      Animated.spring(anim, {toValue: 15, useNativeDriver: false}).start();
-      jest.runAllTimers();
-      const lastValue =
-        listener.mock.calls[listener.mock.calls.length - 2][0].value;
-      expect(lastValue).not.toBe(15);
-      expect(lastValue).toBeCloseTo(15);
-      expect(anim.__getValue()).toBe(15);
-    });
-
     it('send toValue when a critically damped spring stops', () => {
       const anim = new Animated.Value(0);
       const listener = jest.fn();

Libraries/BatchedBridge/__tests__/NativeModules-test.js

@@ -14,8 +14,6 @@ jest.unmock('../NativeModules');
 
 let BatchedBridge;
 let NativeModules;
-let fs;
-let parseErrorStack;
 
 const MODULE_IDS = 0;
 const METHOD_IDS = 1;
@@ -45,8 +43,6 @@ describe('MessageQueue', function () {
     global.__fbBatchedBridgeConfig = require('../__mocks__/MessageQueueTestConfig');
     BatchedBridge = require('../BatchedBridge');
     NativeModules = require('../NativeModules');
-    fs = require('fs');
-    parseErrorStack = require('../../Core/Devtools/parseErrorStack');
   });
 
   it('should generate native modules', () => {

Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js

@@ -17,7 +17,6 @@ import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {
   DirectEventHandler,
   Float,
-  Int32,
   WithDefault,
 } from '../../Types/CodegenTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';

Libraries/Components/TextInput/TextInput.js

@@ -1030,9 +1030,9 @@ function InternalTextInput(props: Props): React.Node {
   });
 
   const _onChange = (event: ChangeEvent) => {
-    const text = event.nativeEvent.text;
+    const currentText = event.nativeEvent.text;
     props.onChange && props.onChange(event);
-    props.onChangeText && props.onChangeText(text);
+    props.onChangeText && props.onChangeText(currentText);
 
     if (inputRef.current == null) {
       // calling `props.onChange` or `props.onChangeText`
@@ -1040,7 +1040,7 @@ function InternalTextInput(props: Props): React.Node {
       return;
     }
 
-    setLastNativeText(text);
+    setLastNativeText(currentText);
     // This must happen last, after we call setLastNativeText.
     // Different ordering can cause bugs when editing AndroidTextInputs
     // with multiple Fragments.

Libraries/Components/Touchable/PooledClass.js

@@ -19,7 +19,7 @@ import invariant from 'invariant';
  * here, or in their own files.
  */
 const oneArgumentPooler = function (copyFieldsFrom) {
-  const Klass = this;
+  const Klass = this; // eslint-disable-line consistent-this
   if (Klass.instancePool.length) {
     const instance = Klass.instancePool.pop();
     Klass.call(instance, copyFieldsFrom);
@@ -30,7 +30,7 @@ const oneArgumentPooler = function (copyFieldsFrom) {
 };
 
 const twoArgumentPooler = function (a1, a2) {
-  const Klass = this;
+  const Klass = this; // eslint-disable-line consistent-this
   if (Klass.instancePool.length) {
     const instance = Klass.instancePool.pop();
     Klass.call(instance, a1, a2);
@@ -41,7 +41,7 @@ const twoArgumentPooler = function (a1, a2) {
 };
 
 const threeArgumentPooler = function (a1, a2, a3) {
-  const Klass = this;
+  const Klass = this; // eslint-disable-line consistent-this
   if (Klass.instancePool.length) {
     const instance = Klass.instancePool.pop();
     Klass.call(instance, a1, a2, a3);
@@ -52,7 +52,7 @@ const threeArgumentPooler = function (a1, a2, a3) {
 };
 
 const fourArgumentPooler = function (a1, a2, a3, a4) {
-  const Klass = this;
+  const Klass = this; // eslint-disable-line consistent-this
   if (Klass.instancePool.length) {
     const instance = Klass.instancePool.pop();
     Klass.call(instance, a1, a2, a3, a4);
@@ -63,7 +63,7 @@ const fourArgumentPooler = function (a1, a2, a3, a4) {
 };
 
 const standardReleaser = function (instance) {
-  const Klass = this;
+  const Klass = this; // eslint-disable-line consistent-this
   invariant(
     instance instanceof Klass,
     'Trying to release an instance into a pool of a different type.',

Libraries/Core/InitializeCore.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-/* globals window: true */
-
 /**
  * Sets up global variables typical in most JavaScript environments.
  *

Libraries/LogBox/UI/AnsiHighlight.js

@@ -9,9 +9,8 @@
  */
 
 import {ansiToJson} from 'anser';
-import Text from '../../Text/Text';
-import View from '../../Components/View/View';
 import * as React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
 
 import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
@@ -77,9 +76,9 @@ export default function Ansi({
   };
 
   return (
-    <View style={{flexDirection: 'column'}}>
+    <View>
       {parsedLines.map((items, i) => (
-        <View style={{flexDirection: 'row'}} key={i}>
+        <View style={styles.line} key={i}>
           {items.map((bundle, key) => {
             const textStyle =
               bundle.fg && COLORS[bundle.fg]
@@ -101,3 +100,9 @@ export default function Ansi({
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  line: {
+    flexDirection: 'row',
+  },
+});

Libraries/Pressability/PressabilityDebug.js

@@ -52,17 +52,20 @@ export function PressabilityDebugView({color, hitSlop}: Props): React.Node {
       return (
         <View
           pointerEvents="none"
-          style={{
-            backgroundColor: baseColor.slice(0, -2) + '0F', // 15%
-            borderColor: baseColor.slice(0, -2) + '55', // 85%
-            borderStyle: 'dashed',
-            borderWidth: 1,
-            bottom: -(hitSlop?.bottom ?? 0),
-            left: -(hitSlop?.left ?? 0),
-            position: 'absolute',
-            right: -(hitSlop?.right ?? 0),
-            top: -(hitSlop?.top ?? 0),
-          }}
+          style={
+            // eslint-disable-next-line react-native/no-inline-styles
+            {
+              backgroundColor: baseColor.slice(0, -2) + '0F', // 15%
+              borderColor: baseColor.slice(0, -2) + '55', // 85%
+              borderStyle: 'dashed',
+              borderWidth: 1,
+              bottom: -(hitSlop?.bottom ?? 0),
+              left: -(hitSlop?.left ?? 0),
+              position: 'absolute',
+              right: -(hitSlop?.right ?? 0),
+              top: -(hitSlop?.top ?? 0),
+            }
+          }
         />
       );
     }

ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js

@@ -9,11 +9,11 @@
 
 'use strict';
 
-const React = require('react');
-const {StyleSheet, UIManager, View, findNodeHandle} = require('react-native');
-const BatchedBridge = require('react-native/Libraries/BatchedBridge/BatchedBridge');
-
-const assertEquals = require('./Asserts').assertEquals;
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+import {StyleSheet, UIManager, View, findNodeHandle} from 'react-native';
+import BatchedBridge from 'react-native/Libraries/BatchedBridge/BatchedBridge';
+import {assertEquals} from './Asserts';
 
 const styles = StyleSheet.create({
   A: {
@@ -45,24 +45,27 @@ const styles = StyleSheet.create({
 
 let A, B, C, D;
 
-class MeasureLayoutTestApp extends React.Component {
-  componentDidMount() {
-    A = findNodeHandle(this.refs.A);
-    B = findNodeHandle(this.refs.B);
-    C = findNodeHandle(this.refs.C);
-    D = findNodeHandle(this.refs.D);
-  }
+function MeasureLayoutTestApp() {
+  const refA = useRef(null);
+  const refB = useRef(null);
+  const refC = useRef(null);
+  const refD = useRef(null);
 
-  render() {
-    return (
-      <View ref="A" style={styles.A} collapsable={false}>
-        <View ref="B" style={styles.B} collapsable={false}>
-          <View ref="C" style={styles.C} collapsable={false} />
-        </View>
-        <View ref="D" style={styles.D} collapsable={false} />
+  useEffect(() => {
+    A = findNodeHandle(refA.current);
+    B = findNodeHandle(refB.current);
+    C = findNodeHandle(refC.current);
+    D = findNodeHandle(refD.current);
+  });
+
+  return (
+    <View ref={refA} style={styles.A} collapsable={false}>
+      <View ref={refB} style={styles.B} collapsable={false}>
+        <View ref={refC} style={styles.C} collapsable={false} />
       </View>
-    );
-  }
+      <View ref={refD} style={styles.D} collapsable={false} />
+    </View>
+  );
 }
 
 function shouldNotCallThisCallback() {
@@ -70,7 +73,7 @@ function shouldNotCallThisCallback() {
 }
 
 const MeasureLayoutTestModule = {
-  MeasureLayoutTestApp: MeasureLayoutTestApp,
+  MeasureLayoutTestApp,
   verifyMeasureOnViewA: function () {
     UIManager.measure(A, function (a, b, width, height, x, y) {
       assertEquals(500, width);

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -105,7 +105,7 @@ class ScrollViewTestApp extends React.Component<Props, State> {
   }
 
   render(): React.Node {
-    scrollViewApp = this;
+    scrollViewApp = this; // eslint-disable-line consistent-this
     const children = this.state.data.map((item, index) => (
       <Item
         key={index}
@@ -139,7 +139,7 @@ class HorizontalScrollViewTestApp extends React.Component<Props, State> {
   }
 
   render(): React.Node {
-    scrollViewApp = this;
+    scrollViewApp = this; // eslint-disable-line consistent-this
     const children = this.state.data.map((item, index) => (
       <Item
         key={index}

ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js

@@ -327,7 +327,7 @@ class SubviewsClippingTestApp extends React.Component {
   state = {};
 
   UNSAFE_componentWillMount() {
-    appInstance = this;
+    appInstance = this; // eslint-disable-line consistent-this
   }
 
   setComponent = component => {

ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js

@@ -51,7 +51,7 @@ class SwipeRefreshLayoutTestApp extends React.Component {
   };
 
   componentDidMount() {
-    app = this;
+    app = this; // eslint-disable-line consistent-this
   }
 
   render() {

ReactAndroid/src/androidTest/js/TextInputTestModule.js

@@ -70,7 +70,6 @@ class TokenizedTextExample extends React.Component {
     return (
       <View>
         <TextInput
-          ref="tokenizedInput"
           testID="tokenizedInput"
           multiline={true}
           style={styles.multiline}
@@ -86,7 +85,7 @@ class TokenizedTextExample extends React.Component {
 
 class TextInputTestApp extends React.Component {
   componentDidMount() {
-    app = this;
+    app = this; // eslint-disable-line consistent-this
   }
 
   handleOnSubmitEditing = record => {
@@ -118,30 +117,25 @@ class TextInputTestApp extends React.Component {
           testID="textInput2"
         />
         <TextInput
-          ref="textInput3"
           style={styles.textInput}
           defaultValue="Hello, World"
           testID="textInput3"
         />
         <TextInput
-          ref="textInput4"
           style={[styles.textInput, styles.textInputColor]}
           testID="textInput4"
         />
         <TextInput
-          ref="textInput5"
           style={[styles.textInput, styles.textInputColor]}
           defaultValue=""
           testID="textInput5"
         />
         <TextInput
-          ref="textInput6"
           style={[styles.textInput, styles.textInputColor]}
           defaultValue="Text"
           testID="textInput6"
         />
         <TextInput
-          ref="onSubmitTextInput"
           onSubmitEditing={this.handleOnSubmitEditing.bind(this, 'onSubmit')}
           defaultValue=""
           testID="onSubmitTextInput"

bots/make-comment.js

@@ -36,6 +36,7 @@ async function updateComment(octokit, issueParams, body, replacePattern) {
   const authedUserId = authenticatedUser.data.id;
   const pattern = new RegExp(replacePattern, 'g');
   const comment = comments.data.find(
+    // eslint-disable-next-line no-shadow
     ({user, body}) => user.id === authedUserId && pattern.test(body),
   );
   if (!comment) {

packages/react-native-codegen/scripts/build.js

@@ -89,7 +89,7 @@ function buildFile(file, silent) {
     );
     fs.writeFileSync(destPath, transformed);
     const source = fs.readFileSync(file).toString('utf-8');
-    if (/\@flow/.test(source)) {
+    if (/@flow/.test(source)) {
       fs.createReadStream(file).pipe(fs.createWriteStream(destPath + '.flow'));
     }
     silent ||

packages/rn-tester/e2e/__tests__/Alert-test.js

@@ -7,7 +7,7 @@
  * @format
  */
 
-/* global device, element, by, expect, waitFor */
+/* global element, by, expect */
 const {openExampleWithTitle} = require('../e2e-helpers');
 
 describe('Alert', () => {

packages/rn-tester/e2e/e2e-helpers.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-/* global element, by, expect */
+/* global element, by */
 
 // Will open a component example from the root list
 // by filtering by component and then tapping on the label

packages/rn-tester/js/examples/Animated/FadeInViewExample.js

@@ -35,7 +35,7 @@ function FadeInView({
   children: React.Node,
 }) {
   //opacity 0
-  const [fadeAnim, setFadeAnim] = React.useState(() => new Animated.Value(0));
+  const [fadeAnim] = React.useState(() => new Animated.Value(0));
   React.useEffect(() => {
     Animated.timing(
       // Uses easing functions

packages/rn-tester/js/examples/Layout/LayoutEventsExample.js

@@ -96,9 +96,8 @@ class LayoutEventExample extends React.Component<Props, State> {
             Press here to change layout.
           </Text>
         </Text>
-        <View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
+        <View onLayout={this.onViewLayout} style={viewStyle}>
           <Image
-            ref="img"
             onLayout={this.onImageLayout}
             style={styles.image}
             source={{
@@ -115,7 +114,7 @@ class LayoutEventExample extends React.Component<Props, State> {
               JSON.stringify(this.state.viewLayout, null, '  ') + '\n\n'
             }
           </Text>
-          <Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
+          <Text onLayout={this.onTextLayout} style={styles.text}>
             A simple piece of text.{this.state.extraText}
           </Text>
           <Text>

packages/rn-tester/js/examples/Modal/ModalPresentation.js

@@ -8,6 +8,8 @@
  * @format
  */
 
+/* eslint-disable no-alert */
+
 import * as React from 'react';
 import {Modal, Platform, StyleSheet, Switch, Text, View} from 'react-native';
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';

packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js

@@ -63,7 +63,7 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
             {this.props.children(this.state.native)}
           </View>
           <View>
-            <Text>JavaScript:</Text>
+            <Text>JavaScript{':'}</Text>
           </View>
           <View style={styles.row}>{this.props.children(this.state.js)}</View>
         </View>
@@ -341,7 +341,7 @@ class TrackingExample extends React.Component<
             {this.renderBlock(this.state.native, this.state.toNative)}
           </View>
           <View>
-            <Text>JavaScript:</Text>
+            <Text>JavaScript{':'}</Text>
           </View>
           <View style={styles.row}>
             {this.renderBlock(this.state.js, this.state.toJS)}

packages/rn-tester/js/examples/Switch/SwitchExample.js

@@ -238,7 +238,12 @@ class OnChangeExample extends React.Component<{...}, $FlowFixMeState> {
   render() {
     return (
       <View>
-        <Switch onChange={() => alert('OnChange Called')} />
+        <Switch
+          onChange={() => {
+            // eslint-disable-next-line no-alert
+            alert('OnChange Called');
+          }}
+        />
       </View>
     );
   }

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -185,49 +185,51 @@ class RewriteInvalidCharactersAndClearExample extends React.Component<
 }
 
 class BlurOnSubmitExample extends React.Component<{...}> {
-  focusNextField = nextField => {
-    this.refs[nextField].focus();
-  };
+  ref1 = React.createRef();
+  ref2 = React.createRef();
+  ref3 = React.createRef();
+  ref4 = React.createRef();
+  ref5 = React.createRef();
 
   render() {
     return (
       <View>
         <TextInput
-          ref="1"
+          ref={this.ref1}
           style={styles.singleLine}
           placeholder="blurOnSubmit = false"
           returnKeyType="next"
           blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('2')}
+          onSubmitEditing={() => this.ref2.current?.focus()}
         />
         <TextInput
-          ref="2"
+          ref={this.ref2}
           style={styles.singleLine}
           keyboardType="email-address"
           placeholder="blurOnSubmit = false"
           returnKeyType="next"
           blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('3')}
+          onSubmitEditing={() => this.ref3.current?.focus()}
         />
         <TextInput
-          ref="3"
+          ref={this.ref3}
           style={styles.singleLine}
           keyboardType="url"
           placeholder="blurOnSubmit = false"
           returnKeyType="next"
           blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('4')}
+          onSubmitEditing={() => this.ref4.current?.focus()}
         />
         <TextInput
-          ref="4"
+          ref={this.ref4}
           style={styles.singleLine}
           keyboardType="numeric"
           placeholder="blurOnSubmit = false"
           blurOnSubmit={false}
-          onSubmitEditing={() => this.focusNextField('5')}
+          onSubmitEditing={() => this.ref5.current?.focus()}
         />
         <TextInput
-          ref="5"
+          ref={this.ref5}
           style={styles.singleLine}
           keyboardType="numbers-and-punctuation"
           placeholder="blurOnSubmit = true"

scripts/android-e2e-test.js

@@ -94,6 +94,7 @@ describe('Android Test App', function () {
           elem.click();
           driver.sleep(2000);
         },
+        // eslint-disable-next-line handle-callback-err
         err => {
           // ignoring if Reload JS button can't be located
         },