Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: remove isFabricEnabled check from docs #3336

Merged
merged 2 commits into from
Sep 22, 2022
Merged

fix: remove isFabricEnabled check from docs #3336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04db44e
fix: remove isFabricEnabled check
okwasniewski Sep 22, 2022
0a33118
fix: language lint
okwasniewski Sep 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 3 additions & 28 deletions docs/the-new-architecture/backward-compatibility-fabric-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ For a Fabric Native Component, the source of truth is the `<YourModule>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.

<Tabs groupId="fabric-component-backward-compatibility"
defaultValue={constants.defaultFabricComponentSpecLanguage}
Expand All @@ -425,40 +425,15 @@ The **goal** is to conditionally `export` the proper object from the `index` fil

```ts
// @flow
import { requireNativeComponent } from 'react-native';

const isFabricEnabled = global.nativeFabricUIManager != null;

const myComponent = isFabricEnabled
? require('./MyComponentNativeComponent').default
: requireNativeComponent('MyComponent');

export default myComponent;
export default require('./MyComponentNativeComponent').default;
```

</TabItem>
<TabItem value="TypeScript">

```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;
```

</TabItem>
</Tabs>

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 `<MyComponent>NativeComponent` spec to access the Fabric Native Component.
31 changes: 3 additions & 28 deletions ...s/version-0.70/the-new-architecture/backward-compatibility-fabric-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@ For a Fabric Native Component, the source of truth is the `<YourModule>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.

<Tabs groupId="fabric-component-backward-compatibility"
defaultValue={constants.defaultFabricComponentSpecLanguage}
Expand All @@ -403,40 +403,15 @@ The **goal** is to conditionally `export` from the `index` file the proper objec

```ts
// @flow
import { requireNativeComponent } from 'react-native';

const isFabricEnabled = global.nativeFabricUIManager != null;

const myComponent = isFabricEnabled
? require('./MyComponentNativeComponent').default
: requireNativeComponent('MyComponent');

export default myComponent;
export default require('./MyComponentNativeComponent').default;
```

</TabItem>
<TabItem value="TypeScript">

```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;
```

</TabItem>
</Tabs>

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 `<MyComponent>NativeComponent` spec to access the Fabric Native Component.