diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md index 8eb6b47d203..188cd28c02f 100644 --- a/docs/the-new-architecture/backward-compatibility-fabric-components.md +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -416,7 +416,7 @@ For a Fabric Native Component, the source of truth is the `NativeCom import MyComponent from 'your-component/src/index'; ``` -The **goal** is to conditionally `export` the proper object from the `index` file , given the architecture chosen by the user. We can achieve this with a code that looks like this: +Since `codegenNativeComponent` is calling the `requireNativeComponent` under the hood, we need to re-export our component, to avoid registering it multiple times. ```ts -import requireNativeComponent from 'react-native/Libraries/ReactNative/requireNativeComponent'; - -const isFabricEnabled = global.nativeFabricUIManager != null; - -const myComponent = isFabricEnabled - ? require('./MyComponentNativeComponent').default - : requireNativeComponent('MyComponent'); - -export default myComponent; +export default require('./MyComponentNativeComponent').default; ``` - -Whether you are using Flow or TypeScript for your specs, we understand which architecture is running by checking if the `global.nativeFabricUIManager` object has been set or not. - -:::caution -Please note that the New Architecture is still experimental. The `global.nativeFabricUIManager` API might change in the future for a function that encapsulate this check. -::: - -- If that object is `null`, then the app has not enabled the Fabric feature. It's running on the Old Architecture, and the fallback is to use the default Legacy Native Components implementation ([iOS](../native-components-ios) or [Android](../native-components-android)). -- If that object is set, the app is running with Fabric enabled, and it should use the `NativeComponent` spec to access the Fabric Native Component. diff --git a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md index 8ddb0d036d8..e081e9e2f00 100644 --- a/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md +++ b/website/versioned_docs/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md @@ -394,7 +394,7 @@ For a Fabric Native Component, the source of truth is the `NativeCom import MyComponent from 'your-component/src/index'; ``` -The **goal** is to conditionally `export` from the `index` file the proper object, given the architecture chosen by the user. We can achieve this with a code that looks like this: +Since `codegenNativeComponent` is calling the `requireNativeComponent` under the hood, we need to re-export our component, to avoid registering it multiple times. ```ts -import requireNativeComponent from 'react-native/Libraries/ReactNative/requireNativeComponent'; - -const isFabricEnabled = global.nativeFabricUIManager != null; - -const myComponent = isFabricEnabled - ? require('./MyComponentNativeComponent').default - : requireNativeComponent('MyComponent'); - -export default myComponent; +export default require('./MyComponentNativeComponent').default; ``` - -Whether you are using Flow or TypeScript for your specs, we understand which architecture is running by checking if the `global.nativeFabricUIManager` object has been set or not. - -:::caution -Please note that the New Architecture is still experimental. The `global.nativeFabricUIManager` API might change in the future for a function that encapsulate this check. -::: - -- If that object is `null`, then the app has not enabled the Fabric feature. It's running on the Old Architecture, and the fallback is to use the default Legacy Native Components implementation ([iOS](../native-components-ios) or [Android](../native-components-android)). -- If that object is set, the app is running with Fabric enabled, and it should use the `NativeComponent` spec to access the Fabric Native Component.