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.