Position (relative, absolute) in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How does relative positioning affect layout?

Consider a React Native View with position: 'relative' and top: 20. What happens to the view's position on the screen?

React Native

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

export default function App() {
  return <View style={styles.box} />;
}

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

A The box moves down 20 units and the space it originally occupied collapses.

B The box moves down 20 units from its original place but still takes up its original space.

C The box stays in the original place and ignores the top value.

D The box moves up 20 units from its original place.

💡 Hint

Relative positioning shifts the element visually but does not remove it from the layout flow.

With position: 'relative', the element moves visually by the offset values but still occupies its original space in the layout. So the box moves down 20 units but the space it originally took remains reserved.

❓ ui_behavior

intermediate

What happens with absolute positioning in React Native?

If a View has position: 'absolute' and top: 30, where will it appear relative to?

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.absoluteBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: 'yellow',
    position: 'relative'
  },
  absoluteBox: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
    position: 'absolute',
    top: 30
  }
});

A The red box appears 30 units from the bottom of the yellow container.

B The red box appears 30 units from the top of the entire screen.

C The red box ignores the top value and stays at the container's top-left corner.

D The red box appears 30 units from the top of the yellow container.

💡 Hint

Absolute positioning is relative to the nearest positioned ancestor.

With position: 'absolute', the element is positioned relative to its nearest ancestor that has a position other than 'static' (default). Here, the yellow container has position: 'relative', so the red box is placed 30 units from the top inside that container.

❓ lifecycle

advanced

How does changing position style affect layout reflow?

In React Native, if you change a component's position style from relative to absolute dynamically, what happens to the layout?

React Native

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

export default function App() {
  const [pos, setPos] = useState('relative');
  return (
    <>
      <Button title="Toggle Position" onPress={() => setPos(pos === 'relative' ? 'absolute' : 'relative')} />
      <View style={[styles.box, { position: pos, top: pos === 'absolute' ? 50 : 0 }]} />
    </>
  );
}

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'green'
  }
});

A The box disappears when position changes to absolute.

B The box visually moves and the layout reflows to fill the space when position changes to absolute.

C The box moves visually but the layout does not reflow, leaving empty space when absolute.

D The box stays fixed and the layout reflows around it regardless of position.

💡 Hint

Absolute positioned elements are removed from normal layout flow.

When the box changes to position: 'absolute', it is removed from the normal layout flow. It moves visually but the space it originally occupied remains empty, so the layout does not reflow to fill that space.

📝 Syntax

advanced

Which style object correctly applies absolute positioning with bottom and right offsets?

Choose the correct React Native style object to position a box absolutely 10 units from the bottom and 15 units from the right.

A { position: 'absolute', bottom: 10, right: 15 }

B { position: 'absolute', bottom: '10', right: '15' }

C { position: 'relative', bottom: 10, right: 15 }

D { position: 'absolute', top: 10, left: 15 }

💡 Hint

Position values must be numbers, and position must be 'absolute' for offsets to work.

Option A uses numeric values for bottom and right with position: 'absolute', which is correct. Option A uses strings instead of numbers, which is invalid. Option A uses position: 'relative', so bottom and right offsets won't work as expected. Option A uses top and left instead of bottom and right.

🔧 Debug

expert

Why does this absolutely positioned box not appear inside its container?

Given this code, why is the red box not visible inside the yellow container?

React Native

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.absoluteBox} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: 'yellow',
    position: 'relative'
  },
  absoluteBox: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
    position: 'absolute',
    top: 20,
    left: 20
  }
});

A The container has no position set, so the absolute box is positioned relative to the screen, not the container.

B The absoluteBox has invalid width and height values, so it is not visible.

C The container's background color hides the absoluteBox behind it.

D The absoluteBox is positioned outside the container because top and left are too large.

💡 Hint

Absolute positioning depends on the nearest positioned ancestor.

Because the container does not have a position style (defaults to 'static'), the absolutely positioned box is placed relative to the screen, not inside the container. To fix this, set position: 'relative' on the container.