I want to place my buttons at the bottom of the page, but they overlap with the device’s control buttons

Shop Minis
1

I want to place my buttons at the bottom of the page, but they overlap with the device’s control buttons. How can I properly display my buttons while taking into account the device’s system controls?

In React Native, the SafeAreaView component helps ensure that your content is rendered within the safe areas of the screen — avoiding obstructions from notches, rounded corners, or system UI elements like the home indicator.

Purpose:

  • Avoid Obstruction: Prevents UI elements from being hidden behind physical display cutouts (like the iPhone notch) or system UI areas (like the status bar or navigation buttons).

  • Maximize Usability: Ensures all content remains fully visible and accessible.

Usage:
You can import SafeAreaView from react-native, or preferably from the react-native-safe-area-context library for better cross-platform handling.

2

Hey! This is a great call out and something we are currently working on. For now you can add some hardcoded padding near the bottom of the screen but in future we will have a css-based solution to provide the correct values.

Internal ticket #87276