feat: add freezeOnBlur prop to enable/disable freeze per navigator & per screen

[janicduplessis]

Description

We have a use case where we'd like to disable freeze for a particular screen. This adds a prop to allow setting if freeze is enabled on a per screen basis.

Changes

Added a freezeOnBlur prop to the Screen component.

Test code and steps to reproduce

Tested in an app that it is now possible to disable freeze for a particular screen and that previous behavior is kept if no prop is passed.

In repo: TestsExample/src/TestFreeze.tsx

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[kacperkapusciak]

Thanks @janicduplessis! 🏅

I've renamed the props and added a way to disable freeze per navigator.

Fixes software-mansion/react-freeze#23

[kacperkapusciak]

After a discussion with @WoLewicki and @satya164 I've decided to drop the option on the navigator and unify the logic under one freezeOnBlur prop that can disable and enable freezing per screen and/or per navigator with screenOptions.

Gonna add this to all navigators in @react-navigation soon™

[janicduplessis]

@kacperkapusciak Thanks, sounds good. I was also planning to add it to @react-navigation, I should be able to do it in the next few days.

[kacperkapusciak]

After back and forth discussions we've decided to remove the MaybeFreeze component. But why?

With the introduction of this PR and the implementation of freezeOnBlur prop developers can enable/disable freezing anytime in runtime. With this power React in the change of enabled in MaybeFreeze would have to unmount and remount the whole react tree including losing react all state etc.

  if (enabled) {
    return <DelayedFreeze freeze={freeze}>{children}</DelayedFreeze>;
  } else {
    return <>{children}</>;
  }

On the other hand, a bare Freeze component coming from react-freeze lib has no real side effects besides wrapping a component with a React.Suspense. In this code when Suspender is provided with false (the Freeze component) it defines a ref and it does nothing with it.

Remounting the whole React tree is way worse than wrapping every screen with an (almost) empty Suspense.

[kkafar]

LGTM 👍