I wonder if a single effect would be cleaner:

React.useEffect(() => {
  if (isActive) {
    Orientation.unlockAllOrientations();
  } else {
    Orientation.lockToPortrait();
  }
  return () => {
    if (isActive) {
      Orientation.lockToPortrait();
    };
  };
}, [isActive]);

Arguably it could be even more simple:

React.useEffect(() => {
  if (!isActive) {
    return undefined;
  }
  Orientation.unlockAllOrientations();
  return () => {
    Orientation.lockToPortrait();
  };
}, [isActive]);

replaced with an invariant

We had similar discussions here and a couple of versions: https://phab.comm.dev/D14221 and we finally ended up with this version. In your version if isActive changes, the cleanup is run first then the effect and it's messy. In the version in the diff it's really clear:

• if modal is active then unlock orientation
• if modal is not active then lock orientation
• on onmount just lock orientation no matter what (in the original code there is an if but we can omit it as I explained in comment above)

It doesn't really matter, if isActive is false, then we had called lockToPortrait before and here we call it again. I don't see anything wrong with calling it twice in a row.

In your version if isActive changes, the cleanup is run first then the effect and it's messy.

Not sure I agree that it's messy, but I don't feel strongly