Is it okay to set presentation in a useEffect with setOptions, or would it hurt performance?

[SimpleCreations]

Consider a screen like this:

const SheetScreen = ({ navigation }) => {
 useEffect(() => {
   navigation.setOptions({
     title: 'Test',
     presentation: 'formSheet',
     sheetAllowedDetents: [0.5],
   });
 }, [navigation]);

 return (
   <View style={{ padding: 24 }}>
     <Text>Form sheet</Text>
   </View>
 );
};

This pattern is good for DX because it keeps implementation details of the screen inside that screen's component. This code also works on both Android and iOS — the screen is presented as a bottom sheet from the start.

However, considering that useEffect runs asynchronously after the screen has already rendered with default options, would this hurt performance? Is it possible that on slower devices there would be a noticeable UI shift or a frame drop due to this? Would this mess with accessibility announcements?

I know that useLayoutEffect is also an option, but unfortunately it only works with setOptions on Android, but not on iOS.

Thanks!

[kkafar]

Hey!

I'm surprised that it's the first time somebody asks and that we haven't documented that in the native stack docs in react-navigation, however setting presentation in useEffect does not make sense and is not supported. The intended presentation for the screen MUST be known at first-render time.

Imagine that after first render, on native side I receive a new screen with presentation: 'push', I push it onto the stack with e.g. UINavigationController, and then, when transition has already been triggered I receive result of another render informing me (native implementation) that you wish to present that screen as formSheet. How should that even look like?

Hence, it is not supported and likely won't be.

[kkafar]

The only reason this likely works for you right now is React batching the updates, so that despite using useEffect the native side receives formSheet during the very first render.

I'd recommend against such practices though. There might be code in react-navigation / our codebase that assumes that the presentation does not change.

[vincere-mori]

For presentation, sheetAllowedDetents, etc. I would not rely on setOptions from useEffect.

Those options are structural native-stack options. They are ideally known before the native screen is created/presented. A late setOptions is usually fine for header title/buttons, but for presentation style it can produce one extra native update and some options may not apply reliably after presentation has started, especially on iOS sheets.

The safer pattern is to keep the option on the <Screen> declaration:

<Stack.Screen
  name="Sheet"
  component={SheetScreen}
  options={{
    title: 'Test',
    presentation: 'formSheet',
    sheetAllowedDetents: [0.5],
  }}
/>

If you want colocation, export the options from the screen module and import them into the navigator:

export const sheetScreenOptions = {
  title: 'Test',
  presentation: 'formSheet',
  sheetAllowedDetents: [0.5],
} satisfies NativeStackNavigationOptions

useEffect/setOptions is fine for dynamic, non-structural things after the screen exists. For presentation mode, I would treat navigator-level options as the correct place.