Avoid The Notch With SafeAreaView in React Native Apps

“The notch” has been introduced by Apple a few years ago, with the launch of iPhone X. For iOS developers, this introduced more work on the day to day layout efforts, as it added an extra set of device types. On most devices that have a notch, regular views do not display well and they block out a considerable part of the top of the screen. Let’s see how we can avoid the notch in React Native projects, with the help of SaveAreaView, a component that’s built into the React Native core.

Let’s consider the following screen – a screenshot of a list of fruits app using React Native. As you can see in the preview, the notch clearly blocks some of the information that’s being displayed, resulting in a suboptimal layout.

In case you want to play with it, here’s the full React Native source code for the sample fruits app:

import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Pressable,
} from 'react-native';

export default function App() {
  const [fruits, setFruits] = useState([]);
  const [expandedIndex, setExpandedIndex] = useState(-1);

  const fetchFruits = () => {
    fetch('https://www.fruityvice.com//api/fruit/all', {method: 'GET'})
      .then(resp => resp.json())
      .then(newFruits => setFruits(newFruits));
  };

  useEffect(() => {
    fetchFruits();
  }, []);

  const renderFruit = ({item: fruitItem, index}) => {
    const {carbohydrates, protein, fat, calories, sugar} = fruitItem.nutritions;
    return (
      <Pressable
        onPress={() =>
          expandedIndex === index
            ? setExpandedIndex(-1)
            : setExpandedIndex(index)
        }>
        <View style={styles.fruitContainer}>
          <Text style={[styles.fruitName, styles.regularText]}>
            Name: {fruitItem.name}
          </Text>
          <Text style={styles.regularText}>Family: {fruitItem.family}</Text>
          {expandedIndex === index && (
            <Text style={styles.regularText}>
              Nutrition: Carbohydrates: {carbohydrates}g per 100g, Protein:{' '}
              {protein}g per 100g, Calories: {calories}g per 100g, Sugar:{' '}
              {sugar}g per 100g, Fat: {fat}g per 100g
            </Text>
          )}
        </View>
      </Pressable>
    );
  };
  return (
    <View style={styles.container}>      <FlatList
        keyExtractor={item => item.name}
        data={fruits}
        renderItem={renderFruit}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: 'blue',
  },
  fruitContainer: {
    margin: 5,
    shadowRadius: 20,
    shadowColor: '#fff',
    shadowOffset: {width: 10, height: 10},
  },
  fruitName: {
    color: '#111111',
    fontSize: 16,
  },
  regularText: {
    color: '#fff',
    fontWeight: '600',
  },
});

How to Avoid the Notch in React Native

One quick but crude solution would be to add some padding/margin at the top of the screen. This will work but it is not sustainable because you would have to add some additional logic to determine the notch size of each device your app runs on. Additionally, you also need to factor in support for the devices where a notch is not present, such as the majority of the Android devices.

A more robust solution is to use React Native’s SafeAreaView which is used to render content within the safe surface area of a device, where the user can see your app’s content. SafeAreaView according to the documentation is only available on iOS devices with iOS version 11 or higher. To avoid the notch, you can simply replace the app wrapper with SafeAreaView instead of View.

<SafeAreaView style={styles.container}>      
  <FlatList
    keyExtractor={item => item.name}
    data={fruits}
    renderItem={renderFruit}
  />
</SafeAreaView>

This we’ll achieve the goal:

Conclusion

By the end of this article we have successfully learnt how to avoid the notch in React Native using SafeAreaView. You do not need an external library to achieve this, so there are no complications in terms of security or binary size.

An external library react-native-safe-area-context does exist though, to help achieve this and also provide advanced methods to handle safe area insets in JS. But in the trivial case of avoiding the notch on iOS devices, the built-in SafeAreaView is more than enough.