navBarCustomView to support floating child View

[staltz]

Issue Description

I'm building a header like the one in the Twitter Android app, which contains a floating View that moves around as the user is scrolling in the ContentView. The floating View should initially be rendered on top of the ContentView, and when the user scrolls, the floating View gradually moves towards the TopBar.

It's not clear whether react-native-navigation supports this, so I'm filing this issue either as a feature request or as a bug (in case it was meant to be supported).

Steps to Reproduce / Code Snippets / Screenshots

One screen with a custom nav bar is enough to reproduce this.

export const navigatorStyle = {
  statusBarColor: 'blue',
  navBarCustomView: 'HEADER',
  navBarBackgroundColor: 'blue',
  navBarTextColor: 'white',
  navBarTextFontSize: 16,
  topBarElevationShadowEnabled: false,
  navBarTextFontBold: true,
};

Then, using transform styles on the floating View, we should be able to affect translateX and translateY with the Animated.Value API in React Native. Example:

function getFloatingViewTransform(animValue) {
  return {
    transform: [
      {
        translateX: animValue.interpolate({
          inputRange: [0, 100],
          outputRange: [-80, 0],
          extrapolate: 'clamp',
        }),
      },
      {
        translateY: animValue.interpolate({
          inputRange: [0, 100],
          outputRange: [80, 0],
          extrapolate: 'clamp',
        }),
      },
      {
        scale: animValue.interpolate({
          inputRange: [0, 100],
          outputRange: [2, 1],
          extrapolate: 'clamp',
        }),
      },
    ],
  };
}

Actual screen when scroll yoffset=0:

⬆️ Should have been a square partially covering the nav bar, partially covering the content view

Actual screen when scroll yoffset=100:

⬆️ Correct

---

Environment

• React Native Navigation version: 1.1.375
• React Native version: 0.51.0
• Platform(s) (iOS, Android, or both?): only Android
• Device info (Simulator/Device? OS version? Debug/Release?): Nexus 5, Android 6.0.1, Debug build of the app

[staltz]

Nevermind, I think I'll go full custom in this screen (implementing my own JS-side navbar).