SafeAreaView in React Native - Mini App: Build & Ship

Build: Safe Area Example

This screen shows how to use SafeAreaView to keep content inside the safe area on iPhones with notches or special screen shapes.

Target UI

┌─────────────────────────────┐
│                             │
│  ┌───────────────────────┐  │
│  │  Safe Area Content     │  │
│  │  Text inside safe area │  │
│  └───────────────────────┘  │
│                             │
└─────────────────────────────┘

Use SafeAreaView to wrap the main content

Display a centered text inside the safe area

Background color outside safe area should be gray

Background color inside safe area should be white

Text should say: "This text is inside the safe area"

Starter Code

React Native

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

export default function SafeAreaExample() {
  return (
    <View style={styles.container}>
      {/* TODO: Add SafeAreaView and Text here */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
  },
  safeArea: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

Task 1

Task 2

Solution

React Native

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

export default function SafeAreaExample() {
  return (
    <View style={styles.container}>
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.text}>This text is inside the safe area</Text>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'gray',
  },
  safeArea: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 18,
  },
});

We use SafeAreaView to make sure the content stays inside the safe area of the screen. This is important on devices with notches or rounded corners. The outer View has a gray background to show the area outside the safe area. Inside the SafeAreaView, the background is white and the text is centered both vertically and horizontally. This keeps the text visible and nicely placed on all devices.

Final Result

Completed Screen

┌─────────────────────────────┐
│                             │
│  ┌───────────────────────┐  │
│  │  This text is inside   │  │
│  │  the safe area         │  │
│  └───────────────────────┘  │
│                             │
└─────────────────────────────┘

The text stays inside the safe area on all devices

Background outside safe area is gray

Background inside safe area is white

Stretch Goal

Add a button below the text that shows an alert saying 'Safe area button pressed!' when tapped.

💡 Hint

Use the Button component from react-native and place it inside SafeAreaView below the Text.