How to use react-native-windows - 10 common examples

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,

);
  }
}

class HighContrastExample extends React.Component {
  state = {
    isHighContrast: AppTheme.isHighContrast,
    highContrastColorValues: AppTheme.currentHighContrastColors,
    currentTheme: AppTheme.currentTheme,
  };

  componentDidMount() {
    AppTheme.addListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.addListener('appThemeChanged', this.onAppThemeChanged);
  }

  componenetWillUnmount() {
    AppTheme.removeListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.removeListener('appThemeChanged', this.onAppThemeChanged);
  }

  // TODO: Make args props
  onHighContrastChanged = (event: IHighContrastChangedEvent) => {
    this.setState({
      isHighContrast: event.isHighContrast,

var EventEmitter = require('EventEmitter');
var NativeMethodsMixin = require('NativeMethodsMixin');
var Platform = require('Platform');
var PropTypes = require('prop-types');
var React = require('React');
var createReactClass = require('create-react-class');
var ReactNative = require('ReactNative');
var StyleSheet = require('StyleSheet');
var Text = require('Text');
var TextInputState = require('TextInputState');
var TimerMixin = require('react-timer-mixin');
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
var UIManager = require('UIManager');
var ViewPropTypes = require('ViewPropTypes');

var PasswordBoxWindows = require('react-native-windows').PasswordBoxWindows;
var emptyFunction = require('fbjs/lib/emptyFunction');
var invariant = require('fbjs/lib/invariant');

var requireNativeComponent = require('requireNativeComponent');

var onlyMultiline = {
  onTextInput: true, // not supported in Open Source yet
  children: true,
};

var notMultiline = {
  // nothing yet
};

if (Platform.OS === 'android') {
  var AndroidTextInput = requireNativeComponent('AndroidTextInput', null);

StyleSheet,
  Text,
  TextInput,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';
import {
  supportKeyboard,
  IKeyboardEvent,
  ViewWindows,
  Picker,
} from 'react-native-windows';

// TextInput2 is used to verify supportKeyboard + focus
const TextInput2 = supportKeyboard(TextInput);

const styles = StyleSheet.create({
  border: {
    borderStyle: 'dotted',
    borderColor: 'black',
  },
  keyComponentRoot: {
    borderWidth: 2,
    flexDirection: 'column',
    marginVertical: 5,
    backgroundColor: 'whitesmoke',
    justifyContent: 'space-around',
  },
  keyEnterVisualizer: {
    margin: 5,
    alignItems: 'center',

/>
        
        
    );
  }
}

class HighContrastExample extends React.Component {
  state = {
    isHighContrast: AppTheme.isHighContrast,
    highContrastColorValues: AppTheme.currentHighContrastColors,
    currentTheme: AppTheme.currentTheme,
  };

  componentDidMount() {
    AppTheme.addListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.addListener('appThemeChanged', this.onAppThemeChanged);
  }

  componenetWillUnmount() {
    AppTheme.removeListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.removeListener('appThemeChanged', this.onAppThemeChanged);
  }

  // TODO: Make args props
  onHighContrastChanged = (event: IHighContrastChangedEvent) => {
    this.setState({

accessibilityHint="A hint for the blue box."
        />
        
        
    );
  }
}

class HighContrastExample extends React.Component {
  state = {
    isHighContrast: AppTheme.isHighContrast,
    highContrastColorValues: AppTheme.currentHighContrastColors,
    currentTheme: AppTheme.currentTheme,
  };

  componentDidMount() {
    AppTheme.addListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.addListener('appThemeChanged', this.onAppThemeChanged);
  }

  componenetWillUnmount() {
    AppTheme.removeListener('highContrastChanged', this.onHighContrastChanged);
    AppTheme.removeListener('appThemeChanged', this.onAppThemeChanged);
  }

  // TODO: Make args props
  onHighContrastChanged = (event: IHighContrastChangedEvent) => {

protected _render(internalProps: RN.TextProps, onMount: (text: any) => void) {
        if (this.context && !this.context.isRxParentAText) {
            // Standalone link. We use a keyboard focusable RN.Text
            return this._renderLinkAsFocusableText(internalProps, onMount);
        } else if (RNW.HyperlinkWindows && !this.state.isRestrictedOrLimited) {
            // Inline Link. We use a native Hyperlink inline if RN supports it and element is not "focus restricted/limited"
            return this._renderLinkAsNativeHyperlink(internalProps);
        } else {
            // Inline Link. We defer to base class (that uses a plain RN.Text) for the rest of the cases.
            return super._render(internalProps, onMount);
        }
    }