SafeAreaView — τι είναι, διάταξη με Safe Area στο React Native

Τι είναι το SafeAreaView;

SafeAreaView — στοιχείο React Native που προσθέτει αυτόματα εσωτερικά περιθώρια (padding) για να μην καλύπτεται το περιεχόμενο από στοιχεία διεπαφής συστήματος: γραμμή κατάστασης, Notch, Dynamic Island και πάνελ πλοήγησης συστήματος. Το στοιχείο εμφανίστηκε στο React Native 0.50 για iOS και αργότερα επεκτάθηκε για Android.

Στο iOS το SafeAreaView χρησιμοποιεί το εγγενές UIView.safeAreaInsets, το οποίο εμφανίστηκε στο iOS 11 (2017). Στο Android το στοιχείο λαμβάνει υπόψη τα WindowInsets — περιθώρια συστήματος διαθέσιμα από Android 5.0 (API 21). Σύμφωνα με δεδομένα Apple (2026), το 92% των ενεργών iPhone έχουν οθόνη με εγκοπή ή Dynamic Island.

Γιατί χρειάζεται το Safe Area

Η έννοια Safe Area — μέρος των συστάσεων Apple HIG (Human Interface Guidelines). Πριν από το iPhone X (2017) ολόκληρος ο χώρος της οθόνης ήταν ασφαλής. Με την εμφάνιση του Notch, η Apple όρισε περιοχές όπου το περιεχόμενο δεν πρέπει να τοποθετείται: εγκοπή κάμερας, ένδειξη ώρας και μπαταρίας, ένδειξη αρχικής οθόνης. Το Android εισήγαγε παρόμοια έννοια με την εμφάνιση οθονών με εγκοπή το 2018.

Πώς λειτουργεί το Safe Area σε iOS και Android

Στο iOS το SafeAreaView διαβάζει τα safeAreaInsets από τον εγγενή οδηγό διάταξης. Το άνω περιθώριο περιλαμβάνει το ύψος της γραμμής κατάστασης (συνήθως 44 ή 50 σημεία για iPhone με Notch). Κάτω περιθώριο — 34 σημεία για την ένδειξη αρχικής οθόνης (Home Indicator). Το Android χρησιμοποιεί WindowInsets — άνω περιθώριο για τη γραμμή κατάστασης και κάτω για την πλοήγηση συστήματος.

Σημαντικό: Το SafeAreaView εφαρμόζει padding αυτόματα, αλλά μόνο για το ριζικό container. Τα ένθετα στοιχεία δεν λαμβάνουν προστασία — κάθε οθόνη πρέπει να έχει το δικό της SafeAreaView. Για παράθυρα modal και BottomSheet, λάβετε υπόψη τα περιθώρια ξεχωριστά.

Notch, Dynamic Island και πάνελ συστήματος

Notch — υλική εγκοπή στο επάνω μέρος της οθόνης που περιέχει κάμερα και αισθητήρες. Εμφανίστηκε στο iPhone X (2017). Dynamic Island — περιοχή υλικού-λογισμικού του iPhone 14 Pro και νεότερων που αντικαθιστά το Notch με ένα διαδραστικό στοιχείο. Και τα δύο απαιτούν άνω περιθώριο 50-56 pt.

Στο Android οι εγκοπές έχουν διάφορα σχήματα: σταγόνα, τρύπα στη γωνία (punch-hole), λωρίδα κάτω από την κάμερα. SafeAreaView στο Android χρησιμοποιεί WindowInsets που λαμβάνουν υπόψη το σχήμα της εγκοπής. Για εφαρμογές σε οριζόντιο προσανατολισμό, προστίθενται πλευρικά περιθώρια για να μην καλύπτεται το περιεχόμενο από στοιχεία συστήματος.

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

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

Η προσέγγιση Edge-to-edge (Android 15+) συνιστά τη σχεδίαση περιεχομένου κάτω από πάνελ συστήματος, αλλά με την consideration των περιθωρίων για διαδραστικά στοιχεία. Το SafeAreaView βοηθά στη διατήρηση αυτής της ισορροπίας: το φόντο σχεδιάζεται κάτω από τα πάνελ, τα κουμπιά και το κείμενο — στην ασφαλή ζώνη.

Χρήση και εναλλακτικές του SafeAreaView

SafeAreaView — ο απλούστερος τρόπος προστασίας περιεχομένου, αλλά όχι πάντα ευέλικτος. Το στοιχείο εφαρμόζει τα ίδια περιθώρια σε όλες τις πλευρές, πράγμα άβολο όταν χρειάζεται διαφορετικό padding για διαφορετικές άκρες. Για παράδειγμα, τα πλευρικά περιθώρια μπορεί να είναι περιττά και το κάτω μόνο για ένα κουμπί.

Κύριες εναλλακτικές: useSafeAreaInsets από react-native-safe-area-context (πιο ευέλικτη λύση), StatusBar.currentHeight στο Android, Platform.OS με μη αυτόματο έλεγχο μοντέλου συσκευής. Για σύνθετες περιπτώσεις, χρησιμοποιήστε συνδυασμό SafeAreaView για το γενικό container και useSafeAreaInsets για μεμονωμένα στοιχεία.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

Η βιβλιοθήκη react-native-safe-area-context — το de facto πρότυπο για εργασία με Safe Area στο React Native. Υποστηρίζεται από Expo, React Navigation και τα περισσότερα UI kits. Παρέχει τόσο hook όσο και στοιχείο Consumer για λειτουργικές και βασισμένες σε κλάσεις προσεγγίσεις.

react-native-safe-area-context για πλήρη έλεγχο

react-native-safe-area-context — βιβλιοθήκη που παρέχει πιο ευέλικτο API από το ενσωματωμένο SafeAreaView. Το κύριο πλεονέκτημα — πρόσβαση σε μεμονωμένες τιμές περιθωρίων (top, bottom, left, right) μέσω του hook useSafeAreaInsets, επιτρέποντας την επιλεκτική εφαρμογή τους.

Η βιβλιοθήκη παρέχει επίσης SafeAreaProvider — ένα στοιχείο υποχρεωτικό στο ανώτερο επίπεδο της εφαρμογής. Εγγράφεται σε αλλαγές των περιθωρίων συστήματος κατά την περιστροφή οθόνης ή το άνοιγμα πληκτρολογίου. Το React Navigation χρησιμοποιεί αυτή τη βιβλιοθήκη από προεπιλογή.

SafeAreaView από react-native-safe-area-context διαφέρει από το ενσωματωμένο: λειτουργεί σε περισσότερες συσκευές και υποστηρίζει κινούμενη εικόνα αλλαγής περιθωρίων. Για νέο έργο, συνιστάται η εγκατάσταση αυτής της βιβλιοθήκης ως εξάρτησης και η χρήση του SafeAreaView της αντί του ενσωματωμένου.

Συνήθη λάθη κατά την εργασία με SafeAreaView

SafeAreaView χρησιμοποιείται συχνά λανθασμένα. Πρώτο λάθος — τύλιγμα κάθε στοιχείου σε SafeAreaView, δημιουργώντας διπλά περιθώρια. Κανόνας: ένα SafeAreaView ανά ριζικό View οθόνης. Τα ένθετα στοιχεία κληρονομούν τα περιθώρια μέσω διάταξης Flex.

Δεύτερο λάθος — αγνόηση του Android. Στο Android το SafeAreaView χρησιμοποιεί WindowInsets, τα οποία μπορεί να διαφέρουν σε διαφορετικές εκδόσεις OS. Σε Android 15+ τα πάνελ συστήματος μπορεί να είναι διαφανή και τα περιθώρια αλλάζουν. Πάντα δοκιμάστε το SafeAreaView σε πραγματικές συσκευές, όχι μόνο στον εξομοιωτή.

Τρίτο λάθος — σκληρά κωδικοποιημένο padding. Μην χρησιμοποιείτε ποτέ Platform.OS === 'ios' ? 44 : 24 — οι τιμές περιθωρίων αλλάζουν μεταξύ μοντέλων και εκδόσεων OS. Πάντα χρησιμοποιείτε API συστήματος: safeAreaInsets ή useSafeAreaInsets. Το Dynamic Island σε iPhone 15 Pro έχει διαφορετικά περιθώρια από το Notch σε iPhone X.