title: navigate from header's right button - React Native
body: <p>I'm trying to navigate from headers buttons, but I can't because the navigation variable is not found.</p>
  
  <p>this is my code</p>
  
  <pre><code>export const createRootNavigator = (signedIn = false) =&gt; {
  
  return StackNavigator(
    {
      SignedIn: {
        screen: SignedIn,
        navigationOptions: {
          gesturesEnabled: false,
          headerStyle,
          headerTintColor: "white",
          headerTitleStyle,
          headerLeft: null,
          headerRight: &lt;TouchableOpacity style={ [{paddingHorizontal:15}] }
                          onPress={() =&gt; navigation.navigate({ routeName: 'Notification'})}&gt;
                          &lt;Icon
                            name="md-notifications-outline"
                            size={26}
                            style={{ color: "white" }}/&gt;
                        &lt;/TouchableOpacity&gt;,
  
  
        }
      },
      SignedOut: {
        screen: SignedOut,
        navigationOptions: {
          gesturesEnabled: false
        }
      },
      Notification: {
        screen: Notification,
        navigationOptions: {
          gesturesEnabled: false
        }
      }
    },
    {
      mode: "modal",
      initialRouteName: signedIn ? "SignedIn" : "SignedOut"
    }
  );
  </code></pre>
  
  <p>};</p>
  
  <p>I tried to declare a navigation variable but it doesn't work</p>
  
  <p>screen shots</p>
  
  <p><a href="https://i.stack.imgur.com/pbxrU.png" rel="nofollow noreferrer">home screen</a></p>
  
  <p><a href="https://i.stack.imgur.com/7la85.png" rel="nofollow noreferrer">error screen</a></p>
  
  <p>thanks.</p>