Fix Expo Router formSheet Page Empty Content Issue

Problem Description

When using Expo v54 + React Native v0.81.5 + Expo Router v6, the page content may not display at all when using presentation: "formSheet" to present a modal page.

This is because the Stack Navigator's layout dimensions are zero (both width and height are 0). While using fixed width and height can temporarily solve the problem, this is not suitable for content that requires flexible height. Using flex: 1 also doesn't solve this issue.

It's worth noting that this problem only occurs with presentation: "formSheet", but not with presentation: "modal".

Solution

Add the contentStyle property to the Stack.Screen options and set the height to 100%:

<Stack>
  <Stack.Screen
    name="sheet"
    options={{
      presentation: 'formSheet',
      headerShown: false,
      sheetGrabberVisible: true,
      contentStyle: {
        height: '100%',
      },
    }}
  />
</Stack>

By adding contentStyle: { height: "100%" }, you can ensure that the formSheet modal page content displays correctly.

Screenshot from issue description

Drawbacks

When adding multiple height values with sheetAllowedDetents, changing the page height up and down may cause blank pages or flickering

Complete Fix (Not Successfully Verified on Expo v54)

You need to upgrade react-native to 0.82. Using Expo v54 may require patch-package, otherwise you'll encounter expo-modules-core compatibility issues

❌  (node_modules/.pnpm/[email protected][email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/expo-modules-core/ios/JSI/EXJSIUtils.h:22:82)

  20 |     using PromiseInvocationBlock = void (^)(RCTPromiseResolveBlock resolveWrapper, RCTPromiseRejectBlock rejectWrapper);
  21 |
> 22 |     void callPromiseSetupWithBlock(jsi::Runtime &runtime, std::shared_ptr<react::CallInvoker> jsInvoker, std::shared_ptr<react::Promise> promise, PromiseInvocationBlock setupBlock);
     |                                                                                  ^ no member named 'CallInvoker' in namespace 'facebook::react'
  23 |
  24 | #pragma mark - Weak objects
  25 |

Expo SDK Version with React Native Version: Each Expo SDK version depends on a React Native version

Reference issue: StackNavigator as formSheet content has size of zero (iOS) #2522 issuecomment

References

upgrade-helper

react-native upgrade helper v0.81.5 -> v0.82.0