feat(Android): Add support for different Top App Bar styles

[tboba]

Description

Since the beginning of time...
Since the first version of react-native-screens...
There was a toolbar.

But toolbar have always been...
Small and non-expandable...

Nowadays...
times have changed.

This Pull Request introduces not 3, not 3.5, but 4 types of headers - center-aligned, small, medium and large header types, where the last two of them can collapse.
From now the toolbar will always be nested in CollapsingToolbarLayout, but this shouldn't have an impact on the experience overall.
Unfortunately, while having header type set to medium or large the headerCenter property does not work for now.

For the best experience of using new header types it is recommended to have Material 3 bundled into the application, while using new header types.

For more information about the header types, please visit official Material 3 documentation.

Changes

• Added support for new header types
• Changed the way how hierarchy is being created during the ScreenStackFragment inflation
• Changed the behaviour of positioning items on header (via headerLeft and headerRight prop)
• Added Material 3 to our example apps

Screenshots / GIFs

Before

Screen.Recording.2023-09-01.at.17.22.13.mov

After

8mb.video-WMw-Zz1dZmWl.mp4

Test code and steps to reproduce

Use Test1874 attached to this branch to test the changes in TestsExample & FabricTestExample.

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

[WoLewicki]

Hey, I added a review. Let's make sure not to introduce bugs with this 🚀

[WoLewicki]

Why do we remove it here?

[tboba]

That's because of updating the layoutParams of appBarLayout. Basically, when we're changing the type of appBar, its layout is being changed, resulting in wrong position of the views. For that reason we're removing all of its views (they will be added further in onUpdate) and setting references of toolbar and collapsingtoolbarlayout to null to ensure that we won't use old toolbars

[sidorchukandrew]

This is very exciting! Awesome work!

[tboba]

Currently, this PR is blocked by changes from facebook/react-native#44099 (we may skip requiring setting the prop nestedScrollEnabled with this change, but we'll see).

[sidorchukandrew]

That could make sense! We already set contentInsetAdjustmentBehavior on ScrollView for the large iOS headers.

[sidorchukandrew]

Could we possibly create a new NestedScrollView component until the changes land in React Native core?

[FTCHD]

could this be published in a beta version until the upstream changes are shipped, and not requiring nestedScrollEnabled as @tboba mentioned?

[quentez]

With the new App Bar styles introduced in Material Expressive, this is going to become even more relevant. Their behavior is quite complex, and it would be a pain to re-create in pure RN instead of using the native controls.

[SumitR9910]

I wonder if this also supports the TopAppBarScrollBheaviour modifier of the material 3 App Bars.
Tried a lot of times mimicking it with custom headers but never got it to be as smooth as the native behaviour.

[kkafar]

We won't proceed with this PR. Expect new one coming soon with new implementation of the native stack.