title: react-native using react-navigation
body: <p>I have created app using 'react-navigation' and first navigation working fine.
  I want to add a button to the header and I want to redirect it to the UserLogin page.
  this is the solution I found based on my research</p>
  
  <p><strong>Button title = "Profile" onPress = {() => {props.navigation.navigate('UserLogin')}} /></strong></p>
  
  <p>I know I'm doing something missing or wrong, but I can't find a round.Home user login and all redirects pages are below</p>
  
  <p><strong>HOMESCREEN</strong></p>
  
  <pre><code>// import { List,ListItem,SectionList,FlatList, Container, Header, Content, Accordion, AcitivityIndicator, View, Text } from "native-base";
  import TabBarIcon from '../components/TabBarIcon';
  import React from 'react';
  import axios from 'axios';
  import {
   Image,
   Platform,
   ScrollView,
   StyleSheet,
   TouchableOpacity,
   Button,
   FlatList
  } from 'react-native';
  
  import { Container, Header, Content, Icon, Accordion, Text, View } from "native-base";
  
  
  
  function HomeScreen(props) {
  
     return (
       &lt;Container&gt;
         &lt;Content&gt;
           &lt;Text&gt;
             HOME
         &lt;/Text&gt;
         &lt;Button title="Profile" onPress={() =&gt; {props.navigation.navigate('UserLogin')}} /&gt;
         &lt;/Content&gt;
       &lt;/Container&gt;
     );
   }
  
  
  
  HomeScreen.navigationOptions = {
   title: 'RESTAURANT',
   headerRight: () =&gt; (
  &lt;Button title="Profile"  onPress={() =&gt; {props.navigation.navigate('UserLogin')}}  /&gt;
   ),
   headerLeft: () =&gt; (
     &lt;TabBarIcon
       onPress={() =&gt; alert('This is a button!')}
       name={Platform.OS === 'ios' ? 'md-person' : 'md-link'}
       style={{ marginRight: 115 }}
     /&gt;
   ),
  };
  
  
  export default HomeScreen; 
  </code></pre>
  
  <p><strong>USERLOGIN(PROFILE) SCREEN</strong></p>
  
  <pre><code>
  
  import React from 'react';
  import {
    ActivityIndicator,
    AsyncStorage,
    Button,
    StatusBar,
    StyleSheet,
    View,
  } from 'react-native';
  
  export default function UserLoginScreen() {
  
      return (
        &lt;ScrollView &gt;
  
          &lt;Text&gt; UserLoginScreen &lt;/Text&gt;
        &lt;/ScrollView&gt;
      );
    }
  
    UserLoginScreen.navigationOptions = {
      title: 'RESTAURANT',
     };
  </code></pre>
  
  <p><strong>MAINTABNAVIGATOR</strong></p>
  
  <pre><code>import React from 'react';
  import { Platform } from 'react-native';
  import { createStackNavigator } from 'react-navigation-stack';
  import { createBottomTabNavigator } from 'react-navigation-tabs';
  
  import TabBarIcon from '../components/TabBarIcon';
  import HomeScreen from '../screens/HomeScreen';
  import FoodScreen from '../screens/FoodScreen';
  import DrinkScreen from '../screens/DrinkScreen'; 
  import OrderScreen from '../screens/OrderScreen';
  
  const config = Platform.select({
    web: { headerMode: 'screen' },
    default: {},
  });
  
  const HomeStack = createStackNavigator(
    {
      Home: HomeScreen,
    },
    config
  );
  
  HomeStack.navigationOptions = {
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon
        focused={focused} name={Platform.OS === 'ios' ? 'ios-home' : 'ios-home'}
      /&gt;
    ),
  };
  
  HomeStack.path = '';
  
  const FoodStack = createStackNavigator(
    {
      Food: FoodScreen,
    },
    config
  );
  
  FoodStack.navigationOptions = {
    tabBarLabel: 'Food',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'md-restaurant' : 'md-restaurant'} /&gt;
    ), 
  };
  
  FoodStack.path = '';
  
  
  
  
  const DrinkStack = createStackNavigator(
    {
      Drink: DrinkScreen,
    },
    config
  );
  
  DrinkStack.navigationOptions = {
    tabBarLabel: 'Drink',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'md-wine' : 'md-wine'} /&gt;
    ),
  };
  
  DrinkStack.path = '';
  
  
  const OrderStack = createStackNavigator(
    {
      Orders: OrderScreen,
    },
    config
  );
  
  OrderStack.navigationOptions = {
    tabBarLabel: 'Order',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-basket' : 'ios-basket'} /&gt;
    ),
  };
  
  OrderStack.path = '';
  
  // const UserLoginStack = createStackNavigator(
  //   {
  //     UserLogin: UserLoginScreen,
  //   },
  //   config
  // );
  
  // UserLoginStack.navigationOptions = {
  //   tabBarLabel: 'UserLogin',
  //   tabBarIcon: ({ focused }) =&gt; (
  //     &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-basket' : 'ios-basket'} /&gt;
  //   ),
  // };
  
  // UserLoginStack.path = '';
  
  const tabNavigator = createBottomTabNavigator({
    HomeStack,
    FoodStack,
    DrinkStack,
    OrderStack,
  });
  
  tabNavigator.path = '';
  
  
  
  
  export default tabNavigator;
  
  
  
  </code></pre>