View component in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple View container in React Native.

React Native

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

export default function App() {
  return <[1] style={{ flex: 1, backgroundColor: 'lightblue' }} />;
}

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

AText

BView

CButton

DImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using Text instead of View for layout containers.

Forgetting to import the View component.

The View component is the basic container in React Native. It is used to hold other components or style blocks.

2fill in blank

medium

Complete the code to nest a Text component inside a View component.

React Native

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

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <[1]>Hello, React Native!</[1]>
    </View>
  );
}

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

AScrollView

BButton

CImage

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Using View instead of Text to display text.

Not closing the Text component properly.

The Text component is used to display text inside a View in React Native.

3fill in blank

hard

Fix the error in the code by completing the import statement correctly.

React Native

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

export default function App() {
  return <View><Text>Hello!</Text></View>;
}

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

AButton

BImage

CText

DScrollView

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import Text causes runtime errors.

Importing wrong components that are not used.

The Text component must be imported to use it inside the View.

4fill in blank

hard

Fill both blanks to create a View with a red background and padding of 10.

React Native

import React from 'react';
import { View } from 'react-native';

export default function App() {
  return <View style={{ backgroundColor: [1], padding: [2] }} />;
}

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

A'red'

B10

C'blue'

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using numbers without quotes for colors.

Using strings with quotes for padding values.

The backgroundColor style needs a color string like 'red'. Padding is a number representing spacing inside the View.

5fill in blank

hard

Fill all three blanks to create a View with flex layout, centered content, and a blue background.

React Native

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: [1], justifyContent: [2], backgroundColor: [3] }}>
      <Text>Centered Text</Text>
    </View>
  );
}

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

A1

B'center'

C'blue'

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 for flex when you want the View to fill space.

Using numbers instead of strings for justifyContent and backgroundColor.

Setting flex to 1 makes the View fill available space. justifyContent 'center' centers children vertically. backgroundColor 'blue' sets the background color.