react-native-windows 0.0.0-canary.563 → 0.0.0-canary.565

package/.flowconfig

@@ -31,6 +31,7 @@
 <PROJECT_ROOT>/Libraries/NewAppScreen/components/ReloadInstructions.js
 <PROJECT_ROOT>/Libraries/Pressability/Pressability.js
 <PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
+<PROJECT_ROOT>/Libraries/Lists/VirtualizedListProps.js
 
 ; Ignore react-native files in node_modules since they are copied into project root
 .*/node_modules/react-native/.*
@@ -100,7 +101,7 @@ suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FlowFixMeEmpty
 
-experimental.env_mode=resolved
+inference_mode=constrain_writes
 
 [lints]
 sketchy-null-number=warn
@@ -122,4 +123,4 @@ untyped-import
 untyped-type-import
 
 [version]
-^0.183.1
+^0.184.0

package/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.',

package/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;

package/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');
     }

package/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];

package/Libraries/AppState/AppState.js

@@ -76,6 +76,7 @@ class AppState {
         // It's possible that the state will have changed here & listeners need to be notified
         if (!eventUpdated && this.currentState !== appStateData.app_state) {
           this.currentState = appStateData.app_state;
+          // $FlowFixMe[incompatible-call]
           emitter.emit('appStateDidChange', appStateData);
         }
       }, logError);

package/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;
 

package/Libraries/Blob/BlobManager.js

@@ -110,6 +110,7 @@ class BlobManager {
    */
   static createFromOptions(options: BlobData): Blob {
     BlobRegistry.register(options.blobId);
+    // $FlowFixMe[prop-missing]
     return Object.assign(Object.create(Blob.prototype), {
       data:
         // Reuse the collector instance when creating from an existing blob.

package/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) {

package/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]();
   }

package/Libraries/Components/Button.js

@@ -145,6 +145,11 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 |}>;
@@ -264,6 +269,7 @@ class Button extends React.Component<ButtonProps> {
   render(): React.Node {
     const {
       accessibilityLabel,
+      importantForAccessibility,
       color,
       onPress,
       touchSoundDisabled,
@@ -315,6 +321,12 @@ class Button extends React.Component<ButtonProps> {
     const Touchable =
       Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
+    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+    const _importantForAccessibility =
+      importantForAccessibility === 'no'
+        ? 'no-hide-descendants'
+        : importantForAccessibility;
+
     return (
       <Touchable
         accessible={accessible}
@@ -325,6 +337,7 @@ class Button extends React.Component<ButtonProps> {
         accessibilityLanguage={accessibilityLanguage}
         accessibilityRole="button"
         accessibilityState={accessibilityState}
+        importantForAccessibility={_importantForAccessibility}
         hasTVPreferredFocus={hasTVPreferredFocus}
         nextFocusDown={nextFocusDown}
         nextFocusForward={nextFocusForward}

package/Libraries/Components/Button.windows.js

@@ -147,6 +147,11 @@ type ButtonProps = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   accessibilityState?: ?AccessibilityState,
+
+  /**
+   * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
+   */
+  importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 
@@ -285,6 +290,7 @@ class Button extends React.Component<
   render(): React.Node {
     const {
       accessibilityLabel,
+      importantForAccessibility,
       color,
       onPress,
       touchSoundDisabled,

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js

@@ -162,6 +162,7 @@ class DrawerLayoutAndroid extends React.Component<Props, State> {
     return {Left: 'left', Right: 'right'};
   }
 
+  // $FlowFixMe[missing-local-annot]
   _nativeRef =
     React.createRef<
       React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,

package/Libraries/Components/Keyboard/Keyboard.js

@@ -126,10 +126,11 @@ class Keyboard {
    * - `keyboardWillChangeFrame`
    * - `keyboardDidChangeFrame`
    *
-   * Note that if you set `android:windowSoftInputMode` to `adjustResize`  or `adjustNothing`,
-   * only `keyboardDidShow` and `keyboardDidHide` events will be available on Android.
-   * `keyboardWillShow` as well as `keyboardWillHide` are generally not available on Android
-   * since there is no native corresponding event.
+   * Android versions prior to API 30 rely on observing layout changes when
+   * `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
+   *
+   * `keyboardWillShow` as well as `keyboardWillHide` are not available on Android since there is
+   * no native corresponding event.
    *
    * @param {function} callback function to be called when the event fires.
    */

package/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;

package/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;

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 0,
   patch: 0,
-  prerelease: '20220729-2025-a21a1f845',
+  prerelease: '20220812-2104-23429330a',
 };

package/Libraries/Image/ImageBackground.js

@@ -66,15 +66,25 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   };
 
   render(): React.Node {
-    const {children, style, imageStyle, imageRef, ...props} = this.props;
+    const {
+      children,
+      style,
+      imageStyle,
+      imageRef,
+      importantForAccessibility,
+      ...props
+    } = this.props;
+
     const flattenedStyle = flattenStyle(style);
     return (
       <View
         accessibilityIgnoresInvertColors={true}
+        importantForAccessibility={importantForAccessibility}
         style={style}
         ref={this._captureRef}>
         <Image
           {...props}
+          importantForAccessibility={importantForAccessibility}
           style={[
             StyleSheet.absoluteFill,
             {

package/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}>

package/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)}

package/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') {

package/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,

package/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 &&

package/Libraries/Lists/FillRateHelper.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+import type {FrameMetricProps} from './VirtualizedListProps';
+
 export type FillRateInfo = Info;
 
 class Info {
@@ -47,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) => ?FrameMetrics;
-  _info = new Info();
-  _mostlyBlankStartTime = (null: ?number);
-  _samplesStartTime = (null: ?number);
+  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
+  _info: Info = new Info();
+  _mostlyBlankStartTime: ?number = null;
+  _samplesStartTime: ?number = null;
 
   static addListener(callback: FillRateInfo => void): {
     remove: () => void,
@@ -77,7 +79,9 @@ class FillRateHelper {
     _minSampleCount = minSampleCount;
   }
 
-  constructor(getFrameMetrics: (index: number) => ?FrameMetrics) {
+  constructor(
+    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
+  ) {
     this._getFrameMetrics = getFrameMetrics;
     this._enabled = (_sampleRate || 0) > Math.random();
     this._resetData();
@@ -134,8 +138,7 @@ class FillRateHelper {
 
   computeBlankness(
     props: {
-      data: any,
-      getItemCount: (data: any) => number,
+      ...FrameMetricProps,
       initialNumToRender?: ?number,
       ...
     },
@@ -181,9 +184,9 @@ class FillRateHelper {
 
     let blankTop = 0;
     let first = state.first;
-    let firstFrame = this._getFrameMetrics(first);
+    let firstFrame = this._getFrameMetrics(first, props);
     while (first <= state.last && (!firstFrame || !firstFrame.inLayout)) {
-      firstFrame = this._getFrameMetrics(first);
+      firstFrame = this._getFrameMetrics(first, props);
       first++;
     }
     // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
@@ -196,9 +199,9 @@ class FillRateHelper {
     }
     let blankBottom = 0;
     let last = state.last;
-    let lastFrame = this._getFrameMetrics(last);
+    let lastFrame = this._getFrameMetrics(last, props);
     while (last >= state.first && (!lastFrame || !lastFrame.inLayout)) {
-      lastFrame = this._getFrameMetrics(last);
+      lastFrame = this._getFrameMetrics(last, props);
       last--;
     }
     // Only count blankBottom if we aren't rendering the last item, otherwise we will count the

package/Libraries/Lists/FlatList.js

@@ -433,6 +433,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   }
 
+  // $FlowFixMe[missing-local-annot]
   componentDidUpdate(prevProps: Props<ItemT>) {
     invariant(
       prevProps.numColumns === this.props.numColumns,
@@ -463,6 +464,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     this._listRef = ref;
   };
 
+  // $FlowFixMe[missing-local-annot]
   _checkProps(props: Props<ItemT>) {
     const {
       // $FlowFixMe[prop-missing] this prop doesn't exist, is only used for an invariant
@@ -494,13 +496,15 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     );
   }
 
+  // $FlowFixMe[missing-local-annot]
   _getItem = (data: Array<ItemT>, index: number) => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     if (numColumns > 1) {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
-        const item = data[index * numColumns + kk];
-        if (item != null) {
+        const itemIndex = index * numColumns + kk;
+        if (itemIndex < data.length) {
+          const item = data[itemIndex];
           ret.push(item);
         }
       }
@@ -519,6 +523,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     }
   };
 
+  // $FlowFixMe[missing-local-annot]
   _keyExtractor = (items: ItemT | Array<ItemT>, index: number) => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
@@ -560,6 +565,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       changed: Array<ViewToken>,
       ...
     }) => void,
+    // $FlowFixMe[missing-local-annot]
   ) {
     return (info: {
       viewableItems: Array<ViewToken>,
@@ -589,6 +595,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,
     extraData: ?any,
+    // $FlowFixMe[missing-local-annot]
   ) => {
     const cols = numColumnsOrDefault(numColumns);
 
@@ -643,6 +650,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     };
   };
 
+  // $FlowFixMe[missing-local-annot]
   _memoizedRenderer = memoizeOne(this._renderer);
 
   render(): React.Node {

package/Libraries/Lists/StateSafePureComponent.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+import * as React from 'react';
+import invariant from 'invariant';
+
+/**
+ * `setState` is called asynchronously, and should not rely on the value of
+ * `this.props` or `this.state`:
+ * https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
+ *
+ * SafePureComponent adds runtime enforcement, to catch cases where these
+ * variables are read in a state updater function, instead of the ones passed
+ * in.
+ */
+export default class StateSafePureComponent<
+  Props,
+  State: interface {},
+> extends React.PureComponent<Props, State> {
+  _inAsyncStateUpdate = false;
+
+  constructor(props: Props) {
+    super(props);
+    this._installSetStateHooks();
+  }
+
+  setState(
+    partialState: ?($Shape<State> | ((State, Props) => ?$Shape<State>)),
+    callback?: () => mixed,
+  ): void {
+    if (typeof partialState === 'function') {
+      super.setState((state, props) => {
+        this._inAsyncStateUpdate = true;
+        let ret;
+        try {
+          ret = partialState(state, props);
+        } catch (err) {
+          throw err;
+        } finally {
+          this._inAsyncStateUpdate = false;
+        }
+        return ret;
+      }, callback);
+    } else {
+      super.setState(partialState, callback);
+    }
+  }
+
+  _installSetStateHooks() {
+    const that = this;
+    let {props, state} = this;
+
+    Object.defineProperty(this, 'props', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.props" should not be accessed during state updates',
+        );
+        return props;
+      },
+      set(newProps: Props) {
+        props = newProps;
+      },
+    });
+    Object.defineProperty(this, 'state', {
+      get() {
+        invariant(
+          !that._inAsyncStateUpdate,
+          '"this.state" should not be acceessed during state updates',
+        );
+        return state;
+      },
+      set(newState: State) {
+        state = newState;
+      },
+    });
+  }
+}