Skip to content

Commit 8c2a4d0

Browse files
mvitousekfacebook-github-bot
mvitousek
authored and
facebook-github-bot
committed
Annotate React hooks in xplat, defaulting to any
Summary: Add explicit annotations to React hook callbacks as required for Flow's Local Type Inference project. This codemod prepares the codebase to match Flow's new typechecking algorithm. The new algorithm will make Flow more reliable and predictable. This diff adds `any` or `$FlowFixMe` in cases where more precise types could not be determined. Details: - Codemod script: `.facebook/flowd codemod annotate-react-hooks ../../xplat/js --default-any --write` - Local Type Inference announcement: [post](https://fb.workplace.com/groups/flowlang/posts/788206301785035) - Support group: [Flow Support](https://fb.workplace.com/groups/flow) drop-conflicts bypass-lint Reviewed By: SamChou19815 Differential Revision: D41231214 fbshipit-source-id: d5f5ce8d61020baa1138292c9e9f1c69dffd324c
1 parent 2c7e89d commit 8c2a4d0

15 files changed

+113
-61
lines changed

‎Libraries/Components/ScrollView/ScrollViewStickyHeader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const ScrollViewStickyHeaderWithForwardedRef: React.AbstractComponent<
134134
// platform to JS, so we need the ShadowTree to have knowledge
135135
// of the current position.
136136
const animatedValueListener = useCallback(
137-
({value}) => {
137+
({value}: $FlowFixMe) => {
138138
const _debounceTimeout: number = Platform.OS === 'android' ? 15 : 64;
139139
// When the AnimatedInterpolation is recreated, it always initializes
140140
// to a value of zero and emits a value change of 0 to its listeners.

‎packages/rn-tester/js/RNTesterAppShared.js

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,24 @@
88
* @flow
99
*/
1010

11-
import {BackHandler, StyleSheet, useColorScheme, View} from 'react-native';
12-
import * as React from 'react';
13-
11+
import {RNTesterEmptyBookmarksState} from './components/RNTesterEmptyBookmarksState';
1412
import RNTesterModuleContainer from './components/RNTesterModuleContainer';
1513
import RNTesterModuleList from './components/RNTesterModuleList';
1614
import RNTesterNavBar, {navBarHeight} from './components/RNTesterNavbar';
15+
import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
16+
import RNTTitleBar from './components/RNTTitleBar';
1717
import RNTesterList from './utils/RNTesterList';
18+
import {
19+
RNTesterNavigationActionsType,
20+
RNTesterNavigationReducer,
21+
} from './utils/RNTesterNavigationReducer';
1822
import {
1923
Screens,
20-
initialNavigationState,
2124
getExamplesListWithBookmarksAndRecentlyUsed,
25+
initialNavigationState,
2226
} from './utils/testerStateUtils';
23-
import {
24-
RNTesterNavigationReducer,
25-
RNTesterNavigationActionsType,
26-
} from './utils/RNTesterNavigationReducer';
27-
import {RNTesterThemeContext, themes} from './components/RNTesterTheme';
28-
import RNTTitleBar from './components/RNTTitleBar';
29-
import {RNTesterEmptyBookmarksState} from './components/RNTesterEmptyBookmarksState';
27+
import * as React from 'react';
28+
import {BackHandler, StyleSheet, View, useColorScheme} from 'react-native';
3029

3130
// RNTester App currently uses in memory storage for storing navigation state
3231

@@ -79,7 +78,7 @@ const RNTesterApp = (): React.Node => {
7978
}, [activeModuleKey, handleBackPress]);
8079

8180
const handleModuleCardPress = React.useCallback(
82-
({exampleType, key, title}) => {
81+
({exampleType, key, title}: any) => {
8382
dispatch({
8483
type: RNTesterNavigationActionsType.MODULE_CARD_PRESS,
8584
data: {exampleType, key, title},
@@ -99,7 +98,7 @@ const RNTesterApp = (): React.Node => {
9998
);
10099

101100
const toggleBookmark = React.useCallback(
102-
({exampleType, key}) => {
101+
({exampleType, key}: any) => {
103102
dispatch({
104103
type: RNTesterNavigationActionsType.BOOKMARK_PRESS,
105104
data: {exampleType, key},

‎packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
*/
1010

1111
import type {Node} from 'React';
12+
13+
import React, {useCallback, useEffect, useRef, useState} from 'react';
1214
import {ActivityIndicator, StyleSheet, View} from 'react-native';
13-
import React, {useState, useCallback, useRef, useEffect} from 'react';
1415

1516
function ToggleAnimatingActivityIndicator() {
16-
const timer = useRef();
17+
const timer = useRef<void | TimeoutID>();
1718

1819
const [animating, setAnimating] = useState(true);
1920

‎packages/rn-tester/js/examples/DrawerLayoutAndroid/DrawerLayoutAndroidExample.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@
1010

1111
'use strict';
1212

13-
import React, {useRef, useState} from 'react';
1413
import type {Node} from 'react';
14+
15+
import React, {useRef, useState} from 'react';
1516
import {
1617
Button,
1718
DrawerLayoutAndroid,
18-
Text,
1919
StyleSheet,
20+
Text,
2021
View,
2122
} from 'react-native';
2223

2324
const Drawer = () => {
24-
const drawer = useRef(null);
25+
const drawer = useRef<null | React$ElementRef<any>>(null);
2526
const [drawerPosition, setDrawerPosition] = useState('left');
2627
const changeDrawerPosition = () => {
2728
if (drawerPosition === 'left') {

‎packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesHoverablePointers.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@
88
* @flow
99
*/
1010

11+
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
12+
import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
13+
import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
1114
import type {
1215
Layout,
1316
PointerEvent,
1417
} from 'react-native/Libraries/Types/CoreEventTypes';
15-
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
16-
17-
import * as React from 'react';
18-
import {useCallback, useRef, useState} from 'react';
19-
import {View, StyleSheet} from 'react-native';
2018

2119
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
2220
import {check_PointerEvent, useTestEventHandler} from './PointerEventSupport';
21+
import * as React from 'react';
22+
import {useCallback, useRef, useState} from 'react';
23+
import {StyleSheet, View} from 'react-native';
2324

2425
const eventList = [
2526
'pointerOver',
@@ -168,7 +169,13 @@ function PointerEventAttributesHoverablePointersTestCase(
168169
[harness],
169170
);
170171

171-
const square1Ref = useRef();
172+
const square1Ref =
173+
useRef<?React$ElementRef<
174+
React$AbstractComponent<
175+
ViewProps,
176+
React.ElementRef<HostComponent<ViewProps>>,
177+
>,
178+
>>();
172179
const square1Handlers = useTestEventHandler(eventList, (event, eventType) => {
173180
if (!square1Visible) {
174181
return;
@@ -197,7 +204,13 @@ function PointerEventAttributesHoverablePointersTestCase(
197204
}
198205
});
199206

200-
const square2Ref = useRef();
207+
const square2Ref =
208+
useRef<?React$ElementRef<
209+
React$AbstractComponent<
210+
ViewProps,
211+
React.ElementRef<HostComponent<ViewProps>>,
212+
>,
213+
>>();
201214
const square2Handlers = useTestEventHandler(eventList, (event, eventType) => {
202215
const square2Elem = square2Ref.current;
203216
if (square2Elem != null) {

‎packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventAttributesNoHoverPointers.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@
88
* @flow
99
*/
1010

11+
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
12+
import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
13+
import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
1114
import type {
1215
Layout,
1316
PointerEvent,
1417
} from 'react-native/Libraries/Types/CoreEventTypes';
15-
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
16-
17-
import * as React from 'react';
18-
import {useCallback, useRef, useState} from 'react';
19-
import {View, StyleSheet} from 'react-native';
2018

2119
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
2220
import {check_PointerEvent, useTestEventHandler} from './PointerEventSupport';
21+
import * as React from 'react';
22+
import {useCallback, useRef, useState} from 'react';
23+
import {StyleSheet, View} from 'react-native';
2324

2425
const eventList = [
2526
'pointerOver',
@@ -136,7 +137,13 @@ function PointerEventAttributesNoHoverPointersTestCase(
136137
[harness],
137138
);
138139

139-
const square1Ref = useRef();
140+
const square1Ref =
141+
useRef<?React$ElementRef<
142+
React$AbstractComponent<
143+
ViewProps,
144+
React.ElementRef<HostComponent<ViewProps>>,
145+
>,
146+
>>();
140147
const square1Handlers = useTestEventHandler(eventList, (event, eventType) => {
141148
if (!square1Visible) {
142149
return;
@@ -165,7 +172,13 @@ function PointerEventAttributesNoHoverPointersTestCase(
165172
}
166173
});
167174

168-
const square2Ref = useRef();
175+
const square2Ref =
176+
useRef<?React$ElementRef<
177+
React$AbstractComponent<
178+
ViewProps,
179+
React.ElementRef<HostComponent<ViewProps>>,
180+
>,
181+
>>();
169182
const square2Handlers = useTestEventHandler(eventList, (event, eventType) => {
170183
const square2Elem = square2Ref.current;
171184
if (square2Elem != null) {

‎packages/rn-tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerOverOut.js

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@
99
*/
1010

1111
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
12-
import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
12+
import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
1313
import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
14+
import type {PointerEvent} from 'react-native/Libraries/Types/CoreEventTypes';
1415

1516
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
1617
import * as React from 'react';
17-
import {useRef, useCallback} from 'react';
18+
import {useCallback, useRef} from 'react';
1819
import {StyleSheet, View} from 'react-native';
1920

2021
function getNativeTagFromHostElement(
@@ -59,14 +60,34 @@ function PointerEventPointerOverOutTestCase(
5960
const innerNativeTagRef = useRef(-1);
6061
const outerNativeTagRef = useRef(-1);
6162

62-
const handleInnerRefCallback = useCallback(elem => {
63-
const nativeTag = getNativeTagFromHostElement(elem);
64-
innerNativeTagRef.current = nativeTag != null ? nativeTag : -1;
65-
}, []);
66-
const handleOuterRefCallback = useCallback(elem => {
67-
const nativeTag = getNativeTagFromHostElement(elem);
68-
outerNativeTagRef.current = nativeTag != null ? nativeTag : -1;
69-
}, []);
63+
const handleInnerRefCallback = useCallback(
64+
(
65+
elem: null | React$ElementRef<
66+
React$AbstractComponent<
67+
ViewProps,
68+
React.ElementRef<HostComponent<ViewProps>>,
69+
>,
70+
>,
71+
) => {
72+
const nativeTag = getNativeTagFromHostElement(elem);
73+
innerNativeTagRef.current = nativeTag != null ? nativeTag : -1;
74+
},
75+
[],
76+
);
77+
const handleOuterRefCallback = useCallback(
78+
(
79+
elem: null | React$ElementRef<
80+
React$AbstractComponent<
81+
ViewProps,
82+
React.ElementRef<HostComponent<ViewProps>>,
83+
>,
84+
>,
85+
) => {
86+
const nativeTag = getNativeTagFromHostElement(elem);
87+
outerNativeTagRef.current = nativeTag != null ? nativeTag : -1;
88+
},
89+
[],
90+
);
7091

7192
const innerOverRef = useRef(0);
7293
const innerOutRef = useRef(0);

‎packages/rn-tester/js/examples/FlatList/FlatList-onEndReached.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
'use strict';
1212
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
13+
1314
import BaseFlatListExample from './BaseFlatListExample';
1415
import * as React from 'react';
1516

@@ -20,7 +21,7 @@ export function FlatList_onEndReached(): React.Node {
2021
setOutput('onEndReached'),
2122
onEndReachedThreshold: 0,
2223
};
23-
const ref = React.useRef(null);
24+
const ref = React.useRef<any>(null);
2425

2526
const onTest = () => {
2627
const scrollResponder = ref?.current?.getScrollResponder();

‎packages/rn-tester/js/examples/FlatList/FlatList-onViewableItemsChanged.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010

1111
'use strict';
1212

13-
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
1413
import type {ViewToken} from '../../../../../Libraries/Lists/ViewabilityHelper';
14+
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
15+
1516
import BaseFlatListExample from './BaseFlatListExample';
16-
import {StyleSheet, View, FlatList} from 'react-native';
1717
import * as React from 'react';
18+
import {FlatList, StyleSheet, View} from 'react-native';
1819

1920
type FlatListProps = React.ElementProps<typeof FlatList>;
2021
type ViewabilityConfig = $PropertyType<FlatListProps, 'viewabilityConfig'>;
@@ -49,7 +50,7 @@ export function FlatList_onViewableItemsChanged(props: {
4950
horizontal,
5051
};
5152

52-
const ref = React.useRef(null);
53+
const ref = React.useRef<any>(null);
5354
const onTest =
5455
useScrollRefScroll === true
5556
? () => {

‎packages/rn-tester/js/examples/FlatList/FlatList-withSeparators.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010

1111
'use strict';
1212
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
13+
1314
import BaseFlatListExample from './BaseFlatListExample';
14-
import {StyleSheet, View, Text} from 'react-native';
1515
import * as React from 'react';
16+
import {StyleSheet, Text, View} from 'react-native';
1617

1718
const Separator =
1819
(defaultColor: string, highlightColor: string) =>
@@ -41,7 +42,7 @@ export function FlatList_withSeparators(): React.Node {
4142
const exampleProps = {
4243
ItemSeparatorComponent: Separator('lightgreen', 'green'),
4344
};
44-
const ref = React.useRef(null);
45+
const ref = React.useRef<$FlowFixMe>(null);
4546

4647
return <BaseFlatListExample ref={ref} exampleProps={exampleProps} />;
4748
}

0 commit comments

Comments
 (0)