Animate headerBackground between scene transitions

[erickreutz]

Bringing this over from react-navigation/react-navigation#4787

Currently, headerBackground is sort of just plopped in place between scene changes which leads to it looking pretty jarring between transitions. What I'm proposing here is that we keep headerBackground rendered absolutely between scenes much like we do for the left, right and center. The default background interpolator transforms the x-axis moving it to the left and right as the scene transitions. This allows one to pull off the below in a much smoother fashion.

[erickreutz]

@brentvatne think we could get this merged?

[erickreutz]

Thank you!

[brentvatne]

I ended up reverting back to using no transition by default in order to not make this a breaking change, and so that we can test this out a bit before we make it default. To opt into using it until then you can do the following in stack config:

    transitionConfig: () => ({
      headerBackgroundInterpolator:
        HeaderStyleInterpolator.forBackgroundWithTranslation,
    }),

I exported HeaderStyleInterpolator from react-navigation in 2.12.0

[brentvatne]

in 3.x this will be available in stack config as headerBackgroundTransitionPreset: 'toggle' | 'fade' | 'translate' - default is toggle.

https://github.com/react-navigation/react-navigation-stack/blob/d08d584c738b29d734ce179efa375859cc4ca599/example/src/HeaderBackgrounds.js#L92-L98

[erickreutz]

@brentvatne awesome!