title: How to pass navigation props to "createStackNavigator" to use default header with animation
body: <p>I have been working over the last few days to add an animated header to my screens. I have succeeded in this however I would now like to apply this as my header by default rather then copying and pasting the code into all screens I wish to use it. At the moment the animated header is implemented in the screen as follows:</p>
  
  <p>To render the header:</p>
  
  <pre><code>static navigationOptions = ({ navigation }) =&gt; {
      return {
          header: () =&gt; {
              return (
                  &lt;SafeAreaView style={{
                      height: 0,
                      overflow: 'visible',
                  }}&gt;
                      &lt;Animated.View style={{height: 80, width: 80,
                          transform: [ {translateY: navigation.getParam('headerScrollY', 0)}]
                      }}&gt;
                          &lt;TouchableOpacity style={{padding: 20}} onPress={() =&gt; navigation.goBack()}&gt;
                              &lt;Icon.Ionicons  style={{color: '#ffffff', width: 50, height: 50}} name={'ios-arrow-round-back'} size={50} /&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/Animated.View&gt;
                  &lt;/SafeAreaView&gt;
              )
          }
      }
  };
  </code></pre>
  
  <p>To setup the state:</p>
  
  <pre><code>constructor() {
      super();
      this.state = {
          headerScrollY: new Animated.Value(0),
      };
  }
  </code></pre>
  
  <p>To set the animation interpolation
   and pass value to navigation props (this is what I am going to have to access later when rendering the header)</p>
  
  <pre><code>componentWillMount() {
      this.props.navigation.setParams({
          headerScrollY: this.state.headerScrollY.interpolate({
              inputRange: [0, 80],
              outputRange: [0, -80],
          })
      });
  }
  </code></pre>
  
  <p>Main render method with "scrollView" calling "onScroll" event to pick up scrolling action</p>
  
  <pre><code>render() {
      return (
              &lt;ScrollView
                  style={Styles.wholePageContainer}
                  showsVerticalScrollIndicator={false}
                  scrollEventThrottle={16}
                  onScroll={Animated.event( [{nativeEvent:{contentOffset: {y: this.state.headerScrollY}}}])}
              &gt;
                  ...
              &lt;/ScrollView&gt;
          );
      }
  </code></pre>
  
  <hr>
  
  <p>To set the default header I must set the "header" value of "defaultNavigationOptions" when I use "createStackNavigator". I am able to use this to create a simple defaultHeader in red with height of 100 (code and image below):</p>
  
  <pre><code>const HomeStack = createStackNavigator({
      Home: HomeScreen,
      Category: CategoryScreen,
      Venue: VenueScreen,
      Activity: ActivityScreen,
  }, {
      headerMode: 'screen',
      defaultNavigationOptions: {
          header: &lt;View style={{backgroundColor: '#ff0000', height: 100}} /&gt;
          ,
      },
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/sTZbJ.png" rel="nofollow noreferrer">Simulator demonstrating application of simple default header</a></p>
  
  <p>Unfortunately for my animated header I require the "navigation" prop as this is used to store the animation values. I have tried many approaches into passing this to where I need the values and was wondering if anyone knew how to do this or if it is even possible or if anyone had any suggestions.</p>