Expo Router: override default SafeAreaProvider in ExpoRoot

Expo SDK
1

Please provide the following:

  1. SDK Version: ~49.0.13
  2. Platforms(Android/iOS/web/all): All
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

Hi everyone,

I’m asking here for help using the new Expo Router v2 with Expo SDK 49.
As stated by the team in this blog post, the default layout of the new router will now use a safe area view. This is in fact what I can see in the ExpoRoot.txs file as below with the SafeAreaProvider :

export function ExpoRoot({
  wrapper: ParentWrapper = Fragment,
  ...props
}: ExpoRootProps) {
  /*
   * Due to static rendering we need to wrap these top level views in second wrapper
   * View's like <GestureHandlerRootView /> generate a <div> so if the parent wrapper
   * is a HTML document, we need to ensure its inside the <body>
   */
  const wrapper: ExpoRootProps["wrapper"] = ({ children }) => {
    return (
      <ParentWrapper>
        <GestureHandlerRootView>
          <SafeAreaProvider
            // SSR support
            initialMetrics={INITIAL_METRICS}
          >
            {children}

            {/* Users can override this by adding another StatusBar element anywhere higher in the component tree. */}
            {!hasViewControllerBasedStatusBarAppearance && (
              <StatusBar style="auto" />
            )}
          </SafeAreaProvider>
        </GestureHandlerRootView>
      </ParentWrapper>
    );
  };

For my specific use case, I would like to avoid using the SafeAreaProvider here to have a full background color on the screen and use my own paddings and margins in my layout. How can I achieve this without modifying directly this file?

Thanks a lot for your help,
Lucas

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.