Adjusting React Native/Expo screen to accommodate the device's notch

Question

I'm developing a React Native/Expo app and I'm facing an issue with the app's layout on devices with a notch (e.g., iPhone13, iPhone14). The content of my app overlaps with the notch area, and I want to make sure it properly adjusts to avoid any overlap.

I've heard about the react-native-safe-area-context library and its components SafeAreaView and SafeAreaProvider, but I'm not sure how to use them correctly to handle the safe area insets and adjust the screen layout accordingly.

Could you please provide guidance on how to make my React Native/Expo app adjust the screen to go around the device's notch using SafeAreaView and SafeAreaProvider? How can I ensure that my app's content is properly positioned and does not overlap with the system UI elements?

Below is where my App.js is currently. It has SafeAreaProvider right now, but I've tried SafeAreaView, and both imported from 'react-native-safe-area-context' and 'react-native'.

    ``import React from 'react';
import { Text, View, Button, StatusBar, Image, StyleSheet, ActivityIndicator, TouchableOpacity, Alert, ScrollView, AsyncStorage,  } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import {createSwitchNavigator, createStackNavigator, createAppContainer, createBottomTabNavigator} from 'react-navigation'
import LoginScreen from './Login.js';
import styles from './styles';
import MessageScreen from './Message';
import NewMessageScreen from './NewMessage';
import ReplyScreen from './Reply';
import AccountScreen from './Account';
import RosterScreen from './Roster';
import TeamsScreen from './Teams';
import ScheduleScreen from './Schedule';
import EventScreen from './Event';
import * as Font from 'expo-font';

global.testing=true;

class AuthLoadingScreen extends React.Component {
  constructor(props){
    super(props);
    this._loadData();
    global.test=0;
  }

  _loadData = async () => {

    // const logged = await AsyncStorage.getItem('Login');
    // if(logged==!null)
    //   this.props.navigation.navigate('Auth');
    // else{
    //   const LoginData=JSON.parse(logged);
    //   isEmpty=true;
    //   global.dropdown_4_options=LoginData.dropdown_4_options;
    //   global.dropdown_4_defaultValue=LoginData.dropdown_4_defaultValue;
    //   global.logged=logged;
    //   this.props.navigation.navigate(LoginData.Remember_me !== 'YES' ? 'Auth' : 'App');
    // };

    await Font.loadAsync({
      'Corbel': require('./assets/fonts/CORBEL.otf'),
      '!Pepsi!': require('./assets/fonts/PEPSI_pl.ttf'),
    });

  }

  render(){
    return (
      <View style={styles.container}>
        <Text>AuthLoadingScreen</Text>

        <ActivityIndicator/>
        <StatusBar barStyle="default"/>
      </View>
    );
  }
}



const ScheduleStack = createStackNavigator({
    Schedule: { screen: ScheduleScreen },
    Event: { screen: EventScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);


const AccountStack = createStackNavigator({
    Account: { screen: AccountScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);

const AuthStack = createStackNavigator(
    {Login: LoginScreen},
    {
        headerLayoutPreset:'center',
        title:'Team Pass'
    }
);


const TeamsStack = createStackNavigator({
        Teams: { screen: TeamsScreen },
        Roster: { screen: RosterScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);

const MessageStack = createStackNavigator({
    Message: { screen: MessageScreen },
    NewMessage: { screen: NewMessageScreen },
    Reply: { screen: ReplyScreen },
    },
    {
        headerLayoutPreset:'center',
    }
);


const AppStack =   createBottomTabNavigator(
  {
    Schedule: ScheduleStack,
    Teams: TeamsStack,
    Message: MessageStack,
    Account: AccountStack,
  },
  {
   initialRouteName:'Schedule',
    defaultNavigationOptions: ({ navigation }) => ({
          tabBarIcon: ({ focused, tintColor }) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: '#bb133e',
      inactiveTintColor: '#002047',
    },
  }
)

class IconWithBadge extends React.Component {
  render() {
    const { name, badgeCount, color, size } = this.props;
    return (
      <SafeAreaProvider>
        <View>style={{ width: 24, height: 24, margin: 5 }}>
        <Ionicons name={name} size={size} color={color} />
        {badgeCount > 0 && (
          <View
            style={{
              // /If you're using react-native < 0.57 overflow outside of the parent
              // will not work on Android, see https://git.io/fhLJ8
              right: -6,
              top: -3,
              backgroundColor: '#bb133e',
              borderRadius: 6,
              width: 12,
              height: 12,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
              {badgeCount}
            </Text>
          </View>
        )}
        </View>
      </SafeAreaProvider>
    );
  }
}


const HomeIconWithBadge = props => {
  // You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
  return <IconWithBadge {...props} badgeCount={0} />;
};

const getTabBarIcon = (navigation, focused, tintColor) => {
  const { routeName } = navigation.state;
  let IconComponent = Ionicons;
  let iconName;
  if (routeName === 'Schedule') {
    iconName = 'calendar';
    // We want to add badges to home tab icon
    IconComponent = HomeIconWithBadge;
  } else if (routeName === 'Account') {
    iconName = 'person';
  } else if (routeName === 'Teams') {
    iconName = 'ios-people';
  } else if (routeName === 'Message') {
    iconName = 'mail';
  }

  // You can return any component that you like here!
  return <IconComponent name={iconName} size={25} color={tintColor} />;
};

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
    },{
      //initialRouteName:'AuthLoading'
      initialRouteName:'Auth'
    }
  ),
)


``

I appreciate any help or code examples you can provide. Thank you!

I'm developing a React Native/Expo app and need assistance with adjusting the app's layout to accommodate the device's notch. I want to avoid content overlap with the notch area and ensure that the app's content is properly positioned within the safe area of the device. I've heard about the react-native-safe area context library and its components SafeAreaView and SafeAreaProvider, but I'm unsure how to implement them correctly. I'm seeking guidance and code examples on using SafeAreaView and SafeAreaProvider to handle safe area insets and adjust the screen layout accordingly. Any help would be appreciated. Thank you!