Store Custom Attributes on each Route + Update them with updateCurrentRouteParams()

[joncursi]

It's great that ExNavigator allows you to set the background color for the NavigationHeader component at the scene-level. Similar to how this is done, it would be great to be able to set custom attributes on the route, such as a backgroundColor for the StatusBar.

The use case for this is Android Material Design. Google recommends using a 500-level color for the NavigationHeader, and a 700-level accent color for the status bar. See https://material.google.com/style/color.html

The YouTube app does this. When you go to someone's channel, not only does the NavigationHeader color change based on user preference, so does the StatusBar background accent.

So basically fetching profile data after the component has been invoked and using it to update both the status bar color and navigation bar colors using updateCurrentRouteParams().

I've logged a similar issue here detailing the need for setting the navigationBar backgroundColor with updateCurrentRouteParams(), but I think it's necessary to expand this even further to custom attributes per the above reasoning.

TLDR:

1. I have set up a StatusBar component in my application that I would like to subscribe to the attributes of the current route (i.e. connected via Redux store), and update when a custom attribute (perhaps named statusBarBackground) on the current route changes.
2. This custom attribute should be able to be set with updateCurrentRouteParams() since it is data-dependent.

[joncursi]

Here's the YouTube app example:

Here the route has been invoked and data is being fetched for this profile. In the meantime, the header and status bar colors are set with default colors (red500 for navigationBar and red700 for statusBar):

A few seconds later, the profile data has been fetched, and new attributes (color in this example) are set on the route for both navigationBar backgroundColor and statusBar backgroundColor:

[sibelius]

@skevy I think this look like a feature request

we could have another field here (maybe, StatusBarConfig): https://github.com/exponentjs/ex-navigation/blob/master/src/ExNavigationTypeDefinition.js.flow#L58

@joncursi a workaround is to add a <StatusBar /> inside ur root component, as all the properties of are merged, as described here: https://facebook.github.io/react-native/docs/statusbar.html#usage-with-navigator