Compare text

Find the difference between two text files

Real-time diff

Unified diff

Collapse lines

Highlight change

Syntax highlighting

Tools

Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

View.js

Created 2 years agoDiff never expires

189 lines

203 lines

/**

* 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

* @flow strict-local

import type {ViewProps} from './ViewPropTypes';

import flattenStyle from '../../StyleSheet/flattenStyle';

import TextAncestor from '../../Text/TextAncestor';

import ViewNativeComponent from './ViewNativeComponent';

import * as React from 'react';

export type Props = ViewProps;

let didWarnAboutGap = false;

/**

* The most fundamental component for building a UI, View is a container that

* supports layout with flexbox, style, some touch handling, and accessibility

* controls.

* @see https://reactnative.dev/docs/view

const View: React.AbstractComponent<

ViewProps,

React.ElementRef<typeof ViewNativeComponent>,

React.ElementRef<typeof ViewNativeComponent>

> = React.forwardRef(

> = React.forwardRef((props: ViewProps, forwardedRef) => {

(

const {

{

accessibilityElementsHidden,

accessibilityLabel,

accessibilityLabelledBy,

accessibilityLiveRegion,

accessibilityRole,

accessibilityState,

accessibilityValue,

'aria-busy': ariaBusy,

'aria-checked': ariaChecked,

'aria-disabled': ariaDisabled,

'aria-expanded': ariaExpanded,

'aria-hidden': ariaHidden,

'aria-label': ariaLabel,

'aria-labelledby': ariaLabelledBy,

'aria-live': ariaLive,

'aria-selected': ariaSelected,

'aria-valuemax': ariaValueMax,

'aria-valuemin': ariaValueMin,

'aria-valuenow': ariaValueNow,

'aria-valuetext': ariaValueText,

focusable,

id,

importantForAccessibility,

nativeID,

pointerEvents,

role,

style,

tabIndex,

gap,

...otherProps

rowGap,

}: ViewProps,

columnGap,

forwardedRef,

...otherProps

) => {

} = props;

const _accessibilityLabelledBy =

ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;

const _accessibilityState = {

if (__DEV__) {

busy: ariaBusy ?? accessibilityState?.busy,

if (

checked: ariaChecked ?? accessibilityState?.checked,

('gap' in props || 'columnGap' in props || 'rowGap' in props) &&

disabled: ariaDisabled ?? accessibilityState?.disabled,

!didWarnAboutGap

expanded: ariaExpanded ?? accessibilityState?.expanded,

) {

selected: ariaSelected ?? accessibilityState?.selected,

console.warn(

};

'<View> was passed prop either `gap`, `columnGap`, `rowGap`. ' +

'Currently this is a no-op, but in future versions, this will ' +

'apply these props as styles.'

);

didWarnAboutGap = true;

}

const _accessibilityValue = {

const _accessibilityLabelledBy =

max: ariaValueMax ?? accessibilityValue?.max,

ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;

min: ariaValueMin ?? accessibilityValue?.min,

now: ariaValueNow ?? accessibilityValue?.now,

text: ariaValueText ?? accessibilityValue?.text,

};

// Map role values to AccessibilityRole values

const _accessibilityState = {

const roleToAccessibilityRoleMapping = {

busy: ariaBusy ?? accessibilityState?.busy,

alert: 'alert',

checked: ariaChecked ?? accessibilityState?.checked,

alertdialog: undefined,

disabled: ariaDisabled ?? accessibilityState?.disabled,

application: undefined,

expanded: ariaExpanded ?? accessibilityState?.expanded,

article: undefined,

selected: ariaSelected ?? accessibilityState?.selected,

banner: undefined,

};

button: 'button',

cell: undefined,

checkbox: 'checkbox',

columnheader: undefined,

combobox: 'combobox',

complementary: undefined,

contentinfo: undefined,

definition: undefined,

dialog: undefined,

directory: undefined,

document: undefined,

feed: undefined,

figure: undefined,

form: undefined,

grid: 'grid',

group: undefined,

heading: 'header',

img: 'image',

link: 'link',

list: 'list',

listitem: undefined,

log: undefined,

main: undefined,

marquee: undefined,

math: undefined,

menu: 'menu',

menubar: 'menubar',

menuitem: 'menuitem',

meter: undefined,

navigation: undefined,

none: 'none',

note: undefined,

presentation: 'none',

progressbar: 'progressbar',

radio: 'radio',

radiogroup: 'radiogroup',

region: undefined,

row: undefined,

rowgroup: undefined,

rowheader: undefined,

scrollbar: 'scrollbar',

searchbox: 'search',

separator: undefined,

slider: 'adjustable',

spinbutton: 'spinbutton',

status: undefined,

summary: 'summary',

switch: 'switch',

tab: 'tab',

table: undefined,

tablist: 'tablist',

tabpanel: undefined,

term: undefined,

timer: 'timer',

toolbar: 'toolbar',

tooltip: undefined,

tree: undefined,

treegrid: undefined,

treeitem: undefined,

};

const flattenedStyle = flattenStyle(style);

const _accessibilityValue = {

const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;

max: ariaValueMax ?? accessibilityValue?.max,

min: ariaValueMin ?? accessibilityValue?.min,

now: ariaValueNow ?? accessibilityValue?.now,

text: ariaValueText ?? accessibilityValue?.text,

};

return (

// Map role values to AccessibilityRole values

<TextAncestor.Provider value={false}>

const roleToAccessibilityRoleMapping = {

<ViewNativeComponent

alert: 'alert',

{...otherProps}

alertdialog: undefined,

accessibilityLiveRegion={

application: undefined,

ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion

article: undefined,

}

banner: undefined,

accessibilityLabel={ariaLabel ?? accessibilityLabel}

button: 'button',

focusable={tabIndex !== undefined ? !tabIndex : focusable}

cell: undefined,

accessibilityState={_accessibilityState}

checkbox: 'checkbox',

accessibilityRole={

columnheader: undefined,

role ? roleToAccessibilityRoleMapping[role] : accessibilityRole

combobox: 'combobox',

}

complementary: undefined,

accessibilityElementsHidden={

contentinfo: undefined,

ariaHidden ?? accessibilityElementsHidden

definition: undefined,

}

dialog: undefined,

accessibilityLabelledBy={_accessibilityLabelledBy}

directory: undefined,

accessibilityValue={_accessibilityValue}

document: undefined,

importantForAccessibility={

feed: undefined,

ariaHidden === true

figure: undefined,

? 'no-hide-descendants'

form: undefined,

: importantForAccessibility

grid: 'grid',

}

group: undefined,

nativeID={id ?? nativeID}

heading: 'header',

style={style}

img: 'image',

pointerEvents={newPointerEvents}

link: 'link',

ref={forwardedRef}

list: 'list',

listitem: undefined,

</TextAncestor.Provider>

log: undefined,

);

main: undefined,

marquee: undefined,

);

math: undefined,

menu: 'menu',

menubar: 'menubar',

menuitem: 'menuitem',

meter: undefined,

navigation: undefined,

none: 'none',

note: undefined,

presentation: 'none',

progressbar: 'progressbar',

radio: 'radio',

radiogroup: 'radiogroup',

region: undefined,

row: undefined,

rowgroup: undefined,

rowheader: undefined,

scrollbar: 'scrollbar',

searchbox: 'search',

separator: undefined,

slider: 'adjustable',

spinbutton: 'spinbutton',

status: undefined,

summary: 'summary',

switch: 'switch',

tab: 'tab',

table: undefined,

tablist: 'tablist',

tabpanel: undefined,

term: undefined,

timer: 'timer',

toolbar: 'toolbar',

tooltip: undefined,

tree: undefined,

treegrid: undefined,

treeitem: undefined,

};

const flattenedStyle = flattenStyle(style);

const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;

return (

<TextAncestor.Provider value={false}>

<ViewNativeComponent

{...otherProps}

accessibilityLiveRegion={

ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion

}

accessibilityLabel={ariaLabel ?? accessibilityLabel}

focusable={tabIndex !== undefined ? !tabIndex : focusable}

accessibilityState={_accessibilityState}

accessibilityRole={

role ? roleToAccessibilityRoleMapping[role] : accessibilityRole

}

accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}

accessibilityLabelledBy={_accessibilityLabelledBy}

accessibilityValue={_accessibilityValue}

importantForAccessibility={

ariaHidden === true

? 'no-hide-descendants'

: importantForAccessibility

}

nativeID={id ?? nativeID}

style={style}

pointerEvents={newPointerEvents}

ref={forwardedRef}

</TextAncestor.Provider>

);

});

View.displayName = 'View';

module.exports = View;

Saved diffs

Original text

Open file

/**
 * 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
 * @flow strict-local
 */

import type {ViewProps} from './ViewPropTypes';

import flattenStyle from '../../StyleSheet/flattenStyle';
import TextAncestor from '../../Text/TextAncestor';
import ViewNativeComponent from './ViewNativeComponent';
import * as React from 'react';

export type Props = ViewProps;

/**
 * The most fundamental component for building a UI, View is a container that
 * supports layout with flexbox, style, some touch handling, and accessibility
 * controls.
 *
 * @see https://reactnative.dev/docs/view
 */
const View: React.AbstractComponent<
  ViewProps,
  React.ElementRef<typeof ViewNativeComponent>,
> = React.forwardRef(
  (
    {
      accessibilityElementsHidden,
      accessibilityLabel,
      accessibilityLabelledBy,
      accessibilityLiveRegion,
      accessibilityRole,
      accessibilityState,
      accessibilityValue,
      'aria-busy': ariaBusy,
      'aria-checked': ariaChecked,
      'aria-disabled': ariaDisabled,
      'aria-expanded': ariaExpanded,
      'aria-hidden': ariaHidden,
      'aria-label': ariaLabel,
      'aria-labelledby': ariaLabelledBy,
      'aria-live': ariaLive,
      'aria-selected': ariaSelected,
      'aria-valuemax': ariaValueMax,
      'aria-valuemin': ariaValueMin,
      'aria-valuenow': ariaValueNow,
      'aria-valuetext': ariaValueText,
      focusable,
      id,
      importantForAccessibility,
      nativeID,
      pointerEvents,
      role,
      style,
      tabIndex,
      ...otherProps
    }: ViewProps,
    forwardedRef,
  ) => {
    const _accessibilityLabelledBy =
      ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;

const _accessibilityState = {
      busy: ariaBusy ?? accessibilityState?.busy,
      checked: ariaChecked ?? accessibilityState?.checked,
      disabled: ariaDisabled ?? accessibilityState?.disabled,
      expanded: ariaExpanded ?? accessibilityState?.expanded,
      selected: ariaSelected ?? accessibilityState?.selected,
    };

const _accessibilityValue = {
      max: ariaValueMax ?? accessibilityValue?.max,
      min: ariaValueMin ?? accessibilityValue?.min,
      now: ariaValueNow ?? accessibilityValue?.now,
      text: ariaValueText ?? accessibilityValue?.text,
    };

// Map role values to AccessibilityRole values
    const roleToAccessibilityRoleMapping = {
      alert: 'alert',
      alertdialog: undefined,
      application: undefined,
      article: undefined,
      banner: undefined,
      button: 'button',
      cell: undefined,
      checkbox: 'checkbox',
      columnheader: undefined,
      combobox: 'combobox',
      complementary: undefined,
      contentinfo: undefined,
      definition: undefined,
      dialog: undefined,
      directory: undefined,
      document: undefined,
      feed: undefined,
      figure: undefined,
      form: undefined,
      grid: 'grid',
      group: undefined,
      heading: 'header',
      img: 'image',
      link: 'link',
      list: 'list',
      listitem: undefined,
      log: undefined,
      main: undefined,
      marquee: undefined,
      math: undefined,
      menu: 'menu',
      menubar: 'menubar',
      menuitem: 'menuitem',
      meter: undefined,
      navigation: undefined,
      none: 'none',
      note: undefined,
      presentation: 'none',
      progressbar: 'progressbar',
      radio: 'radio',
      radiogroup: 'radiogroup',
      region: undefined,
      row: undefined,
      rowgroup: undefined,
      rowheader: undefined,
      scrollbar: 'scrollbar',
      searchbox: 'search',
      separator: undefined,
      slider: 'adjustable',
      spinbutton: 'spinbutton',
      status: undefined,
      summary: 'summary',
      switch: 'switch',
      tab: 'tab',
      table: undefined,
      tablist: 'tablist',
      tabpanel: undefined,
      term: undefined,
      timer: 'timer',
      toolbar: 'toolbar',
      tooltip: undefined,
      tree: undefined,
      treegrid: undefined,
      treeitem: undefined,
    };

const flattenedStyle = flattenStyle(style);
    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;

return (
      <TextAncestor.Provider value={false}>
        <ViewNativeComponent
          {...otherProps}
          accessibilityLiveRegion={
            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
          }
          accessibilityLabel={ariaLabel ?? accessibilityLabel}
          focusable={tabIndex !== undefined ? !tabIndex : focusable}
          accessibilityState={_accessibilityState}
          accessibilityRole={
            role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
          }
          accessibilityElementsHidden={
            ariaHidden ?? accessibilityElementsHidden
          }
          accessibilityLabelledBy={_accessibilityLabelledBy}
          accessibilityValue={_accessibilityValue}
          importantForAccessibility={
            ariaHidden === true
              ? 'no-hide-descendants'
              : importantForAccessibility
          }
          nativeID={id ?? nativeID}
          style={style}
          pointerEvents={newPointerEvents}
          ref={forwardedRef}
        />
      </TextAncestor.Provider>
    );
  },
);

View.displayName = 'View';

module.exports = View;

Changed text

Open file

import type {ViewProps} from './ViewPropTypes';

import flattenStyle from '../../StyleSheet/flattenStyle';
import TextAncestor from '../../Text/TextAncestor';
import ViewNativeComponent from './ViewNativeComponent';
import * as React from 'react';

export type Props = ViewProps;

let didWarnAboutGap = false;

/**
 * The most fundamental component for building a UI, View is a container that
 * supports layout with flexbox, style, some touch handling, and accessibility
 * controls.
 *
 * @see https://reactnative.dev/docs/view
 */
const View: React.AbstractComponent<
  ViewProps,
  React.ElementRef<typeof ViewNativeComponent>
> = React.forwardRef((props: ViewProps, forwardedRef) => {
  const {
    accessibilityElementsHidden,
    accessibilityLabel,
    accessibilityLabelledBy,
    accessibilityLiveRegion,
    accessibilityRole,
    accessibilityState,
    accessibilityValue,
    'aria-busy': ariaBusy,
    'aria-checked': ariaChecked,
    'aria-disabled': ariaDisabled,
    'aria-expanded': ariaExpanded,
    'aria-hidden': ariaHidden,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledBy,
    'aria-live': ariaLive,
    'aria-selected': ariaSelected,
    'aria-valuemax': ariaValueMax,
    'aria-valuemin': ariaValueMin,
    'aria-valuenow': ariaValueNow,
    'aria-valuetext': ariaValueText,
    focusable,
    id,
    importantForAccessibility,
    nativeID,
    pointerEvents,
    role,
    style,
    tabIndex,
    gap,
    rowGap,
    columnGap,
    ...otherProps
  } = props;

if (__DEV__) {
    if (
      ('gap' in props || 'columnGap' in props || 'rowGap' in props) &&
      !didWarnAboutGap
    ) {
      console.warn(
        '<View> was passed prop either `gap`, `columnGap`, `rowGap`. ' +
          'Currently this is a no-op, but in future versions, this will ' +
          'apply these props as styles.'
      );
      didWarnAboutGap = true;
    }
  }

const _accessibilityLabelledBy =
    ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;

const _accessibilityState = {
    busy: ariaBusy ?? accessibilityState?.busy,
    checked: ariaChecked ?? accessibilityState?.checked,
    disabled: ariaDisabled ?? accessibilityState?.disabled,
    expanded: ariaExpanded ?? accessibilityState?.expanded,
    selected: ariaSelected ?? accessibilityState?.selected,
  };

const _accessibilityValue = {
    max: ariaValueMax ?? accessibilityValue?.max,
    min: ariaValueMin ?? accessibilityValue?.min,
    now: ariaValueNow ?? accessibilityValue?.now,
    text: ariaValueText ?? accessibilityValue?.text,
  };

// Map role values to AccessibilityRole values
  const roleToAccessibilityRoleMapping = {
    alert: 'alert',
    alertdialog: undefined,
    application: undefined,
    article: undefined,
    banner: undefined,
    button: 'button',
    cell: undefined,
    checkbox: 'checkbox',
    columnheader: undefined,
    combobox: 'combobox',
    complementary: undefined,
    contentinfo: undefined,
    definition: undefined,
    dialog: undefined,
    directory: undefined,
    document: undefined,
    feed: undefined,
    figure: undefined,
    form: undefined,
    grid: 'grid',
    group: undefined,
    heading: 'header',
    img: 'image',
    link: 'link',
    list: 'list',
    listitem: undefined,
    log: undefined,
    main: undefined,
    marquee: undefined,
    math: undefined,
    menu: 'menu',
    menubar: 'menubar',
    menuitem: 'menuitem',
    meter: undefined,
    navigation: undefined,
    none: 'none',
    note: undefined,
    presentation: 'none',
    progressbar: 'progressbar',
    radio: 'radio',
    radiogroup: 'radiogroup',
    region: undefined,
    row: undefined,
    rowgroup: undefined,
    rowheader: undefined,
    scrollbar: 'scrollbar',
    searchbox: 'search',
    separator: undefined,
    slider: 'adjustable',
    spinbutton: 'spinbutton',
    status: undefined,
    summary: 'summary',
    switch: 'switch',
    tab: 'tab',
    table: undefined,
    tablist: 'tablist',
    tabpanel: undefined,
    term: undefined,
    timer: 'timer',
    toolbar: 'toolbar',
    tooltip: undefined,
    tree: undefined,
    treegrid: undefined,
    treeitem: undefined,
  };

const flattenedStyle = flattenStyle(style);
  const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;

return (
    <TextAncestor.Provider value={false}>
      <ViewNativeComponent
        {...otherProps}
        accessibilityLiveRegion={
          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
        }
        accessibilityLabel={ariaLabel ?? accessibilityLabel}
        focusable={tabIndex !== undefined ? !tabIndex : focusable}
        accessibilityState={_accessibilityState}
        accessibilityRole={
          role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
        }
        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
        accessibilityLabelledBy={_accessibilityLabelledBy}
        accessibilityValue={_accessibilityValue}
        importantForAccessibility={
          ariaHidden === true
            ? 'no-hide-descendants'
            : importantForAccessibility
        }
        nativeID={id ?? nativeID}
        style={style}
        pointerEvents={newPointerEvents}
        ref={forwardedRef}
      />
    </TextAncestor.Provider>
  );
});

View.displayName = 'View';

module.exports = View;

Words removed	267
Total words	431
Words removed (%)	61.95

Words added	327
Total words	491
Words added (%)	66.60