The `unmountInactiveScreens` prop lets user unmount all inactive screens for the whole navigator when they go out of focus. It'll be better to have the option to do that per screen, so I have added the `unmountOnBlur` option instead.
To get the previous behaviour, user can specify the option in `screenOptions`.
Currently, when a screen is replaced the new screen comes into focus with a push animation. However, sometimes you might want to customize how the animation looks like.
For example, when the user logs out, animating out the previous screen like pop feels more natural than doing a push animation with the sign in screen. The PR adds a new `animationTypeForReplace` option to control this. Specifying `animationTypeForReplace: 'pop'` will pop the previous screen, otherwise the new screen will be pushed like before.
Co-authored-by: Michał Osadnik <micosa97@gmail.com>
Using `resetRoot` requires knowledge of the whole navigation tree that a specific screen shouldn't have. It's better to remove it to discourage resetting whole navigator state from inside a screen.
It's still possible if the user needs it:
- Expose `resetRoot` from container's ref via context
- Use `reset` with the target set to the root navigation state's key
Sometimes it's useful to get the current navigation state inside a screen. We have the `dangerouslyGetState` method for that. However, the problem with this method is that it won't trigger a re-render when it changes, so user cannot rely on it for rendering something.
This adds a 2 things:
1. A `state` event similar to `focus` and `blur` that user can subscribe to
2. A `useNavigationState` hook that takes a selector and returns part of the state
Internally `useNavigationState` subscribes to the state event to get the current navigation state.
I have also made it mandatory to pass a selector to `useNavigationState`. This makes it harder to accidentally get the whole navigation state, which will trigger a re-render every time anything changes, even if we don't care about the change. With a selector, we can tell which part we care about, and if that part didn't change, it won't trigger a re-render.
For example, to get the same functionality as the old `isFirstRouteInParent` method:
```js
function MyComponent({ route }) {
const isFirstRouteInParent = useNavigationState(state => state.routes[0] === route);
// content
}
```
