[POS UI Extensions] `Screen`/`Navigator` props not reactive

[timvandam]

Please list the package(s) involved in the issue, and include the version you are using

@shopify/ui-extensions-react 2024.10

Describe the bug

Not all <Screen /> props are reactive. E.g. the presentation prop is currently bugging me. Long story short, I use a custom router for POS. This router pre-allocates <Screen /> components and fills in <Screen /> props as the new pages are routed to. This works well with the exception of the presentation prop. Changing this to toggle whether the screen is a sheet does not change the behavior of the screen, and leaves it behaving just like its initial configuration. Using key to force rerender the screen from scratch does not work. It is also not possible to get rid pre-allocation, as the <Navigator /> component does not rerender when its children change. Making the presentation prop reactive, or the Navigator rerender when its children change could solve this issue.

Steps to reproduce the behavior:

function Test() {
  const [sheet, setSheet] = useState(false);

  useEffect(() => setSheet(true), []);

  const { navigation } = useApi();

  return (
    <Navigator>
      <Screen name="a" title="a">
        <Text>Screen A</Text
        <Button title="Open Screen B" onPress={() => navigation.navigate('b')} />
      </Screen>

      <Screen name="b" title="b" presentation={{ sheet }}>
        <Text>Screen B</Text
      </Screen>

    </Navigator>
  );
}

Screen B will not open as a sheet

Expected behavior

Screen B should open as a sheet

Screenshots

Additional context