@office-iss/react-native-win32 0.71.0-preview.2 → 0.71.1

package/index.win32.js

@@ -466,7 +466,7 @@ module.exports = {
       .ColorGradientWin32;
   },
   get ViewWin32(): any {
-    return require('./Libraries/Components/View/ViewWin32').ViewWin32;
+    return require('./Libraries/Components/View/ViewWin32');
   },
   get TextWin32(): any {
     return require('./Libraries/Components/Text/TextWin32').TextWin32;

package/jest.config.js

@@ -1,5 +1,4 @@
-module.exports = {
-  preset: '@rnx-kit/jest-preset',
+module.exports = require('@rnx-kit/jest-preset')("win32", {
   verbose: true,
   snapshotResolver: './jest-snapshot-resolver.js',
   transform: {
@@ -7,7 +6,6 @@ module.exports = {
       '<rootDir>/jest/assetFileTransformer.js',
   },
   transformIgnorePatterns: ['jest-runner'],
-  setupFiles: ['./jest/setup.js'],
   fakeTimers: {
     enableGlobally: true,
     legacyFakeTimers: true,
@@ -36,4 +34,4 @@ module.exports = {
     '/vendor/',
     '<rootDir>/Libraries/react-native/',
   ],
-};
+});

package/overrides.json

@@ -7,7 +7,7 @@
     "**/__snapshots__/**",
     "src/rntypes/**"
   ],
-  "baseVersion": "0.71.0-rc.3",
+  "baseVersion": "0.71.0",
   "overrides": [
     {
       "type": "derived",
@@ -119,7 +119,7 @@
     },
     {
       "type": "derived",
-      "file": "src/Libraries/Components/TextInput/TextInput.win32.tsx",
+      "file": "src/Libraries/Components/TextInput/TextInput.win32.js",
       "baseFile": "Libraries/Components/TextInput/TextInput.js",
       "baseHash": "5de06cf785aabebe8a0bb7331389a5320d7f38c0"
     },
@@ -148,12 +148,16 @@
       "issue": 0
     },
     {
-      "type": "platform",
-      "file": "src/Libraries/Components/Touchable/TouchableNativeFeedback.Props.ts"
+      "type": "derived",
+      "file": "src/Libraries/Components/Touchable/TouchableNativeFeedback.win32.d.ts",
+      "baseFile": "Libraries/Components/Touchable/TouchableNativeFeedback.d.ts",
+      "baseHash": "b38a2d4fb0c6a08c3ada7748fffded9949c97c2a"
     },
     {
-      "type": "platform",
-      "file": "src/Libraries/Components/Touchable/TouchableNativeFeedback.win32.tsx"
+      "type": "derived",
+      "file": "src/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js",
+      "baseFile": "Libraries/Components/Touchable/TouchableNativeFeedback.js",
+      "baseHash": "1fa12a85dc06cdb1093dbe2b54cf3569312b7cc4"
     },
     {
       "type": "platform",
@@ -183,6 +187,24 @@
       "baseFile": "Libraries/Components/View/View.js",
       "baseHash": "91864d8f5518fa50da710f545ecdf5727248c45a"
     },
+    {
+      "type": "derived",
+      "file": "src/Libraries/Components/View/ViewAccessibility.win32.d.ts",
+      "baseFile": "Libraries/Components/View/ViewAccessibility.d.ts",
+      "baseHash": "fb6095450277c96f033749633af10b42a184e07c"
+    },
+    {
+      "type": "derived",
+      "file": "src/Libraries/Components/View/ViewAccessibility.win32.js",
+      "baseFile": "Libraries/Components/View/ViewAccessibility.js",
+      "baseHash": "b8dca610ae67781f86534eab2373f2a3eb29fca3"
+    },
+    {
+      "type": "derived",
+      "file": "src/Libraries/Components/View/ViewPropTypes.win32.d.ts",
+      "baseFile": "Libraries/Components/View/ViewPropTypes.d.ts",
+      "baseHash": "567b5fd7cc602357daa075d728220ffca0f6c2ac"
+    },
     {
       "type": "patch",
       "file": "src/Libraries/Components/View/ViewPropTypes.win32.js",
@@ -191,12 +213,14 @@
       "issue": 6240
     },
     {
-      "type": "platform",
-      "file": "src/Libraries/Components/View/ViewWin32.Props.ts"
+      "type": "derived",
+      "file": "src/Libraries/Components/View/ViewWin32.d.ts",
+      "baseFile": "Libraries/Components/View/View.d.ts",
+      "baseHash": "c71957187cbae0b40995198a2d7a18d5cae6d662"
     },
     {
       "type": "platform",
-      "file": "src/Libraries/Components/View/ViewWin32.tsx"
+      "file": "src/Libraries/Components/View/ViewWin32.js"
     },
     {
       "type": "patch",
@@ -395,6 +419,12 @@
       "baseHash": "7fe2b87cf49f4674d731d07f0883bab2f5cfc356",
       "issue": 6240
     },
+    {
+      "type": "derived",
+      "file": "src/Libraries/Utilities/AcessibilityMapping.win32.js",
+      "baseFile": "Libraries/Utilities/AcessibilityMapping.js",
+      "baseHash": "7a662ddd93c6cd0a7193e3002120aeb196991340"
+    },
     {
       "type": "copy",
       "file": "src/Libraries/Utilities/BackHandler.win32.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@office-iss/react-native-win32",
-  "version": "0.71.0-preview.2",
+  "version": "0.71.1",
   "description": "Implementation of react native on top of Office's Win32 platform.",
   "license": "MIT",
   "main": "./index.win32.js",
@@ -12,9 +12,9 @@
     "flow-check": "flow check",
     "lint:fix": "rnw-scripts lint:fix",
     "lint": "rnw-scripts lint",
-    "run-win32-dev-web": "npx @office-iss/rex-win32@0.66.15-devmain.15226.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useWebDebugger",
-    "run-win32-devmain": "npx @office-iss/rex-win32@0.66.15-devmain.15226.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain",
-    "run-win32": "npx @office-iss/rex-win32@0.66.15-devmain.15226.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useWebDebugger",
+    "run-win32-dev-web": "npx @office-iss/rex-win32@0.68.26-devmain.16206.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain --useWebDebugger",
+    "run-win32-devmain": "npx @office-iss/rex-win32@0.68.26-devmain.16206.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useDevMain",
+    "run-win32": "npx @office-iss/rex-win32@0.68.26-devmain.16206.10000 --bundle js/RNTesterApp --component RNTesterApp --basePath ./dist/win32/dev --jsEngine v8 --useWebDebugger",
     "start": "react-native start --projectRoot ../react-native-win32-tester",
     "test": "jest",
     "validate-overrides": "react-native-platform-override validate"
@@ -22,9 +22,9 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@jest/create-cache-key-function": "^29.2.1",
-    "@react-native-community/cli": "10.0.0-alpha.5",
-    "@react-native-community/cli-platform-android": "10.0.0-alpha.4",
-    "@react-native-community/cli-platform-ios": "10.0.0-alpha.3",
+    "@react-native-community/cli": "10.0.0",
+    "@react-native-community/cli-platform-android": "10.0.0",
+    "@react-native-community/cli-platform-ios": "10.0.0",
     "@react-native/assets": "1.0.0",
     "@react-native/normalize-color": "2.1.0",
     "@react-native/polyfills": "2.0.0",
@@ -32,15 +32,15 @@
     "anser": "^1.4.9",
     "art": "^0.10.0",
     "base64-js": "^1.1.2",
-    "deprecated-react-native-prop-types": "^2.3.0",
+    "deprecated-react-native-prop-types": "^3.0.1",
     "event-target-shim": "^5.0.1",
     "invariant": "^2.2.4",
     "jest-environment-node": "^29.2.1",
     "jsc-android": "^250230.2.1",
     "memoize-one": "^5.0.0",
-    "metro-react-native-babel-transformer": "0.73.3",
-    "metro-runtime": "0.73.3",
-    "metro-source-map": "0.73.3",
+    "metro-react-native-babel-transformer": "0.73.5",
+    "metro-runtime": "0.73.5",
+    "metro-source-map": "0.73.5",
     "mkdirp": "^0.5.1",
     "nullthrows": "^1.1.1",
     "pretty-format": "^26.5.2",
@@ -48,7 +48,7 @@
     "react-clone-referenced-element": "^1.0.1",
     "react-devtools-core": "^4.26.1",
     "react-native-codegen": "^0.71.3",
-    "react-native-gradle-plugin": "^0.71.10",
+    "react-native-gradle-plugin": "^0.71.12",
     "react-refresh": "^0.4.0",
     "react-shallow-renderer": "^16.15.0",
     "regenerator-runtime": "^0.13.2",
@@ -76,20 +76,20 @@
     "just-scripts": "^1.3.3",
     "prettier": "^2.4.1",
     "react": "18.2.0",
-    "react-native": "0.71.0-rc.3",
+    "react-native": "0.71.0",
     "react-native-platform-override": "^1.8.3",
-    "typescript": "^4.4.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "react": "18.2.0",
-    "react-native": "0.71.0-rc.3"
+    "react-native": "0.71.0"
   },
   "beachball": {
-    "defaultNpmTag": "preview",
+    "defaultNpmTag": "latest",
     "disallowedChangeTypes": [
       "major",
       "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "promoteRelease": true,

package/src/Libraries/Components/Button/ButtonWin32.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import RN = require('react-native');
-import { ViewWin32 } from '../View/ViewWin32';
-import { IViewWin32Props } from '../View/ViewWin32.Props';
-import { TextWin32 } from '../Text/TextWin32';
-import { ITextWin32Props } from '../Text/TextWin32.Props';
-import { IButtonWin32Props } from './ButtonWin32.Props';
+import type { IViewWin32Props } from '../View/ViewPropTypes.win32';
+import type { ITextWin32Props } from '../Text/TextWin32.Props';
+import type { IButtonWin32Props } from './ButtonWin32.Props';
 
 const enum SelectState {
   NotSelected,
@@ -35,6 +33,7 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
       onBlur: this._onBlur,
       onMouseEnter: this.props.onMouseEnter,
       onMouseLeave: this.props.onMouseLeave,
+      // @ts-ignore
       onTouchStart: this.props.onTouchStart,
       onTouchEnd: this._onTouchEnd,
       testID: this.props.testID,
@@ -49,9 +48,10 @@ export class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32
     }
 
     return (
-      <ViewWin32 {...viewProps}>
-        <TextWin32 {...textProps}>{this.props.title}</TextWin32>
-      </ViewWin32>
+      // @ts-ignore
+      <RN.ViewWin32 {...viewProps}>
+        <RN.TextWin32 {...textProps}>{this.props.title}</RN.TextWin32>
+      </RN.ViewWin32>
     );
   }
 

package/src/Libraries/Components/Text/TextWin32.Props.ts

@@ -1,18 +1,5 @@
 import RN = require('react-native');
-import { SharedAccessibilityPropsIOSandWin32, OmittedAccessibilityPropsWin32, BasePropsWin32, IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewWin32.Props';
-
-// removes from interface T the members of interface K
-type Omit<T, K> = Pick<T, Exclude<keyof T, keyof K>>;
-
-export type TextWin32OmitTypes = Omit<RN.TextPropsAndroid, SharedTextPropsAndroidandWin32> &
-  RN.TextPropsIOS &
-  RN.AccessibilityPropsAndroid &
-  Omit<RN.AccessibilityPropsIOS, SharedAccessibilityPropsIOSandWin32> &
-  OmittedAccessibilityPropsWin32;
-
-export type SharedTextPropsAndroidandWin32 = {
-  selectable?: boolean;
-};
+import type { IKeyboardEvent, IHandledKeyboardEvent } from '../View/ViewPropTypes.win32';
 
 /**
  * Role-based text style names.
@@ -31,7 +18,7 @@ export type TextWin32TextStyle =
   | 'ExtraLargeStandard'
   | 'HugeStandard';
 
-export interface ITextWin32Props extends Omit<RN.TextProps, TextWin32OmitTypes>, BasePropsWin32 {
+export interface ITextWin32Props extends RN.TextProps {
   onKeyDown?: (args: IKeyboardEvent) => void;
   onKeyDownCapture?: (args: IKeyboardEvent) => void;
   onKeyUp?: (args: IKeyboardEvent) => void;

package/src/Libraries/Components/Text/TextWin32.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import RN = require('react-native');
-import { ITextWin32Props } from './TextWin32.Props';
-import { UseFrom } from '../View/ViewWin32.Props';
+import type { ITextWin32Props } from './TextWin32.Props';
+
+/**
+ * All of TOrigin except Key from TUse
+ */
+type UseFrom<TOrigin, TUse, Key extends keyof TUse> = Pick<TOrigin, Exclude<keyof TOrigin, Key>> & Pick<TUse, Key>;
 
 /**
  * React-native <Text> control with additional Win32-specific functionality.

package/src/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx

@@ -5,7 +5,7 @@ import {NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';
 import {Insets} from 'react-native/types/public/Insets';
 import { TextWin32 } from '../../Text/TextWin32';
 import { ViewWin32 } from '../../View/ViewWin32';
-import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewWin32.Props';
+import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewPropTypes.win32';
 import { TouchableWin32 } from '../TouchableWin32';
 import { IPressEvent, IRenderChild } from '../TouchableWin32.Types';
 import { ITouchableWin32State } from '../TouchableWin32.Props';
@@ -263,12 +263,12 @@ class TouchableWin32HighlightComponent extends React.Component<ITouchableWin32Hi
   private readonly _touchableHandleKeyPressDown = (ev: IKeyboardEvent) => {
     this.props.onKeyPressDown && this.props.onKeyPressDown(ev);
   }
-  private readonly _mouseEnter = (): void => {
-    this.props.onMouseEnter && this.props.onMouseEnter();
+  private readonly _mouseEnter = (mouseEvent): void => {
+    this.props.onMouseEnter && this.props.onMouseEnter(mouseEvent);
     this.setState({ isMouseIn: true });
   };
-  private readonly _mouseLeave = (): void => {
-    this.props.onMouseLeave && this.props.onMouseLeave();
+  private readonly _mouseLeave = (mouseEvent): void => {
+    this.props.onMouseLeave && this.props.onMouseLeave(mouseEvent);
     this.setState({ isMouseIn: false });
   };
   private readonly _onFocus = (ev: NativeSyntheticEvent<{}>): void => {

package/src/Libraries/Components/Touchable/TouchableNativeFeedback.win32.d.ts

@@ -0,0 +1,119 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import type * as React from 'react';
+import {Constructor} from '../../../types/private/Utilities';
+import {ColorValue} from '../../StyleSheet/StyleSheet';
+import {TouchableMixin} from './Touchable';
+
+import type {TVProps} from './TouchableOpacity';
+import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
+
+interface BaseBackgroundPropType {
+  type: string;
+  rippleRadius?: number | null | undefined;
+}
+
+interface RippleBackgroundPropType extends BaseBackgroundPropType {
+  type: 'RippleAndroid';
+  borderless: boolean;
+  color?: number | null | undefined;
+}
+
+interface ThemeAttributeBackgroundPropType extends BaseBackgroundPropType {
+  type: 'ThemeAttrAndroid';
+  attribute: string;
+}
+
+type BackgroundPropType =
+  | RippleBackgroundPropType
+  | ThemeAttributeBackgroundPropType;
+
+/**
+ * @see https://reactnative.dev/docs/touchablenativefeedback#props
+ */
+export interface TouchableNativeFeedbackProps
+  extends TouchableWithoutFeedbackProps,
+    TVProps {
+  /**
+   * Determines the type of background drawable that's going to be used to display feedback.
+   * It takes an object with type property and extra data depending on the type.
+   * It's recommended to use one of the following static methods to generate that dictionary:
+   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
+   *         default background for selectable elements (?android:attr/selectableItemBackground)
+   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
+   *         theme's default background for borderless selectable elements
+   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
+   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
+   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
+   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
+   *         type is available on Android API level 21+
+   */
+  background?: BackgroundPropType | undefined;
+  useForeground?: boolean | undefined;
+
+  tooltip?: string; // Win32
+}
+
+/**
+ * A wrapper for making views respond properly to touches (Android only).
+ * On Android this component uses native state drawable to display touch feedback.
+ * At the moment it only supports having a single View instance as a child node,
+ * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
+ *
+ * Background drawable of native feedback touchable can be customized with background property.
+ *
+ * @see https://reactnative.dev/docs/touchablenativefeedback#content
+ */
+declare class TouchableNativeFeedbackComponent extends React.Component<TouchableNativeFeedbackProps> {}
+declare const TouchableNativeFeedbackBase: Constructor<TouchableMixin> &
+  typeof TouchableNativeFeedbackComponent;
+export class TouchableNativeFeedback extends TouchableNativeFeedbackBase {
+  /**
+   * Creates an object that represents android theme's default background for
+   * selectable elements (?android:attr/selectableItemBackground).
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackground(
+    rippleRadius?: number | null,
+  ): ThemeAttributeBackgroundPropType;
+
+  /**
+   * Creates an object that represent android theme's default background for borderless
+   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
+   * Available on android API level 21+.
+   *
+   * @param rippleRadius The radius of ripple effect
+   */
+  static SelectableBackgroundBorderless(
+    rippleRadius?: number | null,
+  ): ThemeAttributeBackgroundPropType;
+
+  /**
+   * Creates an object that represents ripple drawable with specified color (as a
+   * string). If property `borderless` evaluates to true the ripple will
+   * render outside of the view bounds (see native actionbar buttons as an
+   * example of that behavior). This background type is available on Android
+   * API level 21+.
+   *
+   * @param color The ripple color
+   * @param borderless If the ripple can render outside it's bounds
+   * @param rippleRadius The radius of ripple effect
+   */
+  static Ripple(
+    color: ColorValue,
+    borderless: boolean,
+    rippleRadius?: number | null,
+  ): RippleBackgroundPropType;
+  static canUseNativeForeground(): boolean;
+}
+
+// For backcompat
+export type ITouchableNativeFeedbackProps = TouchableNativeFeedbackProps;

package/src/Libraries/Components/Touchable/TouchableWin32.Props.tsx

@@ -2,7 +2,7 @@ import {ViewStyle} from 'react-native';
 import {Insets} from 'react-native/types/public/Insets';
 
 import { IPressEvent, IRenderChild, IRenderStyle } from './TouchableWin32.Types';
-import { IViewWin32Props, IKeyboardEvent } from '../View/ViewWin32.Props';
+import { IViewWin32Props, IKeyboardEvent } from '../View/ViewPropTypes.win32';
 
 export interface ITouchableWin32State {
   isPressed: boolean;

package/src/Libraries/Components/Touchable/TouchableWin32.tsx

@@ -11,7 +11,7 @@
 'use strict';
 
 import React from 'react'
-import { NativeSyntheticEvent, StyleProp, UIManager, ViewStyle } from 'react-native';
+import { NativeSyntheticEvent, StyleProp, UIManager, ViewStyle, ViewWin32 } from 'react-native';
 
 import { ITouchableWin32Props, ITouchableWin32State } from './TouchableWin32.Props';
 import {
@@ -25,8 +25,7 @@ import {
   IStateConditions,
   ITransitions,
 } from './TouchableWin32.Types';
-import { ViewWin32 } from '../View/ViewWin32';
-import { IKeyboardEvent } from '../View/ViewWin32.Props';
+import { IKeyboardEvent } from '../View/ViewPropTypes.win32';
 
 const BoundingDimensions = require('./BoundingDimensions');
 const Position = require('./Position');
@@ -568,14 +567,14 @@ export class TouchableWin32 extends React.Component<ITouchableWin32Props, IInter
     }
   };
 
-  private readonly _onMouseEnter = () => {
+  private readonly _onMouseEnter = (mouseEvent) => {
     this.setState({ isHovered: true });
-    this.props.onMouseEnter && this.props.onMouseEnter();
+    this.props.onMouseEnter && this.props.onMouseEnter(mouseEvent);
   };
 
-  private readonly _onMouseLeave = () => {
+  private readonly _onMouseLeave = (mouseEvent) => {
     this.setState({ isHovered: false });
-    this.props.onMouseLeave && this.props.onMouseLeave();
+    this.props.onMouseLeave && this.props.onMouseLeave(mouseEvent);
   };
 
   private readonly _onFocus = (ev: NativeSyntheticEvent<{}>) => {

package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx

@@ -1,8 +1,7 @@
 'use strict';
 import React from 'react'
 import { StyleSheet, Text, TouchableHighlight } from 'react-native';
-import { ViewWin32 } from '../ViewWin32';
-import { Cursor, IKeyboardEvent, IHandledKeyboardEvent } from '../ViewWin32.Props';
+import { Cursor, IKeyboardEvent, IHandledKeyboardEvent, ViewWin32 } from '@office-iss/react-native-win32';
 
 const styles = StyleSheet.create({
   border: {
@@ -29,61 +28,38 @@ interface IFocusableComponentState {
   hasFocus: boolean;
 }
 
-class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentState> {
-  private _focusTarget: ViewWin32 = null;
-  private readonly _labeledBy: React.RefObject<ViewWin32>;
+function FocusMoverTestComponent() {
+  const [hasFocus, setHasFocus] = React.useState<boolean>(false);
 
-  public constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-    };
-    this._labeledBy = React.createRef<ViewWin32>();
-  }
-  public render() {
-    return (
-      <ViewWin32>
-        <ViewWin32 ref={this._labeledBy} accessibilityLabel="separate label for test" accessibilityItemType="Comment" />
-      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
-        <TouchableHighlight onPress={this._onPress}>
-          <ViewWin32 accessibilityLabeledBy={this._labeledBy} style={styles.blackbox} />
-        </TouchableHighlight>
-        <ViewWin32
-          ref={this._setRef}
-          focusable
-          style={this.state.hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
-          onFocus={this._onFocus}
-          onBlur={this._onBlur}
-          enableFocusRing={false}
-        >
-          <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
-        </ViewWin32>
-      </ViewWin32>
-      </ViewWin32>
-    );
-  }
+  const labelId = React.useId();
 
-  private readonly _setRef = (ref: ViewWin32) => {
-    this._focusTarget = ref;
-  };
-
-  private readonly _onPress = () => {
-    if (this._focusTarget !== undefined) {
-      this._focusTarget.focus();
+  const ref = React.useRef<ViewWin32>(null);
+  const onBtnPress = () => {
+    if (ref.current) {
+      ref.current.focus();
     }
   };
 
-  private readonly _onFocus = () => {
-    this.setState({
-      hasFocus: true,
-    });
-  };
-
-  private readonly _onBlur = () => {
-    this.setState({
-      hasFocus: false,
-    });
-  };
+  return (
+    <ViewWin32>
+      <ViewWin32 nativeID={labelId} accessibilityLabel="separate label for test" accessibilityItemType="Comment" />
+    <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
+      <TouchableHighlight onPress={onBtnPress}>
+        <ViewWin32 accessibilityLabelledBy={labelId} style={styles.blackbox} />
+      </TouchableHighlight>
+      <ViewWin32
+        ref={ref}
+        focusable
+        style={hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
+        onFocus={() => setHasFocus(true)}
+        onBlur={() => setHasFocus(false)}
+        enableFocusRing={false}
+      >
+        <Text>{hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
+      </ViewWin32>
+    </ViewWin32>
+    </ViewWin32>
+  );
 }
 
 interface IKeyboardableComponentState {