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
NickGerleman · Nov 10, 2021 · 148c98e · 148c98e
1 parent 9fc3fc8
commit 148c98e
Show file tree

Hide file tree

Showing 26 changed files with 94 additions and 101 deletions.
diff --git a/IntegrationTests/AppEventsTest.js b/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});
   }
 

diff --git a/Libraries/Animated/AnimatedImplementation.js b/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');

diff --git a/Libraries/Animated/__tests__/Animated-test.js b/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();

diff --git a/Libraries/BatchedBridge/__tests__/NativeModules-test.js b/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', () => {

diff --git a/Libraries/Components/RefreshControl/AndroidSwipeRefreshLayoutNativeComponent.js b/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';

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -1030,17 +1030,17 @@ 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`
       // may clean up the input itself. Exits here.
       return;
     }
 
-    setLastNativeText(text);
+    setLastNativeText(currentText);
     // This must happen last, after we call setLastNativeText.
     // Different ordering can cause bugs when editing AndroidTextInputs
     // with multiple Fragments.

diff --git a/Libraries/Components/Touchable/PooledClass.js b/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.',

diff --git a/Libraries/Core/InitializeCore.js b/Libraries/Core/InitializeCore.js
@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-/* globals window: true */
-
 /**
  * Sets up global variables typical in most JavaScript environments.
  *

diff --git a/Libraries/LogBox/UI/AnsiHighlight.js b/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',
+  },
+});
diff --git a/Libraries/Pressability/PressabilityDebug.js b/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),
+            }
+          }
         />
       );
     }

diff --git a/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js b/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,32 +45,35 @@ 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);
+
+  useEffect(() => {
+    A = findNodeHandle(refA.current);
+    B = findNodeHandle(refB.current);
+    C = findNodeHandle(refC.current);
+    D = findNodeHandle(refD.current);
+  });
 
-  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} />
+  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() {
   assertEquals(false, true);
 }
 
 const MeasureLayoutTestModule = {
-  MeasureLayoutTestApp: MeasureLayoutTestApp,
+  MeasureLayoutTestApp,
   verifyMeasureOnViewA: function () {
     UIManager.measure(A, function (a, b, width, height, x, y) {
       assertEquals(500, width);

diff --git a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js b/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}

diff --git a/ReactAndroid/src/androidTest/js/SubviewsClippingTestModule.js b/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 => {

diff --git a/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js b/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() {

diff --git a/ReactAndroid/src/androidTest/js/TextInputTestModule.js b/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"

diff --git a/bots/make-comment.js b/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) {

diff --git a/packages/react-native-codegen/scripts/build.js b/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 ||

diff --git a/packages/rn-tester/e2e/__tests__/Alert-test.js b/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', () => {

diff --git a/packages/rn-tester/e2e/e2e-helpers.js b/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
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,8 +8,6 @@ @@
      * @flow strict-local
      */
-    /* globals window: true */
     /**
      * Sets up global variables typical in most JavaScript environments.
      *
@@ Expand Down @@