Position (relative, absolute) in React Native - Mini App: Build & Ship

Build: Position Demo Screen

This screen demonstrates how to use relative and absolute positioning in React Native. It shows a box positioned relatively and another box positioned absolutely inside a container.

Target UI

-------------------------
| Container             |
|  [Relative Box]       |
|                       |
|           [Absolute Box]|
|                       |
-------------------------

Create a container View with a fixed height and border

Inside the container, add a blue box with relative positioning

Add a red box inside the container with absolute positioning at bottom right

The relative box should appear at the top left inside the container

The absolute box should appear overlapping the container's bottom right corner

Starter Code

React Native

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

export default function PositionDemo() {
  return (
    <View style={styles.container}>
      {/* TODO: Add relative positioned box here */}
      {/* TODO: Add absolute positioned box here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 200,
    borderWidth: 2,
    borderColor: 'black',
    margin: 20,
    position: 'relative'
  },
  // Add your styles here
});

Task 1

Task 2

Solution

React Native

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

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

const styles = StyleSheet.create({
  container: {
    height: 200,
    borderWidth: 2,
    borderColor: 'black',
    margin: 20,
    position: 'relative'
  },
  relativeBox: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    position: 'relative'
  },
  absoluteBox: {
    width: 80,
    height: 80,
    backgroundColor: 'red',
    position: 'absolute',
    bottom: 0,
    right: 0
  }
});

We created a container with position: 'relative' so that the absolutely positioned box can be placed relative to it. The blue box uses position: 'relative' which is the default, so it appears in normal flow at the top left. The red box uses position: 'absolute' with bottom: 0 and right: 0 to place it overlapping the container's bottom right corner. This shows how relative and absolute positioning work together inside a container.

Final Result

Completed Screen

-------------------------
| Container             |
|  [Blue Box]           |
|                       |
|               [Red Box]|
|                       |
-------------------------

The blue box stays at the top left inside the container.

The red box stays fixed at the bottom right corner overlapping the container.

No user interaction is needed; this is a static layout demonstration.

Stretch Goal

Add a toggle button to switch the red box between absolute and relative positioning.

💡 Hint

Use React useState to track the position mode and change the style of the red box dynamically.