Implement largeTitle on Android

[janicduplessis]

trafficstars

This adds support for large header on Android, similar to what exists on iOS. The main issue is that we need a way to communicate scroll to CoordinatorLayout. Normally this is done using NestedScrollView or a RecyclerView as a direct child of CoordinatorLayout. This is however not really possible with the current setup and the way react native works.

I was able to get it working by making ReactScrollView inherit NestedScrollView to test but we will need to find a better solution as I don't think this is upstreamable. There might also be some subtle behavior differences when the NestedScrollView is not a direct child of the CoordinatorLayout. This is to be verified with a fully native app.

I need to investigate more how NestedScrollView works to forward scroll events to the parent CoordinatorLayout. Some options I see:

• Have a custom ScrollView component that would extend NestedScrollView. Probably the easiest to implement but requires app changes to work.
• Traverse subviews to find instances of ReactScrollView and find a way to hook into its scroll events. We could then have some proxy ScrollView that we insert as a child of CoordinatorLayout that sends the scroll events the way it expects it. The issue is we'd have to know and re-traverse whenever the view hierachy changes.

Summary of the changes:

• Use CollapsingToolbarLayout to implement large title behaviors
• Adds support for existing largeTitle and largeTitleFontFamily props
• Add largeTitleFontSize but currently unused, CollapsingToolbarLayout only allows passing a resource id for styling titles. See if we can hack something by traversing subviews.
• Add new collapsable prop to make the header hide during scroll, not sure about the name. It was simple to add support for this with CollapsingToolbarLayout so I figured why not.

[bartzy]

@kmagiera Is this something that you think can be merged eventually?

[janicduplessis]

It still requires a significant amount of work / testing. I can't give a timeframe but I'll try working on this again when I have some free time.

[hirbod]

would be awesome to see this on android, even though its not platform specific

[grahammendick]

I’ve implemented large titles for Android in my Navigation router for React Native. It’s powered by a 100% native CoordinatorLayout component.

import { ScrollView } from 'react-native';
import { CoordinatorLayout, NavigationBar, CollapsingBar } from 'navigation-react-native';

<CoordinatorLayout>
  <NavigationBar
    titleBar="Page title"
    largeTitle={true}
    style={{height: 180}}>
    <CollapsingBar />
  </NavigationBar>
  <ScrollView nestedScrollEnabled={true} />
</CoordinatorLayout>