[fix] Patch internal sources of deprecation warnings

packages/react-native-web-docs/src/pages/docs/concepts/localization.md

@@ -50,7 +50,7 @@ The `useLocaleContext` API can be used for fine-grained control of layout, e.g.,
 const { direction, locale } = useLocaleContext();
 
 const isRTL = direction === 'rtl';
-const style = { transform: [{ scaleX: isRTL ? -1 : 1 }] };
+const style = { scaleX: isRTL ? -1 : 1 };
 
 <Image source={'forward.svg'} style={style} />
 <Image source={isRTL ? 'back.svg' : 'forward.svg'} />

packages/react-native-web-examples/pages/localization/index.js

@@ -452,7 +452,7 @@ class LayoutRTLExample extends React.Component {
                 source={iconSource}
                 style={[
                   styles.image,
-                  { transform: [{ scaleX: this.state.isRTL ? -1 : 1 }] }
+                  { transform: `scaleX(${this.state.isRTL ? -1 : 1})` }
                 ]}
               />
               <Text style={styles.fontSizeSmall}>RTL flip</Text>

packages/react-native-web-examples/pages/pan-responder/index.js

@@ -121,7 +121,7 @@ class LocationXY extends React.Component {
   };
 
   render() {
-    const transform = { transform: [{ translateX: this.state.translateX }] };
+    const transform = { transform: `translateX${this.state.translateX}` };
     return (
       <View style={styles.box}>
         <View style={styles.outer} {...this.panResponder.panHandlers}>

packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap

@@ -9,7 +9,7 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`]
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -46,7 +46,7 @@ exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is se
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -82,7 +82,7 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -118,7 +118,7 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -181,7 +181,7 @@ exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -217,7 +217,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
   >
     <svg
       height="100%"
@@ -253,7 +253,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -290,7 +290,7 @@ exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -326,7 +326,7 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -362,7 +362,7 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
     style="height: 30px; width: 30px;"
   >
     <svg
@@ -400,7 +400,7 @@ exports[`components/ActivityIndicator prop "style" value is set 1`] = `
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -437,7 +437,7 @@ exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"

packages/react-native-web/src/exports/ActivityIndicator/index.js

@@ -91,8 +91,8 @@ const styles = StyleSheet.create({
     animationDuration: '0.75s',
     animationKeyframes: [
       {
-        '0%': { transform: [{ rotate: '0deg' }] },
-        '100%': { transform: [{ rotate: '360deg' }] }
+        '0%': { transform: 'rotate(0deg)' },
+        '100%': { transform: 'rotate(360deg)' }
       }
     ],
     animationTimingFunction: 'linear',

packages/react-native-web/src/exports/AppRegistry/AppContainer.js

@@ -26,12 +26,7 @@ const AppContainer: React.AbstractComponent<Props> = React.forwardRef(
     const { children, WrapperComponent } = props;
 
     let innerView = (
-      <View
-        children={children}
-        key={1}
-        pointerEvents="box-none"
-        style={styles.appContainer}
-      />
+      <View children={children} key={1} style={styles.appContainer} />
     );
 
     if (WrapperComponent) {
@@ -40,11 +35,7 @@ const AppContainer: React.AbstractComponent<Props> = React.forwardRef(
 
     return (
       <RootTagContext.Provider value={props.rootTag}>
-        <View
-          pointerEvents="box-none"
-          ref={forwardedRef}
-          style={styles.appContainer}
-        >
+        <View ref={forwardedRef} style={styles.appContainer}>
           {innerView}
         </View>
       </RootTagContext.Provider>
@@ -58,6 +49,7 @@ export default AppContainer;
 
 const styles = StyleSheet.create({
   appContainer: {
-    flex: 1
+    flex: 1,
+    pointerEvents: 'box-none'
   }
 });

packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js

@@ -18,7 +18,7 @@ describe('CheckBox', () => {
   describe('prop "accessibilityLabel"', () => {
     test('value is set', () => {
       const { container } = render(
-        <CheckBox accessibilityLabel="accessibility label" />
+        <CheckBox aria-label="accessibility label" />
       );
       expect(container.firstChild).toMatchSnapshot();
     });
@@ -26,7 +26,7 @@ describe('CheckBox', () => {
 
   describe('prop "accessibilityReadOnly"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox accessibilityReadOnly={true} />);
+      const { container } = render(<CheckBox aria-readonly={true} />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });
@@ -61,7 +61,7 @@ describe('CheckBox', () => {
 
   describe('prop "nativeID"', () => {
     test('value is set', () => {
-      const { container } = render(<CheckBox nativeID="123" />);
+      const { container } = render(<CheckBox id="123" />);
       expect(container.firstChild).toMatchSnapshot();
     });
   });

packages/react-native-web/src/exports/CheckBox/index.js

@@ -30,7 +30,7 @@ const CheckBox: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, forwardedRef) => {
   const {
-    accessibilityReadOnly,
+    'aria-readonly': ariaReadOnly,
     color,
     disabled,
     onChange,
@@ -64,7 +64,7 @@ const CheckBox: React.AbstractComponent<
     checked: value,
     disabled: disabled,
     onChange: handleChange,
-    readOnly: accessibilityReadOnly,
+    readOnly: ariaReadOnly || other.accessibilityReadOnly,
     ref: forwardedRef,
     style: [styles.nativeControl, styles.cursorInherit],
     type: 'checkbox'
@@ -73,8 +73,8 @@ const CheckBox: React.AbstractComponent<
   return (
     <View
       {...other}
-      accessibilityDisabled={disabled}
-      accessibilityReadOnly={accessibilityReadOnly}
+      aria-disabled={disabled}
+      aria-readonly={ariaReadOnly}
       style={[styles.root, style, disabled && styles.cursorDefault]}
     >
       {fakeControl}

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/Image prop "accessibilityLabel" 1`] = `
+exports[`components/Image prop "aria-label" 1`] = `
 <div
   aria-label="accessibilityLabel"
   class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -26,13 +26,10 @@ describe('components/Image', () => {
     window.Image = originalImage;
   });
 
-  test('prop "accessibilityLabel"', () => {
+  test('prop "aria-label"', () => {
     const defaultSource = { uri: 'https://google.com/favicon.ico' };
     const { container } = render(
-      <Image
-        accessibilityLabel="accessibilityLabel"
-        defaultSource={defaultSource}
-      />
+      <Image aria-label="accessibilityLabel" defaultSource={defaultSource} />
     );
     expect(container.firstChild).toMatchSnapshot();
   });

packages/react-native-web/src/exports/Image/index.js

@@ -182,7 +182,7 @@ const Image: React.AbstractComponent<
   React.ElementRef<typeof View>
 > = React.forwardRef((props, ref) => {
   const {
-    accessibilityLabel,
+    'aria-label': ariaLabel,
     blurRadius,
     defaultSource,
     draggable,
@@ -240,7 +240,7 @@ const Image: React.AbstractComponent<
   // Accessibility image allows users to trigger the browser's image context menu
   const hiddenImage = displayImageUri
     ? createElement('img', {
-        alt: accessibilityLabel || '',
+        alt: ariaLabel || '',
         style: styles.accessibilityImage$raw,
         draggable: draggable || false,
         ref: hiddenImageRef,
@@ -327,7 +327,7 @@ const Image: React.AbstractComponent<
   return (
     <View
       {...rest}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={ariaLabel}
       onLayout={handleLayout}
       pointerEvents={pointerEvents}
       ref={ref}

packages/react-native-web/src/exports/Modal/ModalAnimation.js

@@ -117,17 +117,17 @@ const styles = StyleSheet.create({
     }
   },
   slideIn: {
-    transform: [{ translateY: '0%' }],
+    transform: 'translateY(0%)',
     animationKeyframes: {
-      '0%': { transform: [{ translateY: '100%' }] },
-      '100%': { transform: [{ translateY: '0%' }] }
+      '0%': { transform: 'translateY(100%)' },
+      '100%': { transform: 'translateY(0%)' }
     }
   },
   slideOut: {
-    transform: [{ translateY: '100%' }],
+    transform: 'translateY(100%)',
     animationKeyframes: {
-      '0%': { transform: [{ translateY: '0%' }] },
-      '100%': { transform: [{ translateY: '100%' }] }
+      '0%': { transform: 'translateY(0%)' },
+      '100%': { transform: 'translateY(100%)' }
     }
   },
   hidden: {

packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap

@@ -137,6 +137,7 @@ exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
 <button
   class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   role="button"
+  tabindex="0"
   type="button"
 />
 `;
@@ -161,6 +162,7 @@ exports[`components/Pressable prop "href" 1`] = `
 <a
   class="css-view-175oi2r r-cursor-1loqt21 r-touchAction-1otgn73"
   href="#href"
+  tabindex="0"
 />
 `;
 

packages/react-native-web/src/exports/Pressable/index.js

@@ -75,7 +75,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     delayPressIn,
     delayPressOut,
     disabled,
-    focusable,
     onBlur,
     onContextMenu,
     onFocus,
@@ -88,6 +87,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onPressIn,
     onPressOut,
     style,
+    tabIndex,
     testOnly_hovered,
     testOnly_pressed,
     ...rest
@@ -190,22 +190,28 @@ function Pressable(props: Props, forwardedRef): React.Node {
     [onKeyDown, onKeyDownPress]
   );
 
+  let _tabIndex;
+  if (tabIndex !== undefined) {
+    _tabIndex = tabIndex;
+  } else {
+    _tabIndex = disabled ? -1 : 0;
+  }
+
   return (
     <View
       {...rest}
       {...pressEventHandlers}
-      accessibilityDisabled={disabled}
-      focusable={!disabled && focusable !== false}
+      aria-disabled={disabled}
       onBlur={blurHandler}
       onContextMenu={contextMenuHandler}
       onFocus={focusHandler}
       onKeyDown={keyDownHandler}
-      pointerEvents={disabled ? 'none' : rest.pointerEvents}
       ref={setRef}
       style={[
-        !disabled && styles.root,
+        disabled ? styles.disabled : styles.active,
         typeof style === 'function' ? style(interactionState) : style
       ]}
+      tabIndex={_tabIndex}
     >
       {typeof children === 'function' ? children(interactionState) : children}
     </View>
@@ -218,9 +224,12 @@ function useForceableState(forced: boolean): [boolean, (boolean) => void] {
 }
 
 const styles = StyleSheet.create({
-  root: {
+  active: {
     cursor: 'pointer',
     touchAction: 'manipulation'
+  },
+  disabled: {
+    pointerEvents: 'none'
   }
 });
 

packages/react-native-web/src/exports/ProgressBar/index.js

@@ -41,11 +41,11 @@ const ProgressBar: React.AbstractComponent<
   return (
     <View
       {...other}
-      accessibilityRole="progressbar"
-      accessibilityValueMax={100}
-      accessibilityValueMin={0}
-      accessibilityValueNow={indeterminate ? null : percentageProgress}
+      aria-valuemax={100}
+      aria-valuemin={0}
+      aria-valuenow={indeterminate ? null : percentageProgress}
       ref={ref}
+      role="progressbar"
       style={[styles.track, style, { backgroundColor: trackColor }]}
     >
       <View
@@ -78,8 +78,8 @@ const styles = StyleSheet.create({
     animationDuration: '1s',
     animationKeyframes: [
       {
-        '0%': { transform: [{ translateX: '-100%' }] },
-        '100%': { transform: [{ translateX: '400%' }] }
+        '0%': { transform: 'translateX(-100%)' },
+        '100%': { transform: 'translateX(400%)' }
       }
     ],
     animationTimingFunction: 'linear',

packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js

@@ -68,14 +68,12 @@ describe('components/ScrollView', () => {
       let rerender;
       act(() => {
         ({ rerender } = render(
-          <ScrollView nativeID="123" ref={ref} style={{ borderWidth: 5 }} />
+          <ScrollView id="123" ref={ref} style={{ borderWidth: 5 }} />
         ));
       });
       expect(ref).toHaveBeenCalledTimes(1);
       act(() => {
-        rerender(
-          <ScrollView nativeID="1234" ref={ref} style={{ borderWidth: 6 }} />
-        );
+        rerender(<ScrollView id="1234" ref={ref} style={{ borderWidth: 6 }} />);
       });
       expect(ref).toHaveBeenCalledTimes(1);
     });

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -2149,10 +2149,10 @@ function describeNestedLists(childList: {
 
 const styles = StyleSheet.create({
   verticallyInverted: {
-    transform: [{scaleY: -1}],
+    transform: 'scaleY(-1)',
   },
   horizontallyInverted: {
-    transform: [{scaleX: -1}],
+    transform: 'scaleX(-1)',
   },
   row: {
     flexDirection: 'row',