react-native-windows 0.82.3 → 0.83.0-preview.0

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -44,7 +44,7 @@ interface Instance extends React.ElementRef<typeof Animated.View> {
 }
 
 const ScrollViewStickyHeader: component(
-  ref: React.RefSetter<Instance>,
+  ref?: React.RefSetter<Instance>,
   ...props: ScrollViewStickyHeaderProps
 ) = function ScrollViewStickyHeader({
   ref: forwardedRef,
@@ -282,7 +282,7 @@ const ScrollViewStickyHeader: component(
   const passthroughAnimatedPropExplicitValues =
     isFabric && translateY != null
       ? {
-          style: {transform: [{translateY: translateY}]},
+          style: {transform: [{translateY}]},
         }
       : null;
 
@@ -303,20 +303,20 @@ const ScrollViewStickyHeader: component(
         passthroughAnimatedPropExplicitValues
       }>
       {cloneElement(child, {
-        style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout
+        style: styles.fill, // We transfer the child style to the wrapper.
       })}
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  header: {
-    zIndex: 10,
-  },
   fill: {
     flex: 1,
   },
+  header: {
+    zIndex: 10,
+  },
 });
 
 export default ScrollViewStickyHeader;

package/Libraries/Components/Switch/Switch.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {ViewProps} from '../View/ViewPropTypes';
@@ -114,5 +114,5 @@ export interface SwitchProps extends SwitchPropsIOS {
  * the supplied `value` prop instead of the expected result of any user actions.
  */
 declare class SwitchComponent extends React.Component<SwitchProps> {}
-declare const SwitchBase: Constructor<NativeMethods> & typeof SwitchComponent;
+declare const SwitchBase: Constructor<HostInstance> & typeof SwitchComponent;
 export class Switch extends SwitchBase {}

package/Libraries/Components/Switch/Switch.windows.js

@@ -272,7 +272,7 @@ const Switch: component(
       disabled,
       onTintColor: trackColorForTrue,
       style: StyleSheet.compose(
-        {height: 31, width: 51}, // #windows
+        {height: 31, width: 51}, //#Windows 15652
         StyleSheet.compose(
           style,
           ios_backgroundColor == null

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -10,10 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
-import {
-  HostInstance,
-  NativeMethods,
-} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
@@ -1029,7 +1026,7 @@ interface TextInputState {
  * @see https://reactnative.dev/docs/textinput#methods
  */
 declare class TextInputComponent extends React.Component<TextInputProps> {}
-declare const TextInputBase: Constructor<NativeMethods> &
+declare const TextInputBase: Constructor<HostInstance> &
   Constructor<TimerMixin> &
   typeof TextInputComponent;
 export class TextInput extends TextInputBase {

package/Libraries/Components/TextInput/TextInput.js

@@ -449,6 +449,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
         before we can get to the long term breaking change.
       */
       if (instance != null) {
+        // Register the input immediately when the ref is set so that focus()
+        // can be called from ref callbacks
+        // Double registering during useLayoutEffect is fine, because the underlying
+        // state is a Set.
+        TextInputState.registerInput(instance);
+
         // $FlowFixMe[prop-missing] - See the explanation above.
         // $FlowFixMe[unsafe-object-assign]
         Object.assign(instance, {

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -476,6 +476,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
         before we can get to the long term breaking change.
       */
       if (instance != null) {
+        // Register the input immediately when the ref is set so that focus()
+        // can be called from ref callbacks
+        // Double registering during useLayoutEffect is fine, because the underlying
+        // state is a Set.
+        TextInputState.registerInput(instance);
+
         // $FlowFixMe[prop-missing] - See the explanation above.
         // $FlowFixMe[unsafe-object-assign] - Intentional mutation of ref instance
         Object.assign(instance, {

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -47,15 +47,14 @@ class TouchableBounce extends React.Component<
 
   _createPressabilityConfig(): PressabilityConfig {
     return {
+      android_disableSound: this.props.touchSoundDisabled,
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
-      hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
       delayPressOut: this.props.delayPressOut,
+      disabled: this.props.disabled,
+      hitSlop: this.props.hitSlop,
       minPressDuration: 0,
-      pressRectOffset: this.props.pressRetentionOffset,
-      android_disableSound: this.props.touchSoundDisabled,
       onBlur: event => {
         if (Platform.isTV) {
           this._bounceTo(1, 0.4, 0);
@@ -113,6 +112,7 @@ class TouchableBounce extends React.Component<
           this.props.onPressOut(event);
         }
       },
+      pressRectOffset: this.props.pressRetentionOffset,
     };
   }
 
@@ -123,10 +123,10 @@ class TouchableBounce extends React.Component<
     callback?: ?() => void,
   ) {
     Animated.spring(this.state.scale, {
-      toValue,
-      velocity,
       bounciness,
+      toValue,
       useNativeDriver: true,
+      velocity,
     }).start(callback);
   }
 
@@ -230,6 +230,6 @@ export default (function TouchableBounceWrapper({
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref: React.RefSetter<mixed>,
+  ref?: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableBounce.windows.js

@@ -47,15 +47,14 @@ class TouchableBounce extends React.Component<
 
   _createPressabilityConfig(): PressabilityConfig {
     return {
+      android_disableSound: this.props.touchSoundDisabled,
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
-      hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
       delayPressOut: this.props.delayPressOut,
+      disabled: this.props.disabled,
+      hitSlop: this.props.hitSlop,
       minPressDuration: 0,
-      pressRectOffset: this.props.pressRetentionOffset,
-      android_disableSound: this.props.touchSoundDisabled,
       onBlur: event => {
         if (Platform.isTV) {
           this._bounceTo(1, 0.4, 0);
@@ -113,6 +112,7 @@ class TouchableBounce extends React.Component<
           this.props.onPressOut(event);
         }
       },
+      pressRectOffset: this.props.pressRetentionOffset,
     };
   }
 
@@ -123,10 +123,10 @@ class TouchableBounce extends React.Component<
     callback?: ?() => void,
   ) {
     Animated.spring(this.state.scale, {
-      toValue,
-      velocity,
       bounciness,
+      toValue,
       useNativeDriver: true,
+      velocity,
     }).start(callback);
   }
 
@@ -237,6 +237,6 @@ export default (function TouchableBounceWrapper({
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref: React.RefSetter<mixed>,
+  ref?: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -191,7 +191,7 @@ const TouchableWithoutFeedback: React.AbstractComponent<
   React.ElementRef<typeof Animated.View>,
 > = React.forwardRef(function TouchableWithoutFeedback(
   props: TouchableWithoutFeedbackProps,
-  ref,
+  ref: React.RefSetter<React.ElementRef<typeof Animated.View>>,
 ): React.Node {
   const {
     disabled,

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -13,6 +13,9 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
+import processBackgroundPosition from '../../StyleSheet/processBackgroundPosition';
+import processBackgroundRepeat from '../../StyleSheet/processBackgroundRepeat';
+import processBackgroundSize from '../../StyleSheet/processBackgroundSize';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
@@ -144,10 +147,25 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
     : {process: processBoxShadow},
 
   /**
-   * Linear Gradient
+   * BackgroundImage
    */
   experimental_backgroundImage: {process: processBackgroundImage},
 
+  /**
+   * BackgroundSize
+   */
+  experimental_backgroundSize: {process: processBackgroundSize},
+
+  /**
+   * BackgroundPosition
+   */
+  experimental_backgroundPosition: {process: processBackgroundPosition},
+
+  /**
+   * BackgroundRepeat
+   */
+  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+
   /**
    * View
    */

package/Libraries/Components/View/View.d.ts

@@ -10,7 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {ViewProps} from './ViewPropTypes';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 
 /**
  * The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,
@@ -19,7 +19,7 @@ import {NativeMethods} from '../../../types/public/ReactNativeTypes';
  * whether that is a UIView, <div>, android.view, etc.
  */
 declare class ViewComponent extends React.Component<ViewProps> {}
-declare const ViewBase: Constructor<NativeMethods> & typeof ViewComponent;
+declare const ViewBase: Constructor<HostInstance> & typeof ViewComponent;
 export class View extends ViewBase {
   /**
    * Is 3D Touch / Force Touch available (i.e. will touch events include `force`)

package/Libraries/Components/View/View.windows.js

@@ -66,7 +66,6 @@ component View(
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
 ) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const hasTextAncestor = use(TextAncestorContext);
 
   let actualView;

package/Libraries/Components/View/ViewNativeComponent.js

@@ -21,14 +21,26 @@ const ViewNativeComponent: HostComponent<Props> =
   }));
 
 interface NativeCommands {
+  +focus: (viewRef: HostInstance) => void;
+  +blur: (viewRef: HostInstance) => void;
   +hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
   +setPressed: (viewRef: HostInstance, pressed: boolean) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['hotspotUpdate', 'setPressed'],
+  supportedCommands: ['focus', 'blur', 'hotspotUpdate', 'setPressed'],
 });
 
+/**
+ * `ViewNativeComponent` is an internal React Native host component, and is
+ * exported to provide lower-level access for libraries.
+ *
+ * @warning `<unstable_NativeView>` provides no semver guarantees and is not
+ *   intended to be used in app code. Please use
+ *   [`<View>`](https://reactnative.dev/docs/view) instead.
+ */
+// Additional note: Our long term plan is to reduce the overhead of the <Text>
+// and <View> wrappers so that we no longer have any reason to export these APIs.
 export default ViewNativeComponent;
 
 export type ViewNativeComponentType = HostComponent<Props>;

package/Libraries/Core/ReactNativeVersion.js

@@ -27,9 +27,9 @@
  */
 export default class ReactNativeVersion {
   static major: number = 0;
-  static minor: number = 82;
-  static patch: number = 1;
-  static prerelease: string | null = null;
+  static minor: number = 83;
+  static patch: number = 0;
+  static prerelease: string | null = 'rc.5';
 
   static getVersionString(): string {
     return `${this.major}.${this.minor}.${this.patch}${this.prerelease != null ? `-${this.prerelease}` : ''}`;

package/Libraries/Core/setUpPerformance.js

@@ -20,7 +20,9 @@ if (NativePerformance) {
     // $FlowExpectedError[cannot-write]
     global.performance = {
       mark: () => {},
+      clearMarks: () => {},
       measure: () => {},
+      clearMeasures: () => {},
       now: () => {
         const performanceNow = global.nativePerformanceNow || Date.now;
         return performanceNow();

package/Libraries/Debugging/DebuggingOverlay.js

@@ -39,20 +39,13 @@ function DebuggingOverlay({
   useImperativeHandle(
     ref,
     () => ({
-      highlightTraceUpdates(updates) {
+      clearElementsHighlight() {
         if (!isNativeComponentReady) {
           return;
         }
 
-        const nonEmptyRectangles = updates.filter(
-          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
-        );
-
         if (nativeComponentRef.current != null) {
-          Commands.highlightTraceUpdates(
-            nativeComponentRef.current,
-            nonEmptyRectangles,
-          );
+          Commands.clearElementsHighlights(nativeComponentRef.current);
         }
       },
       highlightElements(elements) {
@@ -64,13 +57,20 @@ function DebuggingOverlay({
           Commands.highlightElements(nativeComponentRef.current, elements);
         }
       },
-      clearElementsHighlight() {
+      highlightTraceUpdates(updates) {
         if (!isNativeComponentReady) {
           return;
         }
 
+        const nonEmptyRectangles = updates.filter(
+          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
+        );
+
         if (nativeComponentRef.current != null) {
-          Commands.clearElementsHighlights(nativeComponentRef.current);
+          Commands.highlightTraceUpdates(
+            nativeComponentRef.current,
+            nonEmptyRectangles,
+          );
         }
       },
     }),
@@ -95,14 +95,14 @@ function DebuggingOverlay({
 
 const styles = StyleSheet.create({
   overlay: {
-    position: 'absolute',
-    top: 0,
     bottom: 0,
     left: 0,
+    position: 'absolute',
     right: 0,
+    top: 0,
   },
 });
 
 export default DebuggingOverlay as component(
-  ref: React.RefSetter<DebuggingOverlayHandle>,
+  ref?: React.RefSetter<DebuggingOverlayHandle>,
 );

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -332,7 +332,9 @@ class DebuggingOverlayRegistry {
         instance.measure((x, y, width, height, left, top) => {
           // measure can execute callback without any values provided to signal error.
           if (left == null || top == null || width == null || height == null) {
-            reject('Unexpectedly failed to call measure on an instance.');
+            reject(
+              new Error('Unexpectedly failed to call measure on an instance.'),
+            );
           }
 
           resolve({
@@ -480,7 +482,11 @@ class DebuggingOverlayRegistry {
                 width == null ||
                 height == null
               ) {
-                reject('Unexpectedly failed to call measure on an instance.');
+                reject(
+                  new Error(
+                    'Unexpectedly failed to call measure on an instance.',
+                  ),
+                );
               }
 
               resolve({x: left, y: top, width, height});

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -30,8 +30,11 @@ class RCTDeviceEventEmitterImpl extends EventEmitter<RCTDeviceEventDefinitions>
     ...args: RCTDeviceEventDefinitions[TEvent]
   ): void {
     beginEvent(() => `RCTDeviceEventEmitter.emit#${eventType}`);
-    super.emit(eventType, ...args);
-    endEvent();
+    try {
+      super.emit(eventType, ...args);
+    } finally {
+      endEvent();
+    }
   }
 }
 const RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions> =

package/Libraries/Image/Image.d.ts

@@ -11,7 +11,7 @@ import * as React from 'react';
 import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {Insets} from '../../types/public/Insets';
-import {NativeMethods} from '../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {ImageStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent, NativeSyntheticEvent} from '../Types/CoreEventTypes';
@@ -338,7 +338,7 @@ export interface ImageSize {
 }
 
 declare class ImageComponent extends React.Component<ImageProps> {}
-declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
+declare const ImageBase: Constructor<HostInstance> & typeof ImageComponent;
 export class Image extends ImageBase {
   static getSize(uri: string): Promise<ImageSize>;
   static getSize(
@@ -384,6 +384,6 @@ export interface ImageBackgroundProps extends ImagePropsBase {
 }
 
 declare class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}
-declare const ImageBackgroundBase: Constructor<NativeMethods> &
+declare const ImageBackgroundBase: Constructor<HostInstance> &
   typeof ImageBackgroundComponent;
 export class ImageBackground extends ImageBackgroundBase {}

package/Libraries/Image/ImageInjection.js

@@ -8,11 +8,8 @@
  * @format
  */
 
-import type {
-  AbstractImageAndroid,
-  AbstractImageIOS,
-  ImageType as ImageComponent,
-} from './ImageTypes.flow';
+import type {HostInstance} from '../..';
+import type {AbstractImageAndroid, AbstractImageIOS} from './ImageTypes.flow';
 
 import useMergeRefs from '../Utilities/useMergeRefs';
 import * as React from 'react';
@@ -33,7 +30,7 @@ export function unstable_getImageComponentDecorator(): ?ImageComponentDecorator
   return injectedImageComponentDecorator;
 }
 
-type ImageInstance = React.ElementRef<ImageComponent>;
+type ImageInstance = HostInstance;
 
 type ImageAttachedCallback = (
   imageInstance: ImageInstance,

package/Libraries/Image/ImageTypes.flow.js

@@ -8,12 +8,11 @@
  * @format
  */
 
+import type {HostInstance} from '../..';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {ImageSource} from './ImageSource';
-import typeof ImageViewNativeComponent from './ImageViewNativeComponent';
-import typeof TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 
 import * as React from 'react';
 
@@ -67,17 +66,14 @@ type ImageComponentStaticsAndroid = $ReadOnly<{
 }>;
 
 export type AbstractImageAndroid = component(
-  ref?: React.RefSetter<
-    | React.ElementRef<TextInlineImageNativeComponent>
-    | React.ElementRef<ImageViewNativeComponent>,
-  >,
+  ref?: React.RefSetter<HostInstance>,
   ...props: ImagePropsType
 );
 
 export type ImageAndroid = AbstractImageAndroid & ImageComponentStaticsAndroid;
 
 export type AbstractImageIOS = component(
-  ref?: React.RefSetter<React.ElementRef<ImageViewNativeComponent>>,
+  ref?: React.RefSetter<HostInstance>,
   ...props: ImagePropsType
 );
 

package/Libraries/Lists/FlatList.js

@@ -13,8 +13,8 @@ import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
   ListRenderItem,
   ListRenderItemInfo,
+  ListViewToken,
   ViewabilityConfigCallbackPair,
-  ViewToken,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';
 
@@ -573,7 +573,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
     return keyExtractor(items, index);
   };
 
-  _pushMultiColumnViewable(arr: Array<ViewToken>, v: ViewToken): void {
+  _pushMultiColumnViewable(arr: Array<ListViewToken>, v: ListViewToken): void {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     const keyExtractor = this.props.keyExtractor ?? defaultKeyExtractor;
     v.item.forEach((item, ii) => {
@@ -585,22 +585,22 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
 
   _createOnViewableItemsChanged(
     onViewableItemsChanged: ?(info: {
-      viewableItems: Array<ViewToken>,
-      changed: Array<ViewToken>,
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
       ...
     }) => void,
     // $FlowFixMe[missing-local-annot]
   ) {
     return (info: {
-      viewableItems: Array<ViewToken>,
-      changed: Array<ViewToken>,
+      viewableItems: Array<ListViewToken>,
+      changed: Array<ListViewToken>,
       ...
     }) => {
       const numColumns = numColumnsOrDefault(this.props.numColumns);
       if (onViewableItemsChanged) {
         if (numColumns > 1) {
-          const changed: Array<ViewToken> = [];
-          const viewableItems: Array<ViewToken> = [];
+          const changed: Array<ListViewToken> = [];
+          const viewableItems: Array<ListViewToken> = [];
           info.viewableItems.forEach(v =>
             this._pushMultiColumnViewable(viewableItems, v),
           );

package/Libraries/Lists/SectionList.d.ts

@@ -35,7 +35,11 @@ export interface SectionBase<ItemT, SectionT = DefaultSectionT> {
 
   renderItem?: SectionListRenderItem<ItemT, SectionT> | undefined;
 
-  ItemSeparatorComponent?: React.ComponentType<any> | null | undefined;
+  ItemSeparatorComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement
+    | null
+    | undefined;
 
   keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
 }

package/Libraries/Lists/ViewabilityHelper.js

@@ -11,7 +11,7 @@
 'use strict';
 
 export type {
-  ViewToken,
+  ListViewToken as ViewToken,
   ViewabilityConfig,
   ViewabilityConfigCallbackPair,
 } from '@react-native/virtualized-lists';

package/Libraries/Lists/VirtualizedList.js

@@ -19,6 +19,7 @@ const VirtualizedListComponent: VirtualizedListType =
 export type {
   ListRenderItemInfo,
   ListRenderItem,
+  ListViewToken,
   Separators,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -87,7 +87,7 @@ export default function Ansi({
     <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          <Text>
+          <Text style={styles.text}>
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -122,4 +122,7 @@ const styles = StyleSheet.create({
   line: {
     flexDirection: 'row',
   },
+  text: {
+    flexGrow: 1,
+  },
 });

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -179,8 +179,17 @@ const validAttributesForNonEventProps = {
   backgroundColor: {process: require('../StyleSheet/processColor').default},
   transform: true,
   transformOrigin: true,
-  experimental_backgroundImage: {
-    process: require('../StyleSheet/processBackgroundImage').default,
+  experimental_backgroundImage: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? (true as const)
+    : {process: require('../StyleSheet/processBackgroundImage').default},
+  experimental_backgroundSize: {
+    process: require('../StyleSheet/processBackgroundSize').default,
+  },
+  experimental_backgroundPosition: {
+    process: require('../StyleSheet/processBackgroundPosition').default,
+  },
+  experimental_backgroundRepeat: {
+    process: require('../StyleSheet/processBackgroundRepeat').default,
   },
   boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
     ? (true as const)