Margin, padding, border in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Understanding margin effect on layout

Given the following React Native code, what will be the space between the blue box and the red box?

React Native

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

export default function App() {
  return (
    <View style={{ flexDirection: 'row' }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'blue', marginRight: 20 }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'red' }} />
    </View>
  );
}

A There will be a 20-pixel space between the blue and red boxes.

B There will be a 20-pixel space inside the blue box around its content.

C The boxes will touch each other with no space.

D The red box will have a 20-pixel space around it.

💡 Hint

Margin adds space outside the component's border.

The marginRight: 20 on the blue box adds 20 pixels of space to its right side, pushing the red box away by 20 pixels.

❓ ui_behavior

intermediate

Padding effect inside a component

What will be the visible effect of the padding in this React Native component?

React Native

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

export default function App() {
  return (
    <View style={{ backgroundColor: 'yellow', padding: 15 }}>
      <Text>Text inside padded box</Text>
    </View>
  );
}

A The yellow box will shrink by 15 pixels on each side.

B The yellow box will have 15 pixels of space outside its border.

C The text will be 15 pixels larger in font size.

D The text will have 15 pixels of space inside the yellow box around it.

💡 Hint

Padding adds space inside the component's border.

Padding creates space inside the yellow box around the text, so the text is not touching the edges.

❓ ui_behavior

advanced

Border width and color effect

What will be the visible border around the green box in this React Native code?

React Native

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

export default function App() {
  return (
    <View style={{ width: 100, height: 100, backgroundColor: 'green', borderWidth: 5, borderColor: 'black' }} />
  );
}

A No border will appear because borderColor is ignored without borderStyle.

B A black border 5 pixels thick will appear around the green box.

C A green border 5 pixels thick will appear around the box.

D A black border 1 pixel thick will appear around the green box.

💡 Hint

Border width and color define the visible border thickness and color.

Setting borderWidth: 5 and borderColor: 'black' creates a black border 5 pixels thick around the green box.

❓ lifecycle

advanced

Effect of margin and padding on touchable area

In React Native, if a TouchableOpacity has margin and padding, which area responds to touch?

React Native

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

export default function App() {
  return (
    <TouchableOpacity style={{ margin: 20, padding: 10, backgroundColor: 'lightblue' }}>
      <Text>Press me</Text>
    </TouchableOpacity>
  );
}

A Neither margin nor padding areas respond to touch.

B Both margin and padding areas respond to touch.

C Only the area inside the padding responds to touch; margin area does not.

D Only the margin area responds to touch; padding area does not.

💡 Hint

Margin is outside the component's touchable area; padding is inside.

Touchable area includes the component plus its padding. Margin is outside and does not respond to touch.

🔧 Debug

expert

Why is the border not visible?

A developer wrote this code but the border does not show. What is the reason?

React Native

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

export default function App() {
  return (
    <View style={{ width: 100, height: 100, backgroundColor: 'white', borderColor: 'red' }} />
  );
}

A The borderWidth is missing, so the border is not drawn.

B The borderColor 'red' is invalid and ignored.

C The backgroundColor 'white' hides the border.

D The View needs a borderStyle set to 'solid' to show the border.

💡 Hint

Border color alone does not create a visible border without width.

Without borderWidth, the border is not drawn even if borderColor is set.