diff --git a/IntegrationTests/AppEventsTest.js b/IntegrationTests/AppEventsTest.js index 650203ed233ad6..1cec9ee0179ecc 100644 --- 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 index 2fdae2d13091da..302b14e1c17590 100644 --- 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 index d09684faadfa69..21aa7358e2a8d8 100644 --- 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 index 35f1c43764ae18..2965e6784f592b 100644 --- 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 index de1b8d9a2a52f1..2e27a8af7c3cf9 100644 --- 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 index c88abc5983852b..6f8f96d33a0c73 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/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. diff --git a/Libraries/Components/Touchable/PooledClass.js b/Libraries/Components/Touchable/PooledClass.js index 73e104e75eec0d..90874da32a5088 100644 --- 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 index e30baa2eb72564..e788cfc286abcc 100644 --- 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 index 101b14258264b2..d1fdacffec5622 100644 --- 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 ( - + {parsedLines.map((items, i) => ( - + {items.map((bundle, key) => { const textStyle = bundle.fg && COLORS[bundle.fg] @@ -101,3 +100,9 @@ export default function Ansi({ ); } + +const styles = StyleSheet.create({ + line: { + flexDirection: 'row', + }, +}); diff --git a/Libraries/Pressability/PressabilityDebug.js b/Libraries/Pressability/PressabilityDebug.js index 27017a4760823c..b321cb3bfc713c 100644 --- a/Libraries/Pressability/PressabilityDebug.js +++ b/Libraries/Pressability/PressabilityDebug.js @@ -52,17 +52,20 @@ export function PressabilityDebugView({color, hitSlop}: Props): React.Node { return ( ); } diff --git a/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js b/ReactAndroid/src/androidTest/js/MeasureLayoutTestModule.js index 4e3d342ba0c17a..50295a823844bd 100644 --- 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,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); + + useEffect(() => { + A = findNodeHandle(refA.current); + B = findNodeHandle(refB.current); + C = findNodeHandle(refC.current); + D = findNodeHandle(refD.current); + }); - render() { - return ( - - - - - + return ( + + + - ); - } + + + ); } 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); diff --git a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js b/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js index c138a80ddfc149..c0d18995d0f0a9 100644 --- a/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js +++ b/ReactAndroid/src/androidTest/js/ScrollViewTestModule.js @@ -105,7 +105,7 @@ class ScrollViewTestApp extends React.Component { } render(): React.Node { - scrollViewApp = this; + scrollViewApp = this; // eslint-disable-line consistent-this const children = this.state.data.map((item, index) => ( { } render(): React.Node { - scrollViewApp = this; + scrollViewApp = this; // eslint-disable-line consistent-this const children = this.state.data.map((item, index) => ( { diff --git a/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js b/ReactAndroid/src/androidTest/js/SwipeRefreshLayoutTestModule.js index 14f81bbb3dbcf6..09f8d9431e1cd0 100644 --- 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 index 82dd39772a4c97..a25fd1451c03c0 100644 --- a/ReactAndroid/src/androidTest/js/TextInputTestModule.js +++ b/ReactAndroid/src/androidTest/js/TextInputTestModule.js @@ -70,7 +70,6 @@ class TokenizedTextExample extends React.Component { return ( { @@ -118,30 +117,25 @@ class TextInputTestApp extends React.Component { testID="textInput2" /> 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 index c3f8f2ae788e29..5dc4d208e6e6b9 100644 --- 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 index 2e9f57906b06a5..19fd8f40c28a02 100644 --- 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 index 9374e8254dcd21..e662cf12c7698f 100644 --- 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 diff --git a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js b/packages/rn-tester/js/examples/Animated/FadeInViewExample.js index 8a8d8ea09d0ed8..1fd641b260f216 100644 --- a/packages/rn-tester/js/examples/Animated/FadeInViewExample.js +++ b/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 diff --git a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js index 8aab1d24e6fb1a..1891b83f28acd1 100644 --- a/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js +++ b/packages/rn-tester/js/examples/Layout/LayoutEventsExample.js @@ -96,9 +96,8 @@ class LayoutEventExample extends React.Component { Press here to change layout. - + { JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n' } - + A simple piece of text.{this.state.extraText} diff --git a/packages/rn-tester/js/examples/Modal/ModalPresentation.js b/packages/rn-tester/js/examples/Modal/ModalPresentation.js index fc3f527aedbd48..4286896c6e029f 100644 --- a/packages/rn-tester/js/examples/Modal/ModalPresentation.js +++ b/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'; diff --git a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js b/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js index 7dd238eb203cc5..0a82f525db8c24 100644 --- a/packages/rn-tester/js/examples/NativeAnimation/NativeAnimationsExample.js +++ b/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)} - JavaScript: + JavaScript{':'} {this.props.children(this.state.js)} @@ -341,7 +341,7 @@ class TrackingExample extends React.Component< {this.renderBlock(this.state.native, this.state.toNative)} - JavaScript: + JavaScript{':'} {this.renderBlock(this.state.js, this.state.toJS)} diff --git a/packages/rn-tester/js/examples/Switch/SwitchExample.js b/packages/rn-tester/js/examples/Switch/SwitchExample.js index a249fc292011d2..fcb20043dfdd53 100644 --- a/packages/rn-tester/js/examples/Switch/SwitchExample.js +++ b/packages/rn-tester/js/examples/Switch/SwitchExample.js @@ -238,7 +238,12 @@ class OnChangeExample extends React.Component<{...}, $FlowFixMeState> { render() { return ( - alert('OnChange Called')} /> + { + // eslint-disable-next-line no-alert + alert('OnChange Called'); + }} + /> ); } diff --git a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js index 8d12a62a301c0b..92115086f40793 100644 --- a/packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js +++ b/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 ( this.focusNextField('2')} + onSubmitEditing={() => this.ref2.current?.focus()} /> this.focusNextField('3')} + onSubmitEditing={() => this.ref3.current?.focus()} /> this.focusNextField('4')} + onSubmitEditing={() => this.ref4.current?.focus()} /> this.focusNextField('5')} + onSubmitEditing={() => this.ref5.current?.focus()} /> { // ignoring if Reload JS button can't be located },