[fix] Patch internal sources of deprecation warnings

necolas · necolas · commit 876079a56fff · 2023-03-27T14:05:51.000-07:00
diff --git a/packages/react-native-web-docs/src/pages/docs/concepts/localization.md b/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'} />
diff --git a/packages/react-native-web-examples/pages/localization/index.js b/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>
diff --git a/packages/react-native-web-examples/pages/pan-responder/index.js b/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}>
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/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%"
diff --git a/packages/react-native-web/src/exports/ActivityIndicator/index.js b/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',
diff --git a/packages/react-native-web/src/exports/AppRegistry/AppContainer.js b/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'
   }
 });
diff --git a/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js b/packages/react-native-web/src/exports/CheckBox/__tests__/index-test.js
@@ -18,15 +18,15 @@ 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();
     });
   });
 
   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();
     });
   });
diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/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}
diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/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"
diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/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();
   });
diff --git a/packages/react-native-web/src/exports/Image/index.js b/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}
diff --git a/packages/react-native-web/src/exports/Modal/ModalAnimation.js b/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: {
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/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"
 />
 `;
 
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/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'
   }
 });
 
diff --git a/packages/react-native-web/src/exports/ProgressBar/index.js b/packages/react-native-web/src/exports/ProgressBar/index.js
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

Original file line number	Diff line number	Diff line change
@@ -9,7 +9,7 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`]
`9`	`9`	`role="progressbar"`
`10`	`10`	`>`
`11`	`11`	`<div`
`12`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`12`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`13`	`13`	`>`
`14`	`14`	`<svg`
`15`	`15`	`height="100%"`
@@ -46,7 +46,7 @@ exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is se
`46`	`46`	`role="progressbar"`
`47`	`47`	`>`
`48`	`48`	`<div`
`49`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`49`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`50`	`50`	`>`
`51`	`51`	`<svg`
`52`	`52`	`height="100%"`
@@ -82,7 +82,7 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
`82`	`82`	`role="progressbar"`
`83`	`83`	`>`
`84`	`84`	`<div`
`85`		`- 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"`
	`85`	`+ 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"`
`86`	`86`	`>`
`87`	`87`	`<svg`
`88`	`88`	`height="100%"`
@@ -118,7 +118,7 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
`118`	`118`	`role="progressbar"`
`119`	`119`	`>`
`120`	`120`	`<div`
`121`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`121`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`122`	`122`	`>`
`123`	`123`	`<svg`
`124`	`124`	`height="100%"`
@@ -181,7 +181,7 @@ exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
`181`	`181`	`role="progressbar"`
`182`	`182`	`>`
`183`	`183`	`<div`
`184`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`184`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`185`	`185`	`>`
`186`	`186`	`<svg`
`187`	`187`	`height="100%"`
@@ -217,7 +217,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
`217`	`217`	`role="progressbar"`
`218`	`218`	`>`
`219`	`219`	`<div`
`220`		`- 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"`
	`220`	`+ 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"`
`221`	`221`	`>`
`222`	`222`	`<svg`
`223`	`223`	`height="100%"`
@@ -253,7 +253,7 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
`253`	`253`	`role="progressbar"`
`254`	`254`	`>`
`255`	`255`	`<div`
`256`		`- 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"`
	`256`	`+ 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"`
`257`	`257`	`>`
`258`	`258`	`<svg`
`259`	`259`	`height="100%"`
@@ -290,7 +290,7 @@ exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
`290`	`290`	`role="progressbar"`
`291`	`291`	`>`
`292`	`292`	`<div`
`293`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`293`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`294`	`294`	`>`
`295`	`295`	`<svg`
`296`	`296`	`height="100%"`
@@ -326,7 +326,7 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
`326`	`326`	`role="progressbar"`
`327`	`327`	`>`
`328`	`328`	`<div`
`329`		`- class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`329`	`+ class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`330`	`330`	`>`
`331`	`331`	`<svg`
`332`	`332`	`height="100%"`
@@ -362,7 +362,7 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
`362`	`362`	`role="progressbar"`
`363`	`363`	`>`
`364`	`364`	`<div`
`365`		`- class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`365`	`+ class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`366`	`366`	`style="height: 30px; width: 30px;"`
`367`	`367`	`>`
`368`	`368`	`<svg`
@@ -400,7 +400,7 @@ exports[`components/ActivityIndicator prop "style" value is set 1`] = `
`400`	`400`	`style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"`
`401`	`401`	`>`
`402`	`402`	`<div`
`403`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`403`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`404`	`404`	`>`
`405`	`405`	`<svg`
`406`	`406`	`height="100%"`
@@ -437,7 +437,7 @@ exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
`437`	`437`	`role="progressbar"`
`438`	`438`	`>`
`439`	`439`	`<div`
`440`		`- class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"`
	`440`	`+ class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"`
`441`	`441`	`>`
`442`	`442`	`<svg`
`443`	`443`	`height="100%"`
Original file line number	Diff line number	Diff line change
`@@ -91,8 +91,8 @@ const styles = StyleSheet.create({`
`91`	`91`	`animationDuration: '0.75s',`
`92`	`92`	`animationKeyframes: [`
`93`	`93`	`{`
`94`		`- '0%': { transform: [{ rotate: '0deg' }] },`
`95`		`- '100%': { transform: [{ rotate: '360deg' }] }`
	`94`	`+ '0%': { transform: 'rotate(0deg)' },`
	`95`	`+ '100%': { transform: 'rotate(360deg)' }`
`96`	`96`	`}`
`97`	`97`	`],`
`98`	`98`	`animationTimingFunction: 'linear',`