Position (relative, absolute) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the View positioned relative to its normal place.

React Native

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

export default function App() {
  return (
    <View style={{ position: '[1]', top: 10, left: 10, width: 100, height: 100, backgroundColor: 'red' }} />
  );
}

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

Afixed

Babsolute

Crelative

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' removes the View from normal flow.

Using 'fixed' is not supported in React Native.

Using 'static' is default but does not allow top or left.

Using relative positions the View relative to its normal place.

2fill in blank

medium

Complete the code to position the View absolutely at the top-left corner.

React Native

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

export default function App() {
  return (
    <View style={{ position: '[1]', top: 0, left: 0, width: 50, height: 50, backgroundColor: 'blue' }} />
  );
}

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

Aabsolute

Brelative

Cfixed

Dstatic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' will offset but keep space in layout.

Using 'fixed' is not supported in React Native.

Using 'static' ignores top and left.

Absolute positioning places the View exactly at the specified top and left coordinates.

3fill in blank

hard

Fix the error in the style to correctly position the View absolutely 20 pixels from the bottom.

React Native

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

export default function App() {
  return (
    <View style={{ position: 'absolute', [1]: 20, left: 0, width: 60, height: 60, backgroundColor: 'green' }} />
  );
}

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

Abottom

Btop

Cright

Dleft

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'top' instead of 'bottom' causes wrong placement.

Using 'right' or 'left' affects horizontal position.

To position from the bottom, use the bottom property, not top.

4fill in blank

hard

Fill both blanks to create a View that is positioned absolutely 15 pixels from the right and 25 pixels from the top.

React Native

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

export default function App() {
  return (
    <View style={{ position: '[1]', [2]: 25, right: 15, width: 70, height: 70, backgroundColor: 'purple' }} />
  );
}

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

Aabsolute

Brelative

Ctop

Dbottom

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'relative' will not position absolutely.

Using 'bottom' instead of 'top' changes vertical placement.

The View must be absolute positioned, and top sets the distance from the top edge.

5fill in blank

hard

Fill all three blanks to create a View with relative position, offset 10 pixels down and 5 pixels right.

React Native

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

export default function App() {
  return (
    <View style={{ position: '[1]', top: [2], left: [3], width: 80, height: 80, backgroundColor: 'orange' }} />
  );
}

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

Aabsolute

B10

C5

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'absolute' changes layout flow.

Swapping top and left values causes wrong offset.

Relative positioning moves the View from its normal spot by top: 10 and left: 5 pixels.

Practice

1. In React Native, what does position: 'relative' do to a component?

easy

A. Makes the component invisible but still takes space.

B. Moves the component relative to its normal position without removing it from the layout flow.

C. Removes the component from the layout flow and hides it.

D. Places the component at a fixed position on the screen ignoring other elements.

Solution

1. Step 1: Understand relative positioning

   Relative positioning moves the component from where it normally appears but keeps it in the layout flow.

2. Step 2: Compare with absolute positioning

   Absolute positioning removes the component from the flow and places it exactly, unlike relative.

3. Final Answer:

   Moves the component relative to its normal position without removing it from the layout flow. -> Option B

4. Quick Check:

   Relative = moves from normal spot [OK]

Hint: Relative moves from normal spot, absolute places exactly [OK]

Common Mistakes:

• Confusing relative with absolute positioning
• Thinking relative removes element from layout
• Assuming relative hides the component

2. Which of the following is the correct way to set a component's position to absolute in React Native style?

easy

A. { pos: 'absolute' }

B. { position: 'fixed' }

C. { position: 'absolute' }

D. { position: absolute }

Solution

1. Step 1: Check React Native style syntax

   Position must be a string value, so it should be 'absolute' in quotes.

2. Step 2: Identify correct property name and value

   The property is 'position' and the value is 'absolute' in quotes. 'fixed' is invalid, 'pos' is the wrong property name.

3. Final Answer:

   { position: 'absolute' } -> Option C

4. Quick Check:

   Correct syntax uses quotes and 'position' key [OK]

Hint: Use quotes for string values in style objects [OK]

Common Mistakes:

• Using 'fixed' instead of 'absolute'
• Missing quotes around 'absolute'
• Using wrong property name like 'pos'

3. What will be the position of the blue box in this code snippet?

{`
  
`}

medium

A. The blue box will be 10 units from the top and left inside the red box.

B. The blue box will be at the top-left corner of the screen.

C. The blue box will be below the red box.

D. The blue box will overlap the red box but at bottom-right.

Solution

1. Step 1: Understand absolute positioning inside parent

   Absolute positions are relative to the nearest positioned parent. The red box is the parent with default relative position.

2. Step 2: Apply top and left values

   The blue box is placed 10 units from top and left inside the red box, so it appears inside near top-left corner.

3. Final Answer:

   The blue box will be 10 units from the top and left inside the red box. -> Option A

4. Quick Check:

   Absolute inside parent = offset from parent edges [OK]

Hint: Absolute inside parent uses parent's edges as reference [OK]

Common Mistakes:

• Thinking absolute positions relative to screen always
• Ignoring top and left values
• Assuming blue box is outside red box

4. Identify the error in this React Native style code:

{`const styles = StyleSheet.create({
  box: {
    position: 'absolute',
    top: 20,
    left: 20,
    width: 100,
    height: 100,
    backgroundColor: 'green',
    position: 'relative'
  }
});`}

medium

A. The backgroundColor value should be uppercase.

B. The width and height must be strings with units.

C. The top and left properties cannot be used with relative position.

D. The style has two position properties; the last one overrides the first.

Solution

1. Step 1: Check for duplicate properties

   The style object has two 'position' keys; the second 'relative' overrides the first 'absolute'.

2. Step 2: Understand effect of duplicate keys

   Only the last 'position' value is used, so the box is positioned relative, not absolute as intended.

3. Final Answer:

   The style has two position properties; the last one overrides the first. -> Option D

4. Quick Check:

   Duplicate keys overwrite earlier ones [OK]

Hint: Avoid duplicate keys; last one wins [OK]

Common Mistakes:

• Thinking both position values apply
• Using units like '100px' instead of numbers
• Assuming backgroundColor case matters

5. You want to place a small badge at the top-right corner of a profile picture in React Native. The profile picture is 100x100. Which style for the badge will correctly position it overlapping the top-right corner inside the picture?

hard

A. { position: 'absolute', top: 0, right: 0, width: 20, height: 20, backgroundColor: 'red' }

B. { position: 'relative', top: -10, right: -10, width: 20, height: 20, backgroundColor: 'red' }

C. { position: 'absolute', top: -10, right: -10, width: 20, height: 20, backgroundColor: 'red' }

D. { position: 'absolute', bottom: 0, left: 0, width: 20, height: 20, backgroundColor: 'red' }

Solution

1. Step 1: Understand absolute positioning inside parent

   The badge must be absolutely positioned relative to the profile picture container.

2. Step 2: Position at top-right corner

   Setting top: 0 and right: 0 places the badge exactly at the top-right inside the picture.

3. Step 3: Avoid negative offsets unless intentional

   Negative values move outside the parent; here we want it inside overlapping, so 0 is correct.

4. Final Answer:

   { position: 'absolute', top: 0, right: 0, width: 20, height: 20, backgroundColor: 'red' } -> Option A

5. Quick Check:

   Absolute top-right corner = top:0, right:0 [OK]

Hint: Use top:0 and right:0 for top-right inside parent [OK]

Common Mistakes:

• Using relative position which won't overlap correctly
• Using negative top/right pushing badge outside
• Placing badge at bottom-left by mistake