View component in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this React Native View component?

Consider this React Native code snippet. What will be displayed on the screen?

React Native

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

export default function App() {
  return (
    <View style={{ backgroundColor: 'blue', padding: 20 }}>
      <Text style={{ color: 'white' }}>Hello World</Text>
    </View>
  );
}

A A blue background with white text saying 'Hello World'.

B A blue background with black text saying 'Hello World'.

C A white background with blue text saying 'Hello World'.

D A white background with black text saying 'Hello World'.

💡 Hint

Look at the View's backgroundColor and Text's color styles.

The View has a blue background and padding. The Text inside has white color, so the text appears white on blue background.

❓ lifecycle

intermediate

What happens if you nest multiple Views with different styles?

Given nested Views with different background colors and padding, what will be the visible padding around the innermost Text?

React Native

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

export default function App() {
  return (
    <View style={{ backgroundColor: 'red', padding: 10 }}>
      <View style={{ backgroundColor: 'green', padding: 20 }}>
        <Text>Nested Text</Text>
      </View>
    </View>
  );
}

A The Text has no padding because padding does not apply to nested Views.

B The Text has 10 units of padding inside a red background only.

C The Text has 30 units of padding combining both Views.

D The Text has 20 units of padding inside a green background, which is inside a red background with 10 units padding.

💡 Hint

Padding applies to each View separately and stacks visually.

The outer View has 10 units padding and red background. Inside it, the inner View has 20 units padding and green background. The Text is inside the inner View, so it has 20 units padding from the green View. The red View's padding surrounds the green View.

📝 Syntax

advanced

What error occurs with this View usage?

What error will this React Native code produce?

React Native

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

export default function App() {
  return (
    <View style={{ backgroundColor: 'yellow' }}>
      <Text>Hello</Text>
      <Text>World</Text>
    </View>
  );
}

A Warning but no error; style string is ignored.

B Runtime error because style prop is a string instead of an object.

C Runtime error because Text components cannot be siblings inside View.

D No error, the style string is accepted and applied.

💡 Hint

Check the type expected for the style prop in React Native.

The style prop must be an object or array of objects, not a string. Passing a string causes a runtime error.

❓ navigation

advanced

How does View affect touch event handling in React Native?

If you wrap a Button inside a View with style {pointerEvents: 'none'}, what happens when you tap the Button?

React Native

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

export default function App() {
  return (
    <View style={{ pointerEvents: 'none' }}>
      <Button title="Press me" onPress={() => Alert.alert('Pressed!')} />
    </View>
  );
}

A The Button does not respond to taps because pointerEvents disables touch on the View and its children.

B The Button responds but with a delay due to pointerEvents.

C The Button responds normally to taps despite pointerEvents on the View.

D The app crashes because pointerEvents is not a valid style.

💡 Hint

pointerEvents controls whether touches pass through the View and its children.

Setting pointerEvents to 'none' disables touch events on the View and all its children, so the Button inside cannot be tapped.

🧠 Conceptual

expert

What is the effect of using flex: 1 on a View inside a parent with fixed height?

Given a parent View with fixed height 200 and a child View with style {flex: 1}, what height will the child View have?

React Native

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

export default function App() {
  return (
    <View style={{ height: 200, backgroundColor: 'gray' }}>
      <View style={{ flex: 1, backgroundColor: 'blue' }} />
    </View>
  );
}

A The child View will have height 100, half of the parent height.

B The child View will have zero height because flex does not apply inside fixed height parent.

C The child View will fill the entire 200 height of the parent View.

D The child View will overflow the parent and have height greater than 200.

💡 Hint

flex: 1 means fill available space inside the parent container.

The parent View has fixed height 200. The child View with flex: 1 fills all available space inside the parent, so it gets height 200.

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