How to use the react-native-windows.createFocusableComponent function in react-native-windows

import { FocusArbitratorProvider } from '../common/utils/AutoFocusHelper';
import EventHelpers from '../native-common/utils/EventHelpers';
import { applyFocusableComponentMixin, FocusManager, FocusManagerFocusableComponent } from '../native-desktop/utils/FocusManager';
import { Types } from '../common/Interfaces';
import { LinkBase } from '../native-common/Link';
import UserInterface from '../native-common/UserInterface';

const KEY_CODE_ENTER = 13;
const KEY_CODE_SPACE = 32;
const KEY_CODE_F10 = 121;
const KEY_CODE_APP = 500;

const DOWN_KEYCODES = [KEY_CODE_SPACE, KEY_CODE_ENTER, KEY_CODE_APP, KEY_CODE_F10];
const UP_KEYCODES = [KEY_CODE_SPACE];

const FocusableText = RNW.createFocusableComponent(RN.Text);

export interface LinkState {
    isRestrictedOrLimited: boolean;
}

type Without = Pick>;

export class Link extends LinkBase implements FocusManagerFocusableComponent {

    // Offset to show context menu using keyboard.
    protected _getContextMenuOffset() {
        return { x: 0, y: 0 };
    }

    constructor(props: Types.LinkProps) {
        super(props);

const KEY_CODE_SPACE = 32;
const KEY_CODE_F10 = 121;
const KEY_CODE_APP = 500;

const DOWN_KEYCODES = [KEY_CODE_SPACE, KEY_CODE_ENTER, KEY_CODE_F10, KEY_CODE_APP];
const UP_KEYCODES = [KEY_CODE_SPACE];

export interface ViewContext extends ViewContextCommon {
    isRxParentAText?: boolean;
    focusManager?: FocusManager;
    popupContainer?: PopupContainerView;
    isRxParentAContextMenuResponder?: boolean;
    isRxParentAFocusableInSameFocusManager?: boolean;
}

const FocusableView = RNW.createFocusableComponent(RN.View);
const FocusableAnimatedView = RNW.createFocusableComponent(RN.Animated.View);

export class View extends ViewCommon implements React.ChildContextProvider, FocusManagerFocusableComponent {
    static contextTypes: React.ValidationMap = {
        isRxParentAText: PropTypes.bool,
        focusManager: PropTypes.object,
        popupContainer: PropTypes.object,
        ...ViewCommon.contextTypes
    };
    // Context is provided by super - just re-typing here
    context!: ViewContext;

    static childContextTypes: React.ValidationMap = {
        isRxParentAText: PropTypes.bool.isRequired,
        focusManager: PropTypes.object,
        popupContainer: PropTypes.object,

import assert from '../common/assert';
import { Button as ButtonBase, ButtonContext as ButtonContextBase } from '../native-common/Button';
import EventHelpers from '../native-common/utils/EventHelpers';
import { applyFocusableComponentMixin, FocusManagerFocusableComponent } from '../native-desktop/utils/FocusManager';
import { Types } from '../common/Interfaces';
import UserInterface from '../native-common/UserInterface';

const KEY_CODE_ENTER = 13;
const KEY_CODE_SPACE = 32;
const KEY_CODE_F10 = 121;
const KEY_CODE_APP = 500;

const DOWN_KEYCODES = [KEY_CODE_SPACE, KEY_CODE_ENTER, KEY_CODE_F10, KEY_CODE_APP];
const UP_KEYCODES = [KEY_CODE_SPACE];

const FocusableAnimatedView = RNW.createFocusableComponent(RN.Animated.View);

export interface ButtonContext extends ButtonContextBase {
    isRxParentAContextMenuResponder?: boolean;
    isRxParentAFocusableInSameFocusManager?: boolean;
}

export class Button extends ButtonBase implements React.ChildContextProvider, FocusManagerFocusableComponent {

    // Context is provided by super - just re-typing here
    context!: ButtonContext;

    static childContextTypes: React.ValidationMap = {
        isRxParentAContextMenuResponder: PropTypes.bool,
        isRxParentAFocusableInSameFocusManager: PropTypes.bool,
        ...ButtonBase.childContextTypes
    };

const KEY_CODE_F10 = 121;
const KEY_CODE_APP = 500;

const DOWN_KEYCODES = [KEY_CODE_SPACE, KEY_CODE_ENTER, KEY_CODE_F10, KEY_CODE_APP];
const UP_KEYCODES = [KEY_CODE_SPACE];

export interface ViewContext extends ViewContextCommon {
    isRxParentAText?: boolean;
    focusManager?: FocusManager;
    popupContainer?: PopupContainerView;
    isRxParentAContextMenuResponder?: boolean;
    isRxParentAFocusableInSameFocusManager?: boolean;
}

const FocusableView = RNW.createFocusableComponent(RN.View);
const FocusableAnimatedView = RNW.createFocusableComponent(RN.Animated.View);

export class View extends ViewCommon implements React.ChildContextProvider, FocusManagerFocusableComponent {
    static contextTypes: React.ValidationMap = {
        isRxParentAText: PropTypes.bool,
        focusManager: PropTypes.object,
        popupContainer: PropTypes.object,
        ...ViewCommon.contextTypes
    };
    // Context is provided by super - just re-typing here
    context!: ViewContext;

    static childContextTypes: React.ValidationMap = {
        isRxParentAText: PropTypes.bool.isRequired,
        focusManager: PropTypes.object,
        popupContainer: PropTypes.object,
        isRxParentAContextMenuResponder: PropTypes.bool,