- `); - }); - - it('renders styles', async () => { - const style = { - display: 'flex', - flex: 1, - backgroundColor: 'white', - marginInlineStart: 10, - userSelect: 'none', - verticalAlign: 'middle', - }; - - // $FlowFixMe[incompatible-use] - const instance = await create(); - - expect(instance.toJSON()).toMatchInlineSnapshot(` - - `); - }); - }); -}); diff --git a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap deleted file mode 100644 index 8eed524569e4..000000000000 --- a/packages/react-native/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap +++ /dev/null @@ -1,105 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TextInput tests (useTextChildren = false) should render as expected: should deep render when mocked (please verify output manually) 1`] = ` - -`; - -exports[`TextInput tests (useTextChildren = false) should render as expected: should deep render when not mocked (please verify output manually) 1`] = ` - -`; - -exports[`TextInput tests (useTextChildren = true) should render as expected: should deep render when mocked (please verify output manually) 1`] = ` - -`; - -exports[`TextInput tests (useTextChildren = true) should render as expected: should deep render when not mocked (please verify output manually) 1`] = ` - -`; diff --git a/packages/react-native/Libraries/ReactNative/AppRegistryImpl.js b/packages/react-native/Libraries/ReactNative/AppRegistryImpl.js index e6bd106713d6..1a6ee823fdbc 100644 --- a/packages/react-native/Libraries/ReactNative/AppRegistryImpl.js +++ b/packages/react-native/Libraries/ReactNative/AppRegistryImpl.js @@ -26,7 +26,6 @@ import createPerformanceLogger from '../Utilities/createPerformanceLogger'; import SceneTracker from '../Utilities/SceneTracker'; import {coerceDisplayMode} from './DisplayMode'; import HeadlessJsTaskError from './HeadlessJsTaskError'; -import {unmountComponentAtNodeAndRemoveContainer} from './RendererProxy'; import invariant from 'invariant'; type TaskCanceller = () => void; @@ -210,7 +209,9 @@ export function setSurfaceProps( * See https://reactnative.dev/docs/appregistry#unmountapplicationcomponentatroottag */ export function unmountApplicationComponentAtRootTag(rootTag: RootTag): void { - unmountComponentAtNodeAndRemoveContainer(rootTag); + console.error( + 'Unexpected call to unmountApplicationComponentAtRootTag in Fabric.', + ); } /** diff --git a/packages/react-native/Libraries/ReactNative/RendererImplementation.js b/packages/react-native/Libraries/ReactNative/RendererImplementation.js index 057572a634da..243b3cbadadb 100644 --- a/packages/react-native/Libraries/ReactNative/RendererImplementation.js +++ b/packages/react-native/Libraries/ReactNative/RendererImplementation.js @@ -10,8 +10,6 @@ import type {HostInstance} from '../../src/private/types/HostInstance'; import typeof ReactFabricType from '../Renderer/shims/ReactFabric'; -import typeof ReactNativeType from '../Renderer/shims/ReactNative'; -import type {RootTag} from './RootTag'; import { onCaughtError, @@ -21,7 +19,6 @@ import { import * as React from 'react'; let cachedFabricRenderer; -let cachedPaperRenderer; function getFabricRenderer(): ReactFabricType { if (cachedFabricRenderer == null) { @@ -30,21 +27,10 @@ function getFabricRenderer(): ReactFabricType { return cachedFabricRenderer; } -function getPaperRenderer(): ReactNativeType { - if (cachedPaperRenderer == null) { - cachedPaperRenderer = require('../Renderer/shims/ReactNative').default; - } - return cachedPaperRenderer; -} - -const getMethod: (( +const getMethod: ( () => ReactFabricType, MethodName, -) => ReactFabricType[MethodName]) & - (( - () => ReactNativeType, - MethodName, - ) => ReactNativeType[MethodName]) = (getRenderer, methodName) => { +) => ReactFabricType[MethodName] = (getRenderer, methodName) => { let cachedImpl; // $FlowExpectedError[incompatible-type] @@ -66,14 +52,7 @@ function getFabricMethod( return getMethod(getFabricRenderer, methodName); } -function getPaperMethod( - methodName: MethodName, -): ReactNativeType[MethodName] { - return getMethod(getPaperRenderer, methodName); -} - let cachedFabricRender; -let cachedPaperRender; export function renderElement({ element, @@ -86,52 +65,29 @@ export function renderElement({ useFabric: boolean, useConcurrentRoot: boolean, }): void { - if (useFabric) { - if (cachedFabricRender == null) { - cachedFabricRender = getFabricRenderer().render; - } - - cachedFabricRender(element, rootTag, null, useConcurrentRoot, { - onCaughtError, - onUncaughtError, - onRecoverableError, - }); - } else { - if (cachedPaperRender == null) { - cachedPaperRender = getPaperRenderer().render; - } - - cachedPaperRender(element, rootTag, undefined, { - onCaughtError, - onUncaughtError, - onRecoverableError, - }); + if (cachedFabricRender == null) { + cachedFabricRender = getFabricRenderer().render; } + + cachedFabricRender(element, rootTag, null, useConcurrentRoot, { + onCaughtError, + onUncaughtError, + onRecoverableError, + }); } let cachedFabricDispatchCommand; -let cachedPaperDispatchCommand; export function dispatchCommand( handle: HostInstance, command: string, args: Array, ): void { - if (global.RN$Bridgeless === true) { - // Note: this function has the same implementation in the legacy and new renderer. - // However, evaluating the old renderer comes with some side effects. - if (cachedFabricDispatchCommand == null) { - cachedFabricDispatchCommand = getFabricRenderer().dispatchCommand; - } - - return cachedFabricDispatchCommand(handle, command, args); - } else { - if (cachedPaperDispatchCommand == null) { - cachedPaperDispatchCommand = getPaperRenderer().dispatchCommand; - } - - return cachedPaperDispatchCommand(handle, command, args); + if (cachedFabricDispatchCommand == null) { + cachedFabricDispatchCommand = getFabricRenderer().dispatchCommand; } + + return cachedFabricDispatchCommand(handle, command, args); } export const findHostInstance_DEPRECATED: < @@ -139,31 +95,25 @@ export const findHostInstance_DEPRECATED: < >( // $FlowExpectedError[incompatible-type] componentOrHandle: ?(React.ElementRef | number), -) => ?HostInstance = getPaperMethod('findHostInstance_DEPRECATED'); +) => ?HostInstance = getFabricMethod('findHostInstance_DEPRECATED'); export const findNodeHandle: ( // $FlowExpectedError[incompatible-type] componentOrHandle: ?(React.ElementRef | number), -) => ?number = getPaperMethod('findNodeHandle'); +) => ?number = getFabricMethod('findNodeHandle'); -export const sendAccessibilityEvent: ReactNativeType['sendAccessibilityEvent'] = - getPaperMethod('sendAccessibilityEvent'); +export const sendAccessibilityEvent: ReactFabricType['sendAccessibilityEvent'] = + getFabricMethod('sendAccessibilityEvent'); -/** - * This method is used by AppRegistry to unmount a root when using the old - * React Native renderer (Paper). - */ -export const unmountComponentAtNodeAndRemoveContainer: ( - rootTag: RootTag, -) => void = - // $FlowExpectedError[incompatible-type] - getPaperMethod('unmountComponentAtNodeAndRemoveContainer'); - -export const unstable_batchedUpdates: ReactNativeType['unstable_batchedUpdates'] = - getPaperMethod('unstable_batchedUpdates'); +export function unstable_batchedUpdates( + fn: (bookkeeping: T) => void, + bookkeeping: T, +): void { + fn(bookkeeping); +} -export const isChildPublicInstance: ReactNativeType['isChildPublicInstance'] = - getPaperMethod('isChildPublicInstance'); +export const isChildPublicInstance: ReactFabricType['isChildPublicInstance'] = + getFabricMethod('isChildPublicInstance'); export const getNodeFromInternalInstanceHandle: ReactFabricType['getNodeFromInternalInstanceHandle'] = getFabricMethod('getNodeFromInternalInstanceHandle'); diff --git a/packages/react-native/Libraries/ReactNative/RendererProxy.js b/packages/react-native/Libraries/ReactNative/RendererProxy.js index c3ef70aabb7d..83c98fa706b0 100644 --- a/packages/react-native/Libraries/ReactNative/RendererProxy.js +++ b/packages/react-native/Libraries/ReactNative/RendererProxy.js @@ -8,19 +8,8 @@ * @format */ -/** - * This module exists to allow apps to select their renderer implementation - * (e.g.: Fabric-only, Paper-only) without having to pull all the renderer - * implementations into their app bundle, which affects app size. - * - * By default, the setup will be: - * -> RendererProxy - * -> RendererImplementation (which uses Fabric or Paper depending on a flag at runtime) - * - * But this will allow a setup like this without duplicating logic: - * -> RendererProxy (fork) - * -> RendererImplementation (which uses Fabric or Paper depending on a flag at runtime) - * or -> OtherImplementation (which uses Fabric only) - */ - +// This module allows app bundles to set up the appropriate Fabric renderer +// variant (e.g., profiling vs production) before React Native is initialized. +// The internal implementation (RendererProxy.fb.js) provides the indirection +// needed to swap the renderer implementation at runtime. export * from './RendererImplementation';