View component in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the View component in React Native?

The View component is a container that supports layout with Flexbox, style, and touch handling. It is like a div in web development and is used to group other components.

beginner

How do you apply styles to a View component?

You apply styles by passing a style prop with an object or array of objects defining layout, colors, size, and more. For example: <View style={{flex: 1, backgroundColor: 'blue'}} />.

beginner

Which layout system does the View component use by default?

The View component uses Flexbox layout by default, which helps arrange child components in rows or columns with flexible sizing.

intermediate

Can a View component handle user touches?

Yes, View can handle touches by using props like onStartShouldSetResponder and onResponderRelease. However, for simpler touch handling, components like TouchableOpacity are often used.

intermediate

What is the difference between View and ScrollView?

View is a basic container for layout and styling, while ScrollView is a special container that allows scrolling when content is larger than the screen.

What is the default layout system used by the View component?

A Absolute positioning

B Grid

C Flexbox

D Table layout

The View component uses Flexbox layout by default to arrange child components.

Which prop is used to style a View component?

A className

B layout

C css

D style

The style prop is used to apply styles to a View component.

Which component should you use if you want a container that scrolls when content is too big?

A ScrollView

B View

C Text

D Image

ScrollView allows scrolling when content overflows the screen.

Can a View component handle touch events?

A Yes, with responder props

B No, never

C Only with <code>TouchableOpacity</code>

D Only on Android

View can handle touch events using responder props like onStartShouldSetResponder.

Which of these is NOT a typical use of View?

A Grouping components

B Displaying text content

C Applying layout and styles

D Handling touch gestures

Text component is used for displaying text, not View.

Explain what the View component is and why it is important in React Native.

Think about how you organize things in a box or frame.

Describe how you would style a View to have a blue background and take all available space.

Remember the style prop takes an object with CSS-like properties.

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