Margin, padding, border in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add margin around the View component.

React Native

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

export default function App() {
  return (
    <View style={{ margin: [1] }}>
      <Text>Hello World</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A20

B'20px'

Cmargin

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '20px' instead of numbers.

Confusing margin with padding.

In React Native, margin values are numbers representing density-independent pixels. So, margin: 20 adds 20 units of margin around the View.

2fill in blank

medium

Complete the code to add padding inside the View component.

React Native

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

export default function App() {
  return (
    <View style={{ padding: [1] }}>
      <Text>Welcome!</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

ApaddingHorizontal

B'10px'

C10

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '10px'.

Using margin instead of padding.

Padding in React Native is set using numbers without units. So padding: 10 adds 10 units of padding inside the View.

3fill in blank

hard

Fix the error in the code to add a red border to the View.

React Native

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

export default function App() {
  return (
    <View style={{ borderWidth: 2, borderColor: [1] }}>
      <Text>Border Example</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

Ared

Brgb(255,0,0)

C#red

D'red'

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names without quotes.

Using invalid color formats like '#red'.

In React Native, color values must be strings. So borderColor: 'red' is correct. Without quotes, it causes an error.

4fill in blank

hard

Fill both blanks to add padding and margin to the View.

React Native

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

export default function App() {
  return (
    <View style={{ padding: [1], margin: [2] }}>
      <Text>Box with space</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A15

Bpadding

C10

D'10px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '10px'.

Using property names instead of values.

Padding and margin values are numbers without units. So padding: 15 and margin: 10 add space inside and outside the View respectively.

5fill in blank

hard

Fill all three blanks to add a blue border, padding, and margin to the View.

React Native

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

export default function App() {
  return (
    <View style={{ borderWidth: [1], borderColor: [2], padding: [3] }}>
      <Text>Styled Box</Text>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A3

B'blue'

C12

DborderColor

Attempts:

3 left

💡 Hint

Common Mistakes

Using color without quotes.

Using strings with units for numbers.

Using property names instead of values.

Use borderWidth: 3 for thickness, borderColor: 'blue' as a string for color, and padding: 12 as a number for inside space.