Fabric renderer overview in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Fabric renderer in React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AFabricView

BFabricComponent

CFabricUIManager

DFabricRenderer

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing FabricRenderer with FabricUIManager or FabricComponent.

Trying to import Fabric from other packages.

The Fabric renderer is accessed via the FabricRenderer import from react-native.

2fill in blank

medium

Complete the code to create a Fabric component using React Native.

React Native

const MyComponent = () => {
  return <[1] style={{ flex: 1 }} />;
};

Drag options to blanks, or click blank then click option'

AFabricView

BView

CText

DScrollView

Attempts:

3 left

💡 Hint

Common Mistakes

Using regular View instead of FabricView.

Using Text or ScrollView which are not Fabric-specific.

FabricView is the component that uses the Fabric renderer for rendering views.

3fill in blank

hard

Fix the error in the code to enable Fabric renderer in React Native.

React Native

const config = {
  renderer: '[1]',
  enableFabric: true
};

Drag options to blanks, or click blank then click option'

Alegacy

BFabric

Cclassic

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'legacy' or 'default' which disables Fabric.

Misspelling 'Fabric' in the config.

Setting renderer to 'Fabric' enables the Fabric renderer in the configuration.

4fill in blank

hard

Fill both blanks to complete the Fabric renderer setup in React Native.

React Native

import { [1] } from 'react-native';

const element = <[2] style={{ flex: 1 }} />;

Drag options to blanks, or click blank then click option'

AFabricRenderer

BView

CFabricView

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up View and FabricView.

Not importing FabricRenderer when using FabricView.

Import FabricRenderer and use FabricView to render with Fabric renderer.

5fill in blank

hard

Fill all three blanks to create a Fabric renderer component with a text child.

React Native

import { [1], [2] } from 'react-native';

const MyFabricComponent = () => {
  return (
    <[3] style={{ flex: 1 }}>
      Hello Fabric!
    </[3]>
  );
};

Drag options to blanks, or click blank then click option'

AFabricRenderer

BFabricView

CView

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using View instead of FabricView for Fabric rendering.

Not importing FabricRenderer when using FabricView.

Import FabricRenderer and FabricView, then use FabricView as the container component.