how does expo-router implement react-safe-area-context in the background?

278 views Asked by At

I installed expo-router 2.0 into my new project with expo sdk 49 as specified in the documentation https://docs.expo.dev/routing/installation/#install-dependencies

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler

there is one thing I realized when created first view in my app, it is uncovered in the doc;

the content was already padded below status bar. so i don't need to use SafeAreaView as

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

function SomeComponent() {
  return (
    <SafeAreaView>
      <View />
    </SafeAreaView>
  );
}

because the content i add in the /app directory already has that padding. so, i only do

import { View } from 'react-native';

function SomeComponent() {
  return (
      <View />
  );
}

and it works as i want.

should I trust this behaviour of expo-router? would it cause problems in the future?

0

There are 0 answers