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.

Practice

1. What is the primary purpose of the View component in React Native?

easy

A. To act as a container for layout and styling

B. To display text content

C. To handle user input events

D. To fetch data from the internet

Solution

1. Step 1: Understand the role of View

   The View component is designed to hold other components and arrange them visually.

2. Step 2: Differentiate from other components

   Text displays text, input handles user input, and data fetching is done elsewhere, not by View.

3. Final Answer:

   To act as a container for layout and styling -> Option A

4. Quick Check:

   View = container for layout [OK]

Hint: View is like a box to hold and arrange items [OK]

Common Mistakes:

• Confusing View with Text component
• Thinking View handles user input directly
• Assuming View fetches data

2. Which of the following is the correct way to create a View with a red background in React Native?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React Native style syntax

   React Native uses a style prop with an object, e.g., style={{backgroundColor: 'red'}}.

2. Step 2: Identify incorrect syntax

   Props like bgColor or background are not valid; style as string is invalid in React Native.

3. Final Answer:

   <View style={{backgroundColor: 'red'}}></View> -> Option C

4. Quick Check:

   Use style={{backgroundColor: 'color'}} [OK]

Hint: Use style={{backgroundColor: 'color'}} for colors [OK]

Common Mistakes:

• Using HTML style string instead of object
• Using invalid props like bgColor
• Forgetting double curly braces for style

3. What will be the visible result of this code?

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

export default function App() {
  return (
    
      One
      Two
      Three
    
  );
}

medium

A. The texts appear stacked vertically

B. The texts 'One', 'Two', 'Three' appear side by side horizontally

C. Only 'One' is visible

D. The app crashes due to syntax error

Solution

1. Step 1: Understand flexDirection in View

   Setting flexDirection to 'row' arranges children horizontally in a row.

2. Step 2: Check children components

   Three Text components will appear side by side: 'One', 'Two', 'Three'.

3. Final Answer:

   The texts 'One', 'Two', 'Three' appear side by side horizontally -> Option B

4. Quick Check:

   flexDirection: 'row' = horizontal layout [OK]

Hint: flexDirection: 'row' arranges children horizontally [OK]

Common Mistakes:

• Assuming default vertical stacking
• Confusing flexDirection values
• Thinking only one child shows

4. Identify the error in this React Native code snippet:

return (
  
    First
    Second
    Third
  
  Outside
);

medium

A. Multiple root elements without a wrapper

B. Invalid style property 'flexDirection'

C. Text components cannot be children of View

D. Missing import for Text component

Solution

1. Step 1: Check JSX root elements

   JSX must return a single root element; here, View and Text are siblings without a wrapper.

2. Step 2: Validate style and imports

   flexDirection: 'column' is valid; Text inside View is allowed; assume imports are correct.

3. Final Answer:

   Multiple root elements without a wrapper -> Option A

4. Quick Check:

   JSX needs one root element [OK]

Hint: Wrap siblings in one parent View or Fragment [OK]

Common Mistakes:

• Trying to return multiple root elements
• Misunderstanding flexDirection usage
• Assuming Text can't be inside View

5. You want to create a View that fills the entire screen and centers its child Text both vertically and horizontally. Which style object achieves this?

hard

A. {flexGrow: 0, justifyContent: 'flex-start', alignItems: 'flex-start'}

B. {width: '100%', height: '100%', textAlign: 'center'}

C. {position: 'absolute', top: 0, left: 0}

D. {flex: 1, justifyContent: 'center', alignItems: 'center'}

Solution

1. Step 1: Make View fill screen

   Using flex: 1 makes the View expand to fill available space.

2. Step 2: Center children vertically and horizontally

   justifyContent: 'center' centers vertically; alignItems: 'center' centers horizontally.

3. Final Answer:

   {flex: 1, justifyContent: 'center', alignItems: 'center'} -> Option D

4. Quick Check:

   flex:1 + justifyContent + alignItems centers content [OK]

Hint: Use flex:1 with justifyContent and alignItems center [OK]

Common Mistakes:

• Using textAlign on View instead of Text
• Not setting flex to fill space
• Using position absolute without centering