Cómo evitar superposición de contenido con SafeAreaView en React Native

¿Qué es SafeAreaView en React Native?

El componente SafeAreaView se usa para que el contenido no se superponga con zonas inseguras del dispositivo, como el notch, la barra de estado o la barra de navegación.

👉 Ideal para iOS, y también puede funcionar bien en Android con una configuración adicional.

Cómo funciona 🤔

SafeAreaView ajusta automáticamente su padding para evitar que el contenido quede oculto detrás de áreas no seguras. Funciona mejor en iOS, pero en Android no tiene efecto a menos que uses SafeAreaProvider de la librería react-native-safe-area-context.

Ejemplo básico en iOS

jsx

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

export default function App() {
return (
  <SafeAreaView style={styles.container}>
    <Text>Hola, esto está dentro de SafeAreaView</Text>
  </SafeAreaView>
);
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Importante

En iOS, SafeAreaView nativo funciona correctamente.
En Android, es preferible usar SafeAreaView de react-native-safe-area-context con su SafeAreaProvider.

🛡️ SafeAreaView compatible con iOS y Android

¿Por qué usar SafeAreaProvider?

El SafeAreaView de React Native no tiene efecto real en Android.
Para asegurar compatibilidad completa, usa la librería react-native-safe-area-context.

📝 Pasos para implementarlo correctamente

En Android, para un mejor comportamiento, usa SafeAreaProvider de react-native-safe-area-context:

1Instala la librería con npm: npm install react-native-safe-area-context

2Implementa SafeAreaProvider como contenedor principal

jsx

import { Text, StyleSheet } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

// Componente principal
export default function App() {

// Renderiza el SafeAreaProvider
return (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Text style={ styles.texto}>Contenido seguro en iOS y Android</Text>
    </SafeAreaView>
  </SafeAreaProvider>
  );
}

// Estilos para el SafeAreaView
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  texto:{
    color:"red",
    fontSize:25,
    textAlign: "center"
  }
});

¿Qué hace SafeAreaProvider?

SafeAreaProvider es un componente que provee contexto para que SafeAreaView funcione correctamente, especialmente en Android.
Calcula dinámicamente las zonas seguras según el dispositivo y orientación.