RNative-Components

SafeAreaView in React Native

September 08, 2021

In React Native, SafeAreaView is a component that ensures content is rendered within the safe area boundaries of a device, particularly for devices with notches, rounded corners, or other screen elements that may obscure content. This is especially important for iPhones with the notch (starting from iPhone X), where part of the screen is reserved for the status bar, the home indicator, etc.

Usage:

Here is a basic example of how to use SafeAreaView in React Native:

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

const App = () => {
  return (
    <SafeAreaView style={styles.safeArea}>
      <Text>Hello, World!</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default App;

Key Points:

  • SafeAreaView works by adding padding to avoid overlapping with system elements like the notch or status bar.
  • Always make sure to use flex: 1 to allow the view to expand and fill the available space.
  • You can still style SafeAreaView like any other view, e.g., by adding background colors or layout properties.

SafeAreaContext (alternative):

If you need more control or are using React Navigation, you might want to use the react-native-safe-area-context package for more fine-tuned safe area handling.

npm install react-native-safe-area-context

This provides hooks like useSafeAreaInsets for even more custom use cases.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

  return (
    <View style={[styles.container, {
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right
    }]}>
      <Text>Hello, World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default App;