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.