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.