Add missing class annotations xplat/js

Reviewed By: SamChou19815

Differential Revision: D38373443

fbshipit-source-id: 1222c4845ebd6b72bd6f54af1a27cf8542dd883a

IntegrationTests/AccessibilityManagerTest.js

@@ -16,7 +16,7 @@ import * as React from 'react';
 const {TestModule} = NativeModules;
 
 class AccessibilityManagerTest extends React.Component<{...}> {
-  componentDidMount() {
+  componentDidMount(): void {
     invariant(
       NativeAccessibilityManager,
       "NativeAccessibilityManager doesn't exist",

IntegrationTests/GlobalEvalWithSourceUrlTest.js

@@ -20,7 +20,7 @@ const {View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
 class GlobalEvalWithSourceUrlTest extends React.Component<{...}> {
-  componentDidMount() {
+  componentDidMount(): void {
     if (typeof global.globalEvalWithSourceUrl !== 'function') {
       throw new Error(
         'Expected to find globalEvalWithSourceUrl function on global object but found ' +

IntegrationTests/ImageSnapshotTest.js

@@ -16,7 +16,7 @@ const {Image} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
 class ImageSnapshotTest extends React.Component<{...}> {
-  componentDidMount() {
+  componentDidMount(): void {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }

IntegrationTests/IntegrationTestsApp.js

@@ -46,11 +46,11 @@ require('./LoggingTestModule');
 type Test = any;
 
 class IntegrationTestsApp extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: {test: ?Test} = {
     test: (null: ?Test),
   };
 
-  render() {
+  render(): React.Node {
     if (this.state.test) {
       return (
         <ScrollView>

IntegrationTests/SimpleSnapshotTest.js

@@ -17,7 +17,7 @@ const {StyleSheet, View} = ReactNative;
 const {TestModule} = ReactNative.NativeModules;
 
 class SimpleSnapshotTest extends React.Component<{...}> {
-  componentDidMount() {
+  componentDidMount(): void {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }

IntegrationTests/SyncMethodTest.js

@@ -17,7 +17,7 @@ const {View} = ReactNative;
 const {TestModule, RNTesterTestModule} = ReactNative.NativeModules;
 
 class SyncMethodTest extends React.Component<{...}> {
-  componentDidMount() {
+  componentDidMount(): void {
     if (
       RNTesterTestModule.echoString('test string value') !== 'test string value'
     ) {

IntegrationTests/TimersTest.js

@@ -253,7 +253,7 @@ class TimersTest extends React.Component<Props, State> {
     );
   }
 
-  _incrementInterval() {
+  _incrementInterval(): void {
     if (this.state.count > 3) {
       throw new Error('interval incremented past end.');
     }

IntegrationTests/WebSocketTest.js

@@ -69,11 +69,11 @@ class WebSocketTest extends React.Component<{...}, State> {
     });
   };
 
-  _socketIsConnected = () => {
+  _socketIsConnected = (): boolean => {
     return this.state.socketState === 1; //'OPEN'
   };
 
-  _socketIsDisconnected = () => {
+  _socketIsDisconnected = (): boolean => {
     return this.state.socketState === 3; //'CLOSED'
   };
 
@@ -106,7 +106,7 @@ class WebSocketTest extends React.Component<{...}, State> {
     this._sendText(this.state.testMessage);
   };
 
-  _receivedTestExpectedResponse = () => {
+  _receivedTestExpectedResponse = (): boolean => {
     return this.state.lastMessage === this.state.testExpectedResponse;
   };
 

Libraries/Animated/AnimatedEvent.js

@@ -177,7 +177,7 @@ class AnimatedEvent {
     this._listeners = this._listeners.filter(listener => listener !== callback);
   }
 
-  __attach(viewRef: any, eventName: string) {
+  __attach(viewRef: any, eventName: string): void {
     invariant(
       this.__isNative,
       'Only native driven events need to be attached.',
@@ -191,7 +191,7 @@ class AnimatedEvent {
     );
   }
 
-  __detach(viewTag: any, eventName: string) {
+  __detach(viewTag: any, eventName: string): void {
     invariant(
       this.__isNative,
       'Only native driven events need to be detached.',

Libraries/Animated/createAnimatedComponent.js

@@ -140,7 +140,7 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     // components. If you want to animate a composite component, you need to
     // re-render it. In this case, we have a fallback that uses forceUpdate.
     // This fallback is also called in Fabric.
-    _animatedPropsCallback = () => {
+    _animatedPropsCallback = (): void => {
       if (this._component == null) {
         // AnimatedProps is created in will-mount because it's used in render.
         // But this callback may be invoked before mount in async mode,
@@ -192,7 +192,7 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       }
     }
 
-    _setComponentRef = setAndForwardRef({
+    _setComponentRef: (ref: React.ElementRef<any>) => void = setAndForwardRef({
       getForwardedRef: () => this.props.forwardedRef,
       setLocalRef: ref => {
         this._prevComponent = this._component;
@@ -200,7 +200,7 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
       },
     });
 
-    render() {
+    render(): React.Node {
       const animatedProps =
         this._propsAnimated.__getValue(this._initialAnimatedProps) || {};
       const {style = {}, ...props} = animatedProps;

Libraries/Animated/nodes/AnimatedNode.js

@@ -53,7 +53,7 @@ class AnimatedNode {
     this._listeners = {};
   }
 
-  __makeNative(platformConfig: ?PlatformConfig) {
+  __makeNative(platformConfig: ?PlatformConfig): void {
     if (!this.__isNative) {
       throw new Error('This node cannot be made a "native" animated node');
     }

Libraries/Animated/nodes/AnimatedStyle.js

@@ -34,7 +34,10 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   // Recursively get values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetValues(style: any, initialStyle: ?Object) {
+  _walkStyleAndGetValues(
+    style: any,
+    initialStyle: ?Object,
+  ): {[string]: any | {...}} {
     const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];
@@ -63,7 +66,7 @@ class AnimatedStyle extends AnimatedWithChildren {
   }
 
   // Recursively get animated values for nested styles (like iOS's shadowOffset)
-  _walkStyleAndGetAnimatedValues(style: any) {
+  _walkStyleAndGetAnimatedValues(style: any): {[string]: any | {...}} {
     const updatedStyle: {[string]: any | {...}} = {};
     for (const key in style) {
       const value = style[key];

Libraries/BatchedBridge/MessageQueue.js

@@ -241,7 +241,7 @@ class MessageQueue {
     params: mixed[],
     onFail: ?(...mixed[]) => void,
     onSucc: ?(...mixed[]) => void,
-  ) {
+  ): void {
     this.processCallbacks(moduleID, methodID, params, onFail, onSucc);
 
     this._queue[MODULE_IDS].push(moduleID);
@@ -427,7 +427,7 @@ class MessageQueue {
     Systrace.endEvent();
   }
 
-  __invokeCallback(cbID: number, args: mixed[]) {
+  __invokeCallback(cbID: number, args: mixed[]): void {
     this._lastFlush = Date.now();
     this._eventLoopStartTime = this._lastFlush;
 

Libraries/Blob/FileReader.js

@@ -73,11 +73,11 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
     }
   }
 
-  readAsArrayBuffer() {
+  readAsArrayBuffer(): any {
     throw new Error('FileReader.readAsArrayBuffer is not implemented');
   }
 
-  readAsDataURL(blob: ?Blob) {
+  readAsDataURL(blob: ?Blob): void {
     this._aborted = false;
 
     if (blob == null) {
@@ -104,7 +104,7 @@ class FileReader extends (EventTarget(...READER_EVENTS): any) {
     );
   }
 
-  readAsText(blob: ?Blob, encoding: string = 'UTF-8') {
+  readAsText(blob: ?Blob, encoding: string = 'UTF-8'): void {
     this._aborted = false;
 
     if (blob == null) {

Libraries/Blob/URL.js

@@ -54,7 +54,7 @@ if (
 // Small subset from whatwg-url: https://github.com/jsdom/whatwg-url/tree/master/src
 // The reference code bloat comes from Unicode issues with URLs, so those won't work here.
 export class URLSearchParams {
-  _searchParams = [];
+  _searchParams: Array<Array<string>> = [];
 
   constructor(params: any) {
     if (typeof params === 'object') {
@@ -62,35 +62,36 @@ export class URLSearchParams {
     }
   }
 
-  append(key: string, value: string) {
+  append(key: string, value: string): void {
     this._searchParams.push([key, value]);
   }
 
-  delete(name: string) {
+  delete(name: string): void {
     throw new Error('URLSearchParams.delete is not implemented');
   }
 
-  get(name: string) {
+  get(name: string): void {
     throw new Error('URLSearchParams.get is not implemented');
   }
 
-  getAll(name: string) {
+  getAll(name: string): void {
     throw new Error('URLSearchParams.getAll is not implemented');
   }
 
-  has(name: string) {
+  has(name: string): void {
     throw new Error('URLSearchParams.has is not implemented');
   }
 
-  set(name: string, value: string) {
+  set(name: string, value: string): void {
     throw new Error('URLSearchParams.set is not implemented');
   }
 
-  sort() {
+  sort(): void {
     throw new Error('URLSearchParams.sort is not implemented');
   }
 
   // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[missing-local-annot]
   [Symbol.iterator]() {
     return this._searchParams[Symbol.iterator]();
   }

Libraries/Components/ScrollView/ScrollView.js

@@ -825,7 +825,7 @@ class ScrollView extends React.Component<Props, State> {
     }
   }
 
-  _setNativeRef = setAndForwardRef({
+  _setNativeRef: $FlowFixMe = setAndForwardRef({
     getForwardedRef: () => this.props.scrollViewRef,
     setLocalRef: ref => {
       this._scrollViewRef = ref;
@@ -1107,7 +1107,7 @@ class ScrollView extends React.Component<Props, State> {
     }
   };
 
-  _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe) {
+  _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe): $FlowFixMe {
     const child = childArray[index];
     return child && child.key;
   }
@@ -1204,7 +1204,7 @@ class ScrollView extends React.Component<Props, State> {
   _scrollViewRef: ?React.ElementRef<HostComponent<mixed>> = null;
 
   _innerViewRef: ?React.ElementRef<typeof View> = null;
-  _setInnerViewRef = setAndForwardRef({
+  _setInnerViewRef: $FlowFixMe = setAndForwardRef({
     getForwardedRef: () => this.props.innerViewRef,
     setLocalRef: ref => {
       this._innerViewRef = ref;

Libraries/Components/StatusBar/StatusBar.js

@@ -223,9 +223,9 @@ function createStackEntry(props: any): any {
  * `currentHeight` (Android only) The height of the status bar.
  */
 class StatusBar extends React.Component<Props> {
-  static _propsStack = [];
+  static _propsStack: Array<any> = [];
 
-  static _defaultProps = createStackEntry({
+  static _defaultProps: any = createStackEntry({
     backgroundColor:
       Platform.OS === 'android'
         ? NativeStatusBarManagerAndroid.getConstants()
@@ -309,7 +309,7 @@ class StatusBar extends React.Component<Props> {
    * @param color Background color.
    * @param animated Animate the style change.
    */
-  static setBackgroundColor(color: string, animated?: boolean) {
+  static setBackgroundColor(color: string, animated?: boolean): void {
     if (Platform.OS !== 'android') {
       console.warn('`setBackgroundColor` is only available on Android');
       return;

Libraries/Inspector/BoxInspector.js

@@ -49,7 +49,7 @@ class BoxInspector extends React.Component<$FlowFixMeProps> {
 }
 
 class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     const box = this.props.box;
     return (
       <View style={styles.box}>

Libraries/Inspector/InspectorPanel.js

@@ -120,7 +120,7 @@ type InspectorPanelButtonProps = $ReadOnly<{|
 |}>;
 
 class InspectorPanelButton extends React.Component<InspectorPanelButtonProps> {
-  render() {
+  render(): React.Node {
     return (
       <TouchableHighlight
         onPress={() => this.props.onClick(!this.props.pressed)}

Libraries/Inspector/NetworkOverlay.js

@@ -95,7 +95,11 @@ class NetworkOverlay extends React.Component<Props, State> {
   // scroll to the bottom as new network requests come in, or if the user has
   // intentionally scrolled away from the bottom - to instead flash the scroll bar
   // and keep the current position
-  _requestsListViewScrollMetrics = {
+  _requestsListViewScrollMetrics: {
+    contentLength: number,
+    offset: number,
+    visibleLength: number,
+  } = {
     offset: 0,
     visibleLength: 0,
     contentLength: 0,
@@ -363,7 +367,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     );
   };
 
-  _renderItemDetail(id: number) {
+  _renderItemDetail(id: number): React.Node {
     const requestItem = this.state.requests[id];
     const details = Object.keys(requestItem).map(key => {
       if (key === 'id') {

Libraries/Linking/Linking.js

@@ -123,7 +123,7 @@ class Linking extends NativeEventEmitter<LinkingEventDefinitions> {
     }
   }
 
-  _validateURL(url: string) {
+  _validateURL(url: string): void {
     invariant(
       typeof url === 'string',
       'Invalid URL: should be a string. Was: ' + url,

Libraries/Lists/CellRenderMask.js

@@ -45,7 +45,7 @@ export class CellRenderMask {
     return this._regions;
   }
 
-  addCells(cells: {first: number, last: number}) {
+  addCells(cells: {first: number, last: number}): void {
     invariant(
       cells.first >= 0 &&
         cells.first < this._numCells &&

Libraries/Lists/FillRateHelper.js

@@ -49,12 +49,12 @@ let _sampleRate = DEBUG ? 1 : null;
  * `SceneTracker.getActiveScene` to determine the context of the events.
  */
 class FillRateHelper {
-  _anyBlankStartTime = (null: ?number);
+  _anyBlankStartTime: ?number = null;
   _enabled = false;
   _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
-  _info = new Info();
-  _mostlyBlankStartTime = (null: ?number);
-  _samplesStartTime = (null: ?number);
+  _info: Info = new Info();
+  _mostlyBlankStartTime: ?number = null;
+  _samplesStartTime: ?number = null;
 
   static addListener(callback: FillRateInfo => void): {
     remove: () => void,

Libraries/LogBox/Data/LogBoxData.js

@@ -401,7 +401,7 @@ export function withSubscription(
   WrappedComponent: SubscribedComponent,
 ): React.AbstractComponent<{||}> {
   class LogBoxStateSubscription extends React.Component<Props, State> {
-    static getDerivedStateFromError() {
+    static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};
     }
 
@@ -413,7 +413,7 @@ export function withSubscription(
 
     _subscription: ?Subscription;
 
-    state = {
+    state: State = {
       logs: new Set(),
       isDisabled: false,
       hasError: false,

Libraries/PushNotificationIOS/PushNotificationIOS.js

@@ -118,7 +118,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#presentlocalnotification
    */
-  static presentLocalNotification(details: Object) {
+  static presentLocalNotification(details: Object): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -131,7 +131,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#schedulelocalnotification
    */
-  static scheduleLocalNotification(details: Object) {
+  static scheduleLocalNotification(details: Object): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -144,7 +144,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#cancelalllocalnotifications
    */
-  static cancelAllLocalNotifications() {
+  static cancelAllLocalNotifications(): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -198,7 +198,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#setapplicationiconbadgenumber
    */
-  static setApplicationIconBadgeNumber(number: number) {
+  static setApplicationIconBadgeNumber(number: number): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -211,7 +211,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#getapplicationiconbadgenumber
    */
-  static getApplicationIconBadgeNumber(callback: Function) {
+  static getApplicationIconBadgeNumber(callback: Function): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -224,7 +224,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#cancellocalnotification
    */
-  static cancelLocalNotifications(userInfo: Object) {
+  static cancelLocalNotifications(userInfo: Object): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -237,7 +237,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#getscheduledlocalnotifications
    */
-  static getScheduledLocalNotifications(callback: Function) {
+  static getScheduledLocalNotifications(callback: Function): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -251,7 +251,10 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#addeventlistener
    */
-  static addEventListener(type: PushNotificationEventName, handler: Function) {
+  static addEventListener(
+    type: PushNotificationEventName,
+    handler: Function,
+  ): void {
     invariant(
       type === 'notification' ||
         type === 'register' ||
@@ -301,7 +304,7 @@ class PushNotificationIOS {
   static removeEventListener(
     type: PushNotificationEventName,
     handler: Function,
-  ) {
+  ): void {
     invariant(
       type === 'notification' ||
         type === 'register' ||
@@ -362,7 +365,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#abandonpermissions
    */
-  static abandonPermissions() {
+  static abandonPermissions(): void {
     invariant(
       NativePushNotificationManagerIOS,
       'PushNotificationManager is not available.',
@@ -376,7 +379,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#checkpermissions
    */
-  static checkPermissions(callback: Function) {
+  static checkPermissions(callback: Function): void {
     invariant(typeof callback === 'function', 'Must provide a valid callback');
     invariant(
       NativePushNotificationManagerIOS,
@@ -463,7 +466,7 @@ class PushNotificationIOS {
    *
    * See https://reactnative.dev/docs/pushnotificationios#finish
    */
-  finish(fetchResult: string) {
+  finish(fetchResult: string): void {
     if (
       !this._isRemote ||
       !this._notificationId ||

Libraries/Utilities/__tests__/setAndForwardRef-test.js

@@ -21,12 +21,12 @@ describe('setAndForwardRef', () => {
   let outerFuncCalled: ?boolean = false;
 
   class ForwardedComponent extends React.Component<{||}> {
-    testFunc() {
+    testFunc(): any {
       innerFuncCalled = true;
       return true;
     }
 
-    render() {
+    render(): any {
       return null;
     }
   }
@@ -38,7 +38,7 @@ describe('setAndForwardRef', () => {
 
   class TestComponent extends React.Component<Props> {
     _nativeRef: ?React.ElementRef<typeof ForwardedComponent> = null;
-    _setNativeRef = setAndForwardRef({
+    _setNativeRef: (ref: React.ElementRef<any>) => void = setAndForwardRef({
       getForwardedRef: () => this.props.forwardedRef,
       setLocalRef: ref => {
         this._nativeRef = ref;
@@ -51,7 +51,7 @@ describe('setAndForwardRef', () => {
       }
     }
 
-    render() {
+    render(): React.Node {
       return <ForwardedComponent ref={this._setNativeRef} />;
     }
   }
@@ -111,7 +111,7 @@ describe('setAndForwardRef', () => {
         /* eslint-enable react/no-string-refs */
       }
 
-      render() {
+      render(): React.Node {
         /**
          * Can't directly pass the test component to `ReactTestRenderer.create`,
          * otherwise it will throw. See:

Libraries/Utilities/__tests__/useMergeRefs-test.js

@@ -40,7 +40,7 @@ class TestViewInstance {
     return testID == null ? null : new TestViewInstance(testID);
   }
 
-  static named(name: string) {
+  static named(name: string): $FlowFixMe {
     // $FlowIssue[prop-missing] - Flow does not support type augmentation.
     return expect.testViewInstance(name);
   }

Libraries/Utilities/__tests__/useRefEffect-test.js

@@ -45,7 +45,7 @@ class TestEffect {
     this.name = name;
     this.key = key;
   }
-  static called(name: string, key: ?string) {
+  static called(name: string, key: ?string): $FlowFixMe {
     // $FlowIssue[prop-missing] - Flow does not support type augmentation.
     return expect.effect(name, key);
   }
@@ -61,7 +61,7 @@ class TestEffectCleanup {
     this.name = name;
     this.key = key;
   }
-  static called(name: string, key: ?string) {
+  static called(name: string, key: ?string): $FlowFixMe {
     // $FlowIssue[prop-missing] - Flow does not support type augmentation.
     return expect.effectCleanup(name, key);
   }

Libraries/Utilities/createPerformanceLogger.js

@@ -137,31 +137,31 @@ class PerformanceLogger implements IPerformanceLogger {
     this._closed = true;
   }
 
-  currentTimestamp() {
+  currentTimestamp(): number {
     return getCurrentTimestamp();
   }
 
-  getExtras() {
+  getExtras(): {[key: string]: ?ExtraValue} {
     return this._extras;
   }
 
-  getPoints() {
+  getPoints(): {[key: string]: ?number} {
     return this._points;
   }
 
-  getPointExtras() {
+  getPointExtras(): {[key: string]: ?Extras} {
     return this._pointExtras;
   }
 
-  getTimespans() {
+  getTimespans(): {[key: string]: ?Timespan} {
     return this._timespans;
   }
 
-  hasTimespan(key: string) {
+  hasTimespan(key: string): boolean {
     return !!this._timespans[key];
   }
 
-  isClosed() {
+  isClosed(): boolean {
     return this._closed;
   }
 

ReactAndroid/src/androidTest/js/ScrollViewTestModule.js

@@ -43,7 +43,7 @@ type ItemProps = $ReadOnly<{|
 type ItemState = {||};
 
 class Item extends React.Component<ItemProps, ItemState> {
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this.props.onPress}>
         <View style={styles.item_container}>

ReactAndroid/src/androidTest/js/UIManagerTestModule.js

@@ -20,7 +20,7 @@ import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
 
 type FlexTestAppProps = $ReadOnly<{||}>;
 class FlexTestApp extends React.Component<FlexTestAppProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         style={FlexTestAppStyles.container}
@@ -58,7 +58,7 @@ const FlexTestAppStyles = StyleSheet.create({
 
 type FlexWithTextProps = $ReadOnly<{||}>;
 class FlexWithText extends React.Component<FlexWithTextProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         style={FlexWithTextStyles.container}
@@ -91,7 +91,7 @@ const FlexWithTextStyles = StyleSheet.create({
 
 type AbsolutePositionTestAppProps = $ReadOnly<{||}>;
 class AbsolutePositionTestApp extends React.Component<AbsolutePositionTestAppProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         style={AbsolutePositionTestAppStyles.absolute}
@@ -114,7 +114,7 @@ const AbsolutePositionTestAppStyles = StyleSheet.create({
 
 type AbsolutePositionBottomRightTestAppProps = $ReadOnly<{||}>;
 class AbsolutePositionBottomRightTestApp extends React.Component<AbsolutePositionBottomRightTestAppProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         style={AbsolutePositionBottomRightTestAppStyles.container}
@@ -147,7 +147,7 @@ type CenteredTextViewProps = $ReadOnly<{|
   text?: ?string,
 |}>;
 class CenteredTextView extends React.Component<CenteredTextViewProps> {
-  render() {
+  render(): React.Node {
     return (
       <View collapsable={false}>
         <View style={CenteredTextViewStyles.parent} collapsable={false}>
@@ -184,7 +184,7 @@ class UpdatePositionInListTestApp extends React.Component<
   UpdatePositionInListTestAppProps,
   UpdatePositionInListTestAppState,
 > {
-  state = {
+  state: UpdatePositionInListTestAppState = {
     active: false,
   };
 
@@ -195,7 +195,7 @@ class UpdatePositionInListTestApp extends React.Component<
     flushUpdatePositionInList = () => this.setState({active: true});
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View collapsable={false} testID="container">
         <View

packages/rn-tester/js/RNTesterApp.ios.js

@@ -8,6 +8,8 @@
  * @flow
  */
 
+import type {Node} from 'react';
+
 import {AppRegistry} from 'react-native';
 import React from 'react';
 
@@ -31,7 +33,7 @@ RNTesterList.Components.concat(RNTesterList.APIs).forEach(
     const ExampleModule = Example.module;
     if (ExampleModule.displayName) {
       class Snapshotter extends React.Component<{...}> {
-        render() {
+        render(): Node {
           return (
             <SnapshotViewIOS>
               <RNTesterModuleContainer

packages/rn-tester/js/components/createExamplePage.js

@@ -20,7 +20,7 @@ const createExamplePage = function (
   exampleModule: RNTesterModule,
 ): React.ComponentType<any> {
   class ExamplePage extends React.Component<{...}> {
-    render() {
+    render(): React.Node {
       return <RNTesterModuleContainer module={exampleModule} />;
     }
   }

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -223,7 +223,7 @@ class CheckboxExample extends React.Component<
     checkboxState: boolean | 'mixed',
   },
 > {
-  state = {
+  state: {checkboxState: boolean | 'mixed'} = {
     checkboxState: true,
   };
 
@@ -242,7 +242,7 @@ class CheckboxExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableOpacity
         onPress={this._onCheckboxPress}
@@ -262,7 +262,7 @@ class SwitchExample extends React.Component<
     switchState: boolean,
   },
 > {
-  state = {
+  state: {switchState: boolean} = {
     switchState: true,
   };
 
@@ -274,7 +274,7 @@ class SwitchExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableOpacity
         onPress={this._onSwitchToggle}
@@ -303,7 +303,7 @@ class SelectionExample extends React.Component<
     current: React.ElementRef<typeof TouchableOpacity> | null,
   };
 
-  state = {
+  state: {isEnabled: boolean, isSelected: boolean} = {
     isSelected: true,
     isEnabled: false,
   };
@@ -375,7 +375,7 @@ class ExpandableElementExample extends React.Component<
     expandState: boolean,
   },
 > {
-  state = {
+  state: {expandState: boolean} = {
     expandState: false,
   };
 
@@ -387,7 +387,7 @@ class ExpandableElementExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableOpacity
         onPress={this._onElementPress}
@@ -408,7 +408,11 @@ class NestedCheckBox extends React.Component<
     checkbox3: boolean | 'mixed',
   },
 > {
-  state = {
+  state: {
+    checkbox1: boolean | 'mixed',
+    checkbox2: boolean | 'mixed',
+    checkbox3: boolean | 'mixed',
+  } = {
     checkbox1: false,
     checkbox2: false,
     checkbox3: false,
@@ -460,7 +464,7 @@ class NestedCheckBox extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TouchableOpacity
@@ -881,13 +885,13 @@ class FakeSliderExample extends React.Component<{}, FakeSliderExampleState> {
 }
 
 class AnnounceForAccessibility extends React.Component<{}> {
-  _handleOnPress = () =>
+  _handleOnPress = (): TimeoutID =>
     setTimeout(
       () => AccessibilityInfo.announceForAccessibility('Announcement Test'),
       1000,
     );
 
-  _handleOnPressQueued = () =>
+  _handleOnPressQueued = (): TimeoutID =>
     setTimeout(
       () =>
         AccessibilityInfo.announceForAccessibilityWithOptions(
@@ -1052,11 +1056,11 @@ class EnabledExample extends React.Component<
     isEnabled: boolean,
   },
 > {
-  state = {
+  state: {isEnabled: boolean} = {
     isEnabled: false,
   };
   _subscription: EventSubscription;
-  componentDidMount() {
+  componentDidMount(): null | Promise<mixed> {
     this._subscription = AccessibilityInfo.addEventListener(
       this.props.eventListener,
       this._handleToggled,

packages/rn-tester/js/examples/Accessibility/AccessibilityIOSExample.js

@@ -17,7 +17,7 @@ const RNTesterBlock = require('../../components/RNTesterBlock');
 
 type Props = $ReadOnly<{||}>;
 class AccessibilityIOSExample extends React.Component<Props> {
-  render() {
+  render(): React.Node {
     return (
       <RNTesterBlock title="Accessibility iOS APIs">
         <View

packages/rn-tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {NativeMethods} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+
 const React = require('react');
 const {
   ActionSheetIOS,
@@ -29,11 +31,11 @@ const DISABLED_BUTTON_INDICES = [1, 2];
 type Props = $ReadOnly<{||}>;
 type State = {|clicked: string|};
 class ActionSheetExample extends React.Component<Props, State> {
-  state = {
+  state: State = {
     clicked: 'none',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showActionSheet} style={style.button}>
@@ -62,11 +64,11 @@ class ActionSheetTintExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {clicked: string} = {
     clicked: 'none',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showActionSheet} style={style.button}>
@@ -96,11 +98,11 @@ class ActionSheetCancelButtonTintExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {clicked: string} = {
     clicked: 'none',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showActionSheet} style={style.button}>
@@ -131,13 +133,13 @@ class ActionSheetAnchorExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {clicked: string} = {
     clicked: 'none',
   };
 
-  anchorRef = React.createRef();
+  anchorRef: {current: null | $Exact<NativeMethods>} = React.createRef();
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View style={style.anchorRow}>
@@ -174,11 +176,11 @@ class ActionSheetAnchorExample extends React.Component<
 }
 
 class ActionSheetDisabledExample extends React.Component<Props, State> {
-  state = {
+  state: State = {
     clicked: 'none',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showActionSheet} style={style.button}>
@@ -205,7 +207,7 @@ class ActionSheetDisabledExample extends React.Component<Props, State> {
 }
 
 class ActionSheetDismissExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showAndDismissActionSheet} style={style.button}>
@@ -236,11 +238,11 @@ class ShareActionSheetExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {text: string} = {
     text: '',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showShareActionSheet} style={style.button}>
@@ -277,11 +279,11 @@ class ShareScreenshotExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {text: string} = {
     text: '',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text onPress={this.showShareActionSheet} style={style.button}>
@@ -322,13 +324,13 @@ class ShareScreenshotAnchorExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {text: string} = {
     text: '',
   };
 
-  anchorRef = React.createRef();
+  anchorRef: {current: null | $Exact<NativeMethods>} = React.createRef();
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View style={style.anchorRow}>

packages/rn-tester/js/examples/Alert/AlertIOSExample.js

@@ -53,7 +53,7 @@ class PromptOptions extends React.Component<Props, State> {
     };
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text style={styles.promptValue}>

packages/rn-tester/js/examples/AppState/AppStateExample.js

@@ -21,7 +21,12 @@ class AppStateSubscription extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state: {
+    appState: ?string,
+    eventsDetected: Array<string>,
+    memoryWarnings: number,
+    previousAppStates: Array<?(any | string)>,
+  } = {
     appState: AppState.currentState,
     previousAppStates: [],
     memoryWarnings: 0,
@@ -76,7 +81,7 @@ class AppStateSubscription extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     if (this.props.showMemoryWarnings) {
       return (
         <View>

packages/rn-tester/js/examples/Appearance/AppearanceExample.js

@@ -20,7 +20,7 @@ class ColorSchemeSubscription extends React.Component<
 > {
   _subscription: ?EventSubscription;
 
-  state = {
+  state: {colorScheme: ?string, ...} = {
     colorScheme: Appearance.getColorScheme(),
   };
 
@@ -37,7 +37,7 @@ class ColorSchemeSubscription extends React.Component<
     this._subscription?.remove();
   }
 
-  render() {
+  render(): React.Node {
     return (
       <RNTesterThemeContext.Consumer>
         {theme => {

packages/rn-tester/js/examples/Dimensions/DimensionsExample.js

@@ -16,7 +16,7 @@ class DimensionsSubscription extends React.Component<
   {dim: string, ...},
   {dims: Object, ...},
 > {
-  state = {
+  state: {dims: any, ...} = {
     dims: Dimensions.get(this.props.dim),
   };
 
@@ -37,7 +37,7 @@ class DimensionsSubscription extends React.Component<
     this._dimensionsSubscription?.remove();
   }
 
-  render() {
+  render(): React.Node {
     return <Text>{JSON.stringify(this.state.dims, null, 2)}</Text>;
   }
 }

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -43,7 +43,7 @@ type BlobImageProps = $ReadOnly<{|
 |}>;
 
 class BlobImage extends React.Component<BlobImageProps, BlobImageState> {
-  state = {
+  state: BlobImageState = {
     objectURL: null,
   };
 
@@ -56,7 +56,7 @@ class BlobImage extends React.Component<BlobImageProps, BlobImageState> {
     })();
   }
 
-  render() {
+  render(): React.Node {
     return this.state.objectURL !== null ? (
       <Image source={{uri: this.state.objectURL}} style={styles.base} />
     ) : (
@@ -75,7 +75,7 @@ class BlobImageExample extends React.Component<
   BlobImageExampleProps,
   BlobImageExampleState,
 > {
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.horizontal}>
         {this.props.urls.map(url => (
@@ -102,7 +102,7 @@ class NetworkImageCallbackExample extends React.Component<
   NetworkImageCallbackExampleProps,
   NetworkImageCallbackExampleState,
 > {
-  state = {
+  state: NetworkImageCallbackExampleState = {
     events: [],
     startLoadPrefetched: false,
     mountTime: Date.now(),
@@ -123,7 +123,7 @@ class NetworkImageCallbackExample extends React.Component<
     this.setState({imageHash: Date.now()});
   };
 
-  render() {
+  render(): React.Node {
     const {mountTime} = this.state;
     return (
       <View>
@@ -233,13 +233,13 @@ class NetworkImageExample extends React.Component<
   NetworkImageExampleProps,
   NetworkImageExampleState,
 > {
-  state = {
+  state: NetworkImageExampleState = {
     error: null,
     loading: false,
     progress: [],
   };
 
-  render() {
+  render(): React.Node {
     return this.state.error != null ? (
       <Text>{this.state.error}</Text>
     ) : (
@@ -283,7 +283,7 @@ class ImageSizeExample extends React.Component<
   ImageSizeExampleProps,
   ImageSizeExampleState,
 > {
-  state = {
+  state: ImageSizeExampleState = {
     width: 0,
     height: 0,
   };
@@ -294,7 +294,7 @@ class ImageSizeExample extends React.Component<
     });
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View style={{flexDirection: 'row'}}>
         <Image
@@ -326,7 +326,7 @@ class MultipleSourcesExample extends React.Component<
   MultipleSourcesExampleProps,
   MultipleSourcesExampleState,
 > {
-  state = {
+  state: MultipleSourcesExampleState = {
     width: 30,
     height: 30,
   };
@@ -351,7 +351,7 @@ class MultipleSourcesExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
@@ -397,7 +397,7 @@ class LoadingIndicatorSourceExample extends React.Component<
   LoadingIndicatorSourceExampleProps,
   LoadingIndicatorSourceExampleState,
 > {
-  state = {
+  state: LoadingIndicatorSourceExampleState = {
     imageHash: Date.now(),
   };
 
@@ -407,11 +407,11 @@ class LoadingIndicatorSourceExample extends React.Component<
     });
   };
 
-  loaderGif = {
+  loaderGif: {uri: string} = {
     uri: 'https://media1.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif',
   };
 
-  render() {
+  render(): React.Node {
     const loadingImage = {
       uri: `https://www.facebook.com/ads/pics/successstories.png?hash=${this.state.imageHash}`,
     };
@@ -447,7 +447,7 @@ class OnLayoutExample extends React.Component<
   OnLayoutExampleProps,
   OnLayoutExampleState,
 > {
-  state = {
+  state: OnLayoutExampleState = {
     width: 30,
     height: 30,
     layoutHandlerMessage: 'No Message',
@@ -482,7 +482,7 @@ class OnLayoutExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text>Adjust the image size to trigger the OnLayout handler.</Text>
@@ -536,7 +536,7 @@ class OnPartialLoadExample extends React.Component<
   OnPartialLoadExampleProps,
   OnPartialLoadExampleState,
 > {
-  state = {
+  state: OnPartialLoadExampleState = {
     hasLoaded: false,
   };
 
@@ -546,7 +546,7 @@ class OnPartialLoadExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text>

packages/rn-tester/js/examples/InputAccessoryView/InputAccessoryViewExample.js

@@ -24,7 +24,7 @@ const {
 
 type MessageProps = $ReadOnly<{||}>;
 class Message extends React.PureComponent<MessageProps> {
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.textBubbleBackground}>
         <Text style={styles.text}>Text Message</Text>
@@ -36,9 +36,9 @@ class Message extends React.PureComponent<MessageProps> {
 type TextInputProps = $ReadOnly<{||}>;
 type TextInputState = {|text: string|};
 class TextInputBar extends React.PureComponent<TextInputProps, TextInputState> {
-  state = {text: ''};
+  state: TextInputState = {text: ''};
 
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.textInputContainer}>
         <TextInput
@@ -63,7 +63,7 @@ class TextInputBar extends React.PureComponent<TextInputProps, TextInputState> {
 const BAR_HEIGHT = 44;
 type InputAccessoryProps = $ReadOnly<{||}>;
 class InputAccessoryViewExample extends React.Component<InputAccessoryProps> {
-  render() {
+  render(): React.Node {
     return (
       <>
         <ScrollView style={styles.fill} keyboardDismissMode="interactive">

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

@@ -49,7 +49,7 @@ function shuffleArray(array: Array<ExampleViewSpec>) {
 }
 
 class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
-  state = {
+  state: AddRemoveExampleState = {
     views: [],
     nextKey: 1,
   };
@@ -96,7 +96,7 @@ class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
     this.setState(state => ({views: shuffleArray(state.views)}));
   };
 
-  render() {
+  render(): React.Node {
     const views = this.state.views.map(({key}) => (
       <View
         key={key}
@@ -151,7 +151,7 @@ class ReparentingExample extends React.Component<
   {...},
   ReparentingExampleState,
 > {
-  state = {
+  state: ReparentingExampleState = {
     hasBorder: false,
   };
 
@@ -172,7 +172,7 @@ class ReparentingExample extends React.Component<
     this.setState(state => ({hasBorder: !state.hasBorder}));
   };
 
-  render() {
+  render(): React.Node {
     const parentStyle = this.state.hasBorder
       ? {borderWidth: 5, borderColor: 'red'}
       : {};
@@ -214,7 +214,7 @@ type CrossFadeExampleState = {|
 |};
 
 class CrossFadeExample extends React.Component<{...}, CrossFadeExampleState> {
-  state = {
+  state: CrossFadeExampleState = {
     toggled: false,
   };
 
@@ -225,7 +225,7 @@ class CrossFadeExample extends React.Component<{...}, CrossFadeExampleState> {
     this.setState(state => ({toggled: !state.toggled}));
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.container}>
         <TouchableOpacity onPress={this._onPressToggle}>
@@ -250,7 +250,7 @@ class LayoutUpdateExample extends React.Component<
   {...},
   LayoutUpdateExampleState,
 > {
-  state = {
+  state: LayoutUpdateExampleState = {
     width: 200,
     height: 100,
   };
@@ -285,7 +285,7 @@ class LayoutUpdateExample extends React.Component<
     this.timeout = setTimeout(() => this.setState({width: 100}), 500);
   };
 
-  render() {
+  render(): React.Node {
     const {width, height} = this.state;
 
     return (

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

@@ -81,7 +81,7 @@ class LayoutEventExample extends React.Component<Props, State> {
     this.setState({imageLayout: e.nativeEvent.layout});
   };
 
-  render() {
+  render(): React.Node {
     const viewStyle = [styles.view, this.state.viewStyle];
     const textLayout = this.state.textLayout || {width: '?', height: '?'};
     const imageLayout = this.state.imageLayout || {x: '?', y: '?'};

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

@@ -17,7 +17,7 @@ const React = require('react');
 const {StyleSheet, Text, View} = require('react-native');
 
 class Circle extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     const size = this.props.size || 20;
     const backgroundColor = this.props.bgColor || '#527fe4';
     return (
@@ -35,7 +35,7 @@ class Circle extends React.Component<$FlowFixMeProps> {
 }
 
 class CircleBlock extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     const circleStyle = {
       flexDirection: 'row',
       backgroundColor: '#f6f7f8',

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

@@ -26,7 +26,7 @@ const {
 const AnimatedSlider = Animated.createAnimatedComponent(Slider);
 
 class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
-  state = {
+  state: any | {js: AnimatedValue, native: AnimatedValue} = {
     native: new Animated.Value(0),
     js: new Animated.Value(0),
   };
@@ -54,7 +54,7 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
     }).start();
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this.onPress}>
         <View>
@@ -75,7 +75,7 @@ class Tester extends React.Component<$FlowFixMeProps, $FlowFixMeState> {
 }
 
 class ValueListenerExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {anim: AnimatedValue, progress: number} = {
     anim: new Animated.Value(0),
     progress: 0,
   };
@@ -102,7 +102,7 @@ class ValueListenerExample extends React.Component<{...}, $FlowFixMeState> {
     }).start();
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this._onPress}>
         <View>
@@ -124,7 +124,7 @@ class ValueListenerExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class LoopExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {value: AnimatedValue} = {
     value: new Animated.Value(0),
   };
 
@@ -138,7 +138,7 @@ class LoopExample extends React.Component<{...}, $FlowFixMeState> {
     ).start();
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.row}>
         <Animated.View
@@ -167,7 +167,7 @@ class InternalSettings extends React.Component<
   },
 > {
   _stallInterval: ?number;
-  render() {
+  render(): React.Node {
     return (
       <View>
         <RNTesterSettingSwitchRow
@@ -227,11 +227,11 @@ class InternalSettings extends React.Component<
 }
 
 class EventExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {anim: AnimatedValue} = {
     anim: new Animated.Value(0),
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Animated.View
@@ -282,7 +282,14 @@ class TrackingExample extends React.Component<
   $FlowFixMeProps,
   $FlowFixMeState,
 > {
-  state = {
+  state:
+    | any
+    | {
+        js: AnimatedValue,
+        native: AnimatedValue,
+        toJS: AnimatedValue,
+        toNative: AnimatedValue,
+      } = {
     native: new Animated.Value(0),
     toNative: new Animated.Value(0),
     js: new Animated.Value(0),
@@ -315,7 +322,10 @@ class TrackingExample extends React.Component<
     this.state.toJS.setValue(nextValue);
   };
 
-  renderBlock = (anim: any | AnimatedValue, dest: any | AnimatedValue) => [
+  renderBlock = (
+    anim: any | AnimatedValue,
+    dest: any | AnimatedValue,
+  ): Array<React.Node> => [
     <Animated.View
       key="line"
       style={[styles.line, {transform: [{translateX: dest}]}]}
@@ -326,7 +336,7 @@ class TrackingExample extends React.Component<
     />,
   ];
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this.onPress}>
         <View>

packages/rn-tester/js/examples/OrientationChange/OrientationChangeExample.js

@@ -17,7 +17,13 @@ import {type EventSubscription} from 'react-native/Libraries/vendor/emitter/Even
 class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
   _orientationSubscription: EventSubscription;
 
-  state = {
+  state:
+    | any
+    | {
+        currentOrientation: string,
+        isLandscape: boolean,
+        orientationDegrees: number,
+      } = {
     currentOrientation: '',
     orientationDegrees: 0,
     isLandscape: false,
@@ -42,7 +48,7 @@ class OrientationChangeExample extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text>{JSON.stringify(this.state)}</Text>

packages/rn-tester/js/examples/PointerEvents/PointerEventsExample.js

@@ -27,7 +27,7 @@ type ExampleBoxState = $ReadOnly<{|
 |}>;
 
 class ExampleBox extends React.Component<ExampleBoxProps, ExampleBoxState> {
-  state = {
+  state: ExampleBoxState = {
     log: [],
   };
 
@@ -49,7 +49,7 @@ class ExampleBox extends React.Component<ExampleBoxProps, ExampleBoxState> {
     this.state.log = this.state.log.concat(['---']);
   };
 
-  render() {
+  render(): React.Node {
     const {Component} = this.props;
     return (
       <View>
@@ -69,7 +69,7 @@ class ExampleBox extends React.Component<ExampleBoxProps, ExampleBoxState> {
 }
 
 class NoneExample extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -100,7 +100,7 @@ class NoneExample extends React.Component<$FlowFixMeProps> {
  * the experiment and confuse the output.
  */
 class DemoText extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View pointerEvents="none">
         <Text style={this.props.style}>{this.props.children}</Text>
@@ -110,7 +110,7 @@ class DemoText extends React.Component<$FlowFixMeProps> {
 }
 
 class BoxNoneExample extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -143,7 +143,7 @@ class BoxNoneExample extends React.Component<$FlowFixMeProps> {
 }
 
 class BoxOnlyExample extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View
         onTouchStart={() => this.props.onLog('A unspecified touched')}
@@ -183,7 +183,7 @@ type OverflowExampleProps = $ReadOnly<{|
 |}>;
 
 class OverflowExample extends React.Component<OverflowExampleProps> {
-  render() {
+  render(): React.Node {
     const {overflow} = this.props;
     return (
       <View
@@ -217,13 +217,13 @@ class OverflowExample extends React.Component<OverflowExampleProps> {
 }
 
 class OverflowVisibleExample extends React.Component<ExampleBoxComponentProps> {
-  render() {
+  render(): React.Node {
     return <OverflowExample {...this.props} overflow="visible" />;
   }
 }
 
 class OverflowHiddenExample extends React.Component<ExampleBoxComponentProps> {
-  render() {
+  render(): React.Node {
     return <OverflowExample {...this.props} overflow="hidden" />;
   }
 }

packages/rn-tester/js/examples/RCTRootView/RCTRootViewIOSExample.js

@@ -19,7 +19,7 @@ const {
 } = require('react-native');
 
 class AppPropertiesUpdateExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     // Do not require this unless we are actually rendering.
     const UpdatePropertiesExampleView = requireNativeComponent(
       'UpdatePropertiesExampleView',
@@ -41,7 +41,7 @@ class AppPropertiesUpdateExample extends React.Component<{...}> {
 }
 
 class RootViewSizeFlexibilityExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     // Do not require this unless we are actually rendering.
     const FlexibleSizeExampleView = requireNativeComponent(
       'FlexibleSizeExampleView',

packages/rn-tester/js/examples/RTL/RTLExample.js

@@ -206,7 +206,7 @@ class RTLToggleExample extends React.Component<any, RTLToggleState> {
     };
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <View style={styles.directionBox}>
@@ -267,7 +267,7 @@ class AnimationExample extends React.Component<any, AnimationState> {
     };
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <RTLToggler setRTL={this.props.setRTL} isRTL={this.props.isRTL} />

packages/rn-tester/js/examples/SafeAreaView/SafeAreaViewExample.js

@@ -28,7 +28,7 @@ class SafeAreaViewExample extends React.Component<
     modalVisible: boolean,
   |},
 > {
-  state = {
+  state: {modalVisible: boolean} = {
     modalVisible: false,
   };
 
@@ -36,7 +36,7 @@ class SafeAreaViewExample extends React.Component<
     this.setState({modalVisible: visible});
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Modal
@@ -65,7 +65,7 @@ class SafeAreaViewExample extends React.Component<
 }
 
 class IsIPhoneXExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Text>

packages/rn-tester/js/examples/ScrollView/ScrollViewAnimatedExample.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type AnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue';
+
 const React = require('react');
 const ReactNative = require('react-native');
 const {Component} = React;
@@ -17,7 +19,7 @@ const {StyleSheet, Text, View, Animated, Easing, TouchableOpacity, Dimensions} =
   ReactNative;
 
 class ScrollViewAnimatedExample extends Component<{...}> {
-  _scrollViewPos = new Animated.Value(0);
+  _scrollViewPos: AnimatedValue = new Animated.Value(0);
 
   startAnimation: () => void = () => {
     this._scrollViewPos.setValue(0);

packages/rn-tester/js/examples/ScrollView/ScrollViewExample.js

@@ -29,10 +29,10 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
 
 class EnableDisableList extends React.Component<{}, {scrollEnabled: boolean}> {
-  state = {
+  state: {scrollEnabled: boolean} = {
     scrollEnabled: true,
   };
-  render() {
+  render(): React.Node {
     return (
       <View>
         <ScrollView
@@ -66,12 +66,12 @@ class AppendingList extends React.Component<
   {},
   {items: Array<React.Element<typeof Item>>},
 > {
-  state = {
+  state: {items: Array<React.Element<typeof Item>>} = {
     items: [...Array(AppendingListItemCount)].map((_, ii) => (
       <Item msg={`Item ${ii}`} />
     )),
   };
-  render() {
+  render(): React.Node {
     return (
       <View>
         <ScrollView
@@ -1243,7 +1243,7 @@ class Item extends React.PureComponent<{|
   msg?: string,
   style?: ViewStyleProp,
 |}> {
-  render() {
+  render(): $FlowFixMe {
     return (
       <View style={[styles.item, this.props.style]}>
         <Text>{this.props.msg}</Text>

packages/rn-tester/js/examples/Snapshot/SnapshotExample.js

@@ -15,11 +15,11 @@ const {Alert, Image, StyleSheet, Text, View} = require('react-native');
 const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager');
 
 class ScreenshotExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {uri: void} = {
     uri: undefined,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View style={style.container}>
         <Text onPress={this.takeScreenshot} style={style.button}>

packages/rn-tester/js/examples/StatusBar/StatusBarExample.js

@@ -32,7 +32,9 @@ function getValue<T>(values: Array<T>, index: number): T {
 }
 
 class StatusBarHiddenExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state:
+    | $FlowFixMe
+    | {animated: boolean, hidden: boolean, showHideTransition: string} = {
     animated: true,
     hidden: false,
     showHideTransition: getValue(showHideTransitions, 0),
@@ -58,11 +60,12 @@ class StatusBarHiddenExample extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <StatusBar
           hidden={this.state.hidden}
+          // $FlowFixMe[incompatible-type]
           showHideTransition={this.state.showHideTransition}
           animated={this.state.animated}
         />
@@ -110,16 +113,17 @@ class StatusBarStyleExample extends React.Component<{...}, $FlowFixMeState> {
     this.setState({animated: !this.state.animated});
   };
 
-  state = {
+  state: $FlowFixMe | {animated: boolean, barStyle: string} = {
     animated: true,
     barStyle: getValue(barStyles, this._barStyleIndex),
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <StatusBar
           animated={this.state.animated}
+          // $FlowFixMe[incompatible-type]
           barStyle={this.state.barStyle}
         />
         <TouchableHighlight
@@ -150,7 +154,7 @@ class StatusBarNetworkActivityExample extends React.Component<
   {...},
   $FlowFixMeState,
 > {
-  state = {
+  state: $FlowFixMe | {networkActivityIndicatorVisible: boolean} = {
     networkActivityIndicatorVisible: false,
   };
 
@@ -161,7 +165,7 @@ class StatusBarNetworkActivityExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <StatusBar
@@ -188,7 +192,7 @@ class StatusBarBackgroundColorExample extends React.Component<
   {...},
   $FlowFixMeState,
 > {
-  state = {
+  state: $FlowFixMe | {animated: boolean, backgroundColor: string} = {
     animated: true,
     backgroundColor: getValue(colors, 0),
   };
@@ -204,7 +208,7 @@ class StatusBarBackgroundColorExample extends React.Component<
     this.setState({animated: !this.state.animated});
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <StatusBar
@@ -234,7 +238,7 @@ class StatusBarTranslucentExample extends React.Component<
   {...},
   $FlowFixMeState,
 > {
-  state = {
+  state: $FlowFixMe | {translucent: boolean} = {
     translucent: false,
   };
 
@@ -244,7 +248,7 @@ class StatusBarTranslucentExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <StatusBar translucent={this.state.translucent} />
@@ -263,7 +267,7 @@ class StatusBarTranslucentExample extends React.Component<
 }
 
 class StatusBarStaticIOSExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TouchableHighlight
@@ -329,7 +333,7 @@ class StatusBarStaticIOSExample extends React.Component<{...}> {
 }
 
 class StatusBarStaticAndroidExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TouchableHighlight
@@ -429,7 +433,7 @@ class StatusBarStaticAndroidExample extends React.Component<{...}> {
 }
 
 class ModalExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: $FlowFixMe | {modalVisible: boolean} = {
     modalVisible: false,
   };
 
@@ -437,7 +441,7 @@ class ModalExample extends React.Component<{...}, $FlowFixMeState> {
     this.setState({modalVisible: !this.state.modalVisible});
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TouchableHighlight

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

@@ -42,12 +42,12 @@ class BasicSwitchExample extends React.Component<
   {||},
   SimpleSwitchExampleState,
 > {
-  state = {
+  state: SimpleSwitchExampleState = {
     trueSwitchIsOn: true,
     falseSwitchIsOn: false,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <ExampleRow>
@@ -85,12 +85,12 @@ class DisabledSwitchExample extends React.Component<
   {||},
   SimpleSwitchExampleState,
 > {
-  state = {
+  state: SimpleSwitchExampleState = {
     trueSwitchIsOn: true,
     falseSwitchIsOn: false,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <ExampleRow>
@@ -126,12 +126,12 @@ class DisabledSwitchExample extends React.Component<
 }
 
 class ColorSwitchExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {colorFalseSwitchIsOn: boolean, colorTrueSwitchIsOn: boolean} = {
     colorTrueSwitchIsOn: true,
     colorFalseSwitchIsOn: false,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Switch
@@ -161,12 +161,13 @@ class ColorSwitchExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
-    eventSwitchIsOn: false,
-    eventSwitchRegressionIsOn: true,
-  };
+  state: any | {eventSwitchIsOn: boolean, eventSwitchRegressionIsOn: boolean} =
+    {
+      eventSwitchIsOn: false,
+      eventSwitchRegressionIsOn: true,
+    };
 
-  render() {
+  render(): React.Node {
     return (
       <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
         <View>
@@ -213,11 +214,11 @@ class EventSwitchExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class IOSBackgroundColEx extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {iosBackgroundColor: string} = {
     iosBackgroundColor: '#ffa500',
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Switch
@@ -235,7 +236,7 @@ class IOSBackgroundColEx extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class OnChangeExample extends React.Component<{...}, $FlowFixMeState> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Switch
@@ -253,7 +254,7 @@ class ContainerBackgroundColorStyleExample extends React.Component<
   {...},
   $FlowFixMeState,
 > {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <Switch

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -53,7 +53,7 @@ class TextAlignRTLExample extends React.Component<
     };
   }
 
-  render() {
+  render(): React.Node {
     const {isRTL} = this.state;
     const toggleRTL = () => this.setState({isRTL: !isRTL});
     return (
@@ -90,7 +90,7 @@ class TextAlignRTLExample extends React.Component<
 }
 
 class Entity extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <Text style={{fontWeight: '500', color: '#527fe4'}}>
         {this.props.children}
@@ -100,7 +100,10 @@ class Entity extends React.Component<$FlowFixMeProps> {
 }
 
 class AttributeToggler extends React.Component<{...}, $FlowFixMeState> {
-  state = {fontWeight: 'bold', fontSize: 15};
+  state: any | {fontSize: number, fontWeight: string} = {
+    fontWeight: 'bold',
+    fontSize: 15,
+  };
 
   toggleWeight = () => {
     this.setState({
@@ -114,19 +117,20 @@ class AttributeToggler extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     const curStyle = {
       fontWeight: this.state.fontWeight,
       fontSize: this.state.fontSize,
     };
     return (
       <View>
+        {/* $FlowFixMe[incompatible-type] */}
         <Text style={curStyle}>
           Tap the controls below to change attributes.
         </Text>
         <Text>
           <Text>
-            See how it will even work on{' '}
+            See how it will even work on {/* $FlowFixMe[incompatible-type] */}
             <Text style={curStyle}>this nested text</Text>
           </Text>
         </Text>
@@ -156,7 +160,7 @@ class AdjustingFontSize extends React.Component<
   AdjustingFontSizeProps,
   AdjustingFontSizeState,
 > {
-  state = {
+  state: AdjustingFontSizeState = {
     dynamicText: '',
     shouldRender: true,
   };
@@ -192,7 +196,7 @@ class AdjustingFontSize extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     if (!this.state.shouldRender) {
       return <View />;
     }
@@ -270,7 +274,7 @@ class AdjustingFontSize extends React.Component<
 }
 
 class TextBaseLineLayoutExample extends React.Component<{}, mixed> {
-  render() {
+  render(): React.Node {
     const texts = [];
     for (let i = 9; i >= 0; i--) {
       texts.push(
@@ -378,7 +382,21 @@ class TextRenderInfoExample extends React.Component<
     }>,
   },
 > {
-  state = {
+  state: {
+    fontSize: number,
+    numberOfTextBlocks: number,
+    textMetrics: $ReadOnly<{
+      ascender: number,
+      capHeight: number,
+      descender: number,
+      height: number,
+      text?: string,
+      width: number,
+      x: number,
+      xHeight: number,
+      y: number,
+    }>,
+  } = {
     textMetrics: {
       x: 0,
       y: 0,
@@ -393,7 +411,7 @@ class TextRenderInfoExample extends React.Component<
     fontSize: 14,
   };
 
-  render() {
+  render(): React.Node {
     const topOfBox =
       this.state.textMetrics.y +
       this.state.textMetrics.height -
@@ -477,7 +495,19 @@ class TextWithCapBaseBox extends React.Component<
     }>,
   },
 > {
-  state = {
+  state: {
+    textMetrics: $ReadOnly<{
+      ascender: number,
+      capHeight: number,
+      descender: number,
+      height: number,
+      text?: string,
+      width: number,
+      x: number,
+      xHeight: number,
+      y: number,
+    }>,
+  } = {
     textMetrics: {
       x: 0,
       y: 0,
@@ -489,7 +519,7 @@ class TextWithCapBaseBox extends React.Component<
       xHeight: 0,
     },
   };
-  render() {
+  render(): React.Node {
     return (
       <Text
         onTextLayout={event => {

packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js

@@ -30,7 +30,7 @@ const TextInputSharedExamples = require('./TextInputSharedExamples.js');
 import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
 
 class WithLabel extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.label}>
@@ -51,7 +51,7 @@ class TextInputAccessoryViewChangeTextExample extends React.Component<
     this.state = {text: 'Placeholder Text'};
   }
 
-  render() {
+  render(): React.Node {
     const inputAccessoryViewID = 'inputAccessoryView1';
     return (
       <View>
@@ -91,7 +91,7 @@ class TextInputAccessoryViewChangeKeyboardExample extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     const inputAccessoryViewID = 'inputAccessoryView2';
     return (
       <View>
@@ -127,7 +127,7 @@ class TextInputAccessoryViewDefaultDoneButtonExample extends React.Component<
     this.state = {text: ''};
   }
 
-  render() {
+  render(): React.Node {
     return (
       <TextInput
         style={styles.default}
@@ -145,7 +145,7 @@ class RewriteExampleKana extends React.Component<$FlowFixMeProps, any> {
     super(props);
     this.state = {text: ''};
   }
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
@@ -170,7 +170,7 @@ class SecureEntryExample extends React.Component<$FlowFixMeProps, any> {
       isSecureTextEntry: true,
     };
   }
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TextInput
@@ -230,7 +230,7 @@ class AutogrowingTextInputExample extends React.Component<
     });
   }
 
-  render() {
+  render(): React.Node {
     const {style, multiline, ...props} = this.props;
     return (
       <View>

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

@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
 });
 
 class WithLabel extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.labelContainer}>
         <View style={styles.label}>
@@ -100,7 +100,7 @@ class RewriteExample extends React.Component<$FlowFixMeProps, any> {
     super(props);
     this.state = {text: ''};
   }
-  render() {
+  render(): React.Node {
     const limit = 20;
     const remainder = limit - this.state.text.length;
     const remainderColor = remainder > 5 ? 'blue' : 'red';
@@ -134,7 +134,7 @@ class RewriteExampleInvalidCharacters extends React.Component<
     super(props);
     this.state = {text: ''};
   }
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
@@ -162,7 +162,7 @@ class RewriteInvalidCharactersAndClearExample extends React.Component<
     super(props);
     this.state = {text: ''};
   }
-  render() {
+  render(): React.Node {
     return (
       <View style={styles.rewriteContainer}>
         <TextInput
@@ -199,7 +199,7 @@ class BlurOnSubmitExample extends React.Component<{...}> {
   ref4 = React.createRef();
   ref5 = React.createRef();
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TextInput
@@ -261,7 +261,7 @@ class SubmitBehaviorExample extends React.Component<{...}> {
   ref10 = React.createRef();
   ref11 = React.createRef();
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TextInput
@@ -333,7 +333,14 @@ class SubmitBehaviorExample extends React.Component<{...}> {
 }
 
 class TextEventsExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state:
+    | any
+    | {
+        curText: string,
+        prev2Text: string,
+        prev3Text: string,
+        prevText: string,
+      } = {
     curText: '<No Event>',
     prevText: '<No Event>',
     prev2Text: '<No Event>',
@@ -351,7 +358,7 @@ class TextEventsExample extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TextInput
@@ -401,7 +408,7 @@ class TokenizedTextExample extends React.Component<
     super(props);
     this.state = {text: 'Hello #World'};
   }
-  render() {
+  render(): React.Node {
     //define delimiter
     let delimiter = /\s+/;
 
@@ -487,7 +494,7 @@ class SelectionExample extends React.Component<
     this.setState({selection});
   }
 
-  getRandomPosition() {
+  getRandomPosition(): number {
     const length = this.state.value.length;
     return Math.round(Math.random() * length);
   }
@@ -516,7 +523,7 @@ class SelectionExample extends React.Component<
     this.placeAt(this.getRandomPosition());
   }
 
-  render() {
+  render(): React.Node {
     const length = this.state.value.length;
 
     return (

packages/rn-tester/js/examples/Timer/TimerExample.js

@@ -27,7 +27,7 @@ class RequestIdleCallbackTester extends React.Component<
   RequestIdleCallbackTesterProps,
   RequestIdleCallbackTesterState,
 > {
-  state = {
+  state: RequestIdleCallbackTesterState = {
     message: '-',
   };
 
@@ -41,7 +41,7 @@ class RequestIdleCallbackTester extends React.Component<
     }
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         {/* $FlowFixMe[method-unbinding] added when improving typing for this
@@ -159,7 +159,7 @@ class TimerTester extends React.Component<TimerTesterProps> {
   _immediateId: ?Object = null;
   _timerFn: ?() => any = null;
 
-  render() {
+  render(): any {
     const args =
       'fn' + (this.props.dt !== undefined ? ', ' + this.props.dt : '');
     return (
@@ -274,13 +274,13 @@ class IntervalExample extends React.Component<
     showTimer: boolean,
   |},
 > {
-  state = {
+  state: {showTimer: boolean} = {
     showTimer: true,
   };
 
   _timerTester: ?React.ElementRef<typeof TimerTester>;
 
-  render() {
+  render(): React.Node {
     return (
       <View>
         {this.state.showTimer && this._renderTimer()}
@@ -291,7 +291,7 @@ class IntervalExample extends React.Component<
     );
   }
 
-  _renderTimer = () => {
+  _renderTimer = (): React.Node => {
     return (
       <View>
         <TimerTester

packages/rn-tester/js/examples/Touchable/TouchableExample.js

@@ -29,7 +29,7 @@ const forceTouchAvailable =
   (Platform.OS === 'ios' && Platform.constants.forceTouchAvailable) || false;
 
 class TouchableHighlightBox extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {timesPressed: number} = {
     timesPressed: 0,
   };
 
@@ -39,7 +39,7 @@ class TouchableHighlightBox extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     let textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x TouchableHighlight onPress';
@@ -79,7 +79,7 @@ class TouchableWithoutFeedbackBox extends React.Component<
   {...},
   $FlowFixMeState,
 > {
-  state = {
+  state: any | {timesPressed: number} = {
     timesPressed: 0,
   };
 
@@ -89,7 +89,7 @@ class TouchableWithoutFeedbackBox extends React.Component<
     });
   };
 
-  render() {
+  render(): React.Node {
     let textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x TouchableWithoutFeedback onPress';
@@ -115,7 +115,7 @@ class TouchableWithoutFeedbackBox extends React.Component<
 }
 
 class TextOnPressBox extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {timesPressed: number} = {
     timesPressed: 0,
   };
 
@@ -125,7 +125,7 @@ class TextOnPressBox extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     let textLog = '';
     if (this.state.timesPressed > 1) {
       textLog = this.state.timesPressed + 'x text onPress';
@@ -150,11 +150,11 @@ class TextOnPressBox extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class TouchableFeedbackEvents extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {eventLog: Array<string>} = {
     eventLog: [],
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View testID="touchable_feedback_events">
         <View style={[styles.row, styles.centered]}>
@@ -190,11 +190,11 @@ class TouchableFeedbackEvents extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class TouchableDelayEvents extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {eventLog: Array<string>} = {
     eventLog: [],
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View testID="touchable_delay_events">
         <View style={[styles.row, styles.centered]}>
@@ -231,17 +231,17 @@ class TouchableDelayEvents extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class ForceTouchExample extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {force: number} = {
     force: 0,
   };
 
-  _renderConsoleText = () => {
+  _renderConsoleText = (): string => {
     return forceTouchAvailable
       ? 'Force: ' + this.state.force.toFixed(3)
       : '3D Touch is not available on this device';
   };
 
-  render() {
+  render(): React.Node {
     return (
       <View testID="touchable_3dtouch_event">
         <View style={styles.forceTouchBox} testID="touchable_3dtouch_output">
@@ -265,7 +265,7 @@ class ForceTouchExample extends React.Component<{...}, $FlowFixMeState> {
 }
 
 class TouchableHitSlop extends React.Component<{...}, $FlowFixMeState> {
-  state = {
+  state: any | {timesPressed: number} = {
     timesPressed: 0,
   };
 
@@ -275,7 +275,7 @@ class TouchableHitSlop extends React.Component<{...}, $FlowFixMeState> {
     });
   };
 
-  render() {
+  render(): React.Node {
     let log = '';
     if (this.state.timesPressed > 1) {
       log = this.state.timesPressed + 'x onPress';
@@ -345,7 +345,7 @@ function TouchableNativeMethods() {
 }
 
 class TouchableDisabled extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View>
         <TouchableOpacity disabled={true} style={[styles.row, styles.block]}>

packages/rn-tester/js/examples/TransparentHitTest/TransparentHitTestExample.js

@@ -14,7 +14,7 @@ const React = require('react');
 const {Text, View, TouchableOpacity, Alert} = require('react-native');
 
 class TransparentHitTestExample extends React.Component<{...}> {
-  render() {
+  render(): React.Node {
     return (
       <View style={{flex: 1}}>
         <TouchableOpacity onPress={() => Alert.alert('Alert', 'Hi!')}>

packages/rn-tester/js/examples/TurboModule/SampleTurboModuleExample.js

@@ -129,7 +129,7 @@ class SampleTurboModuleExample extends React.Component<{||}, State> {
       | 'promise'
       | 'rejectPromise'
       | 'voidFunc',
-  ) {
+  ): React.Node {
     const result = this.state.testResults[name] || {};
     return (
       <View style={styles.result}>
@@ -139,7 +139,7 @@ class SampleTurboModuleExample extends React.Component<{||}, State> {
     );
   }
 
-  componentDidMount() {
+  componentDidMount(): void {
     if (global.__turboModuleProxy == null) {
       throw new Error(
         'Cannot load this example because TurboModule is not configured.',

packages/rn-tester/js/examples/View/ViewExample.js

@@ -24,11 +24,11 @@ class ViewBorderStyleExample extends React.Component<
   $ReadOnly<{||}>,
   {|showBorder: boolean|},
 > {
-  state = {
+  state: {showBorder: boolean} = {
     showBorder: true,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
         <View>
@@ -87,11 +87,11 @@ class OffscreenAlphaCompositing extends React.Component<
     active: boolean,
   |},
 > {
-  state = {
+  state: {active: boolean} = {
     active: false,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
         <View>
@@ -169,11 +169,11 @@ class ZIndexExample extends React.Component<
     flipped: boolean,
   |},
 > {
-  state = {
+  state: {flipped: boolean} = {
     flipped: false,
   };
 
-  render() {
+  render(): React.Node {
     const indices = this.state.flipped ? [-1, 0, 1, 2] : [2, 1, 0, -1];
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
@@ -239,11 +239,11 @@ class DisplayNoneStyle extends React.Component<
     index: number,
   |},
 > {
-  state = {
+  state: {index: number} = {
     index: 0,
   };
 
-  render() {
+  render(): React.Node {
     return (
       <TouchableWithoutFeedback onPress={this._handlePress}>
         <View>

packages/rn-tester/js/examples/XHR/XHRExampleFetch.js

@@ -39,7 +39,7 @@ class XHRExampleFetch extends React.Component<any, any> {
       });
   }
 
-  _renderHeaders() {
+  _renderHeaders(): null | Array<React.Node> {
     if (!this.responseHeaders) {
       return null;
     }

packages/rn-tester/js/utils/RNTesterStatePersister.js

@@ -40,11 +40,11 @@ function createContainer<Props: Object, State>(
     Props,
     $FlowFixMeState,
   > {
-    static displayName = `RNTesterStatePersister(${String(
+    static displayName: ?string = `RNTesterStatePersister(${String(
       Component.displayName ?? Component.name,
     )})`;
-    state = {value: spec.getInitialState(this.props)};
-    _cacheKey = `RNTester:${spec.version || 'v1'}:${spec.cacheKeySuffix(
+    state: any | {value: State} = {value: spec.getInitialState(this.props)};
+    _cacheKey: string = `RNTester:${spec.version || 'v1'}:${spec.cacheKeySuffix(
       this.props,
     )}`;
     componentDidMount() {