From ff14ff3d92b2c32f851ee8d25d8e8ea6dfe2ec9e Mon Sep 17 00:00:00 2001
From: Pieter Vanderwerff <pieterv@fb.com>
Date: Fri, 23 Sep 2022 15:18:54 -0700
Subject: [PATCH] Add explicit React useState annotations in xplat/js

Reviewed By: SamChou19815

Differential Revision: D39756144

fbshipit-source-id: d34c86b62e82e771723714fb7896058b7f27670f
---
 Libraries/Inspector/DevtoolsOverlay.js        | 15 +++++---
 .../js/examples/Pressable/PressableExample.js |  8 ++--
 .../examples/ScrollView/ScrollViewExample.js  | 38 ++++++++++++-------
 3 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/Libraries/Inspector/DevtoolsOverlay.js b/Libraries/Inspector/DevtoolsOverlay.js
index a4c780add9ac9c..59df46ab2992fb 100644
--- a/Libraries/Inspector/DevtoolsOverlay.js
+++ b/Libraries/Inspector/DevtoolsOverlay.js
@@ -8,16 +8,17 @@
  * @flow
  */
 
-import ElementBox from './ElementBox';
-import * as React from 'react';
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {HostRef} from './getInspectorDataForViewAtPoint';
+
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import Dimensions from '../Utilities/Dimensions';
-const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
+import ElementBox from './ElementBox';
+import * as React from 'react';
 
-import type {HostRef} from './getInspectorDataForViewAtPoint';
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 
 const {useEffect, useState, useCallback, useRef} = React;
 
@@ -28,7 +29,9 @@ export default function DevtoolsOverlay({
 }: {
   inspectedView: ?HostRef,
 }): React.Node {
-  const [inspected, setInspected] = useState(null);
+  const [inspected, setInspected] = useState<null | {
+    frame: {height: any, left: any, top: any, width: any},
+  }>(null);
   const [isInspecting, setIsInspecting] = useState(false);
   const devToolsAgentRef = useRef(null);
 
diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js
index e7a32024c193c5..bc3689ba57706c 100644
--- a/packages/rn-tester/js/examples/Pressable/PressableExample.js
+++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js
@@ -10,14 +10,14 @@
 
 import * as React from 'react';
 import {
+  Alert,
   Animated,
   Image,
+  Platform,
   Pressable,
   StyleSheet,
   Text,
-  Platform,
   View,
-  Alert,
 } from 'react-native';
 import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
 
@@ -101,7 +101,7 @@ function PressableAriaLabel() {
   );
 }
 function PressableFeedbackEvents() {
-  const [eventLog, setEventLog] = useState([]);
+  const [eventLog, setEventLog] = useState<Array<string>>([]);
 
   function appendEvent(eventName: string) {
     const limit = 6;
@@ -137,7 +137,7 @@ function PressableFeedbackEvents() {
 }
 
 function PressableDelayEvents() {
-  const [eventLog, setEventLog] = useState([]);
+  const [eventLog, setEventLog] = useState<Array<string>>([]);
 
   function appendEvent(eventName: string) {
     const limit = 6;
diff --git a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
index eb34fc30fe8760..02ae2f9f33aada 100644
--- a/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js
@@ -8,26 +8,24 @@
  * @format
  */
 
-import * as React from 'react';
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 
+import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
+import nullthrows from 'nullthrows';
+import * as React from 'react';
+import {useCallback, useState} from 'react';
 import {
   Platform,
+  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
+  TextInput,
   TouchableOpacity,
   View,
-  TextInput,
-  RefreshControl,
 } from 'react-native';
 
-import nullthrows from 'nullthrows';
-
-import {useState, useCallback} from 'react';
-import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
-import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
-
 class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
   state: {scrollEnabled: boolean} = {
     scrollEnabled: true,
@@ -570,7 +568,7 @@ const SnapToOptions = () => {
   const snapToAlignmentModes = ['start', 'center', 'end'];
   const [snapToEnd, setSnapToEnd] = useState(true);
   const [snapToInterval, setSnapToInterval] = useState(0);
-  const [snapToOffsets, setSnapToOffsets] = useState([]);
+  const [snapToOffsets, setSnapToOffsets] = useState<Array<number>>([]);
   const [snapToStart, setSnapToStart] = useState(true);
 
   return (
@@ -655,7 +653,12 @@ const ScrollToOptions = () => {
 };
 
 const ScrollIndicatorExample = () => {
-  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState(null);
+  const [scrollIndicatorInsets, setScrollIndicatorInsets] = useState<null | {
+    bottom: number,
+    left: number,
+    right: number,
+    top: number,
+  }>(null);
   const [showsHorizontalScrollIndic, setShowsHorizontalScrollIndic] =
     useState(true);
   const [showsVerticalScrollIndic, setShowsVerticalScrollIndic] =
@@ -1101,8 +1104,15 @@ const DecelerationRateExample = () => {
 
 const ContentExample = () => {
   const [canCancelContentTouches, setCanCancelContentTouches] = useState(false);
-  const [contentInset, setContentInset] = useState(null);
-  const [contentContainerStyle, setContentContainerStyle] = useState(null);
+  const [contentInset, setContentInset] = useState<null | {
+    bottom: number,
+    left: number,
+    right: number,
+    top: number,
+  }>(null);
+  const [contentContainerStyle, setContentContainerStyle] = useState<null | {
+    backgroundColor: string,
+  }>(null);
   const [contentInsetAdjustmentBehavior, setContentInsetAdjustmentBehavior] =
     useState('never');
   return (