title: navigate to another screen from tab-view screen not working
body: <p>following is my code:- posting full code</p>
  
  <p>index.android.js</p>
  
  <pre><code>import React, { Component } from 'react';
      import { AppRegistry, Text, StyleSheet, View, NetInfo, Alert, AsyncStorage } from 'react-native';
      import Splash from './app/screens/Splash'
      import { StackNavigator } from 'react-navigation'
      import Login from './app/screens/Login'
      import Register from './app/screens/Register'
      import Check from './app/screens/Check'
      import Qwerty from './app/screens/Qwerty'
      import Home from './app/screens/Home'
  
  
      var STORAGE_KEY = 'token';
      var DEMO_TOKEN;
  
      class Splashscreen extends React.Component {
        static navigationOptions = {
           header: null
        };
  
       async componentDidMount() {
          const { navigate } = this.props.navigation;
  
          var DEMO_TOKEN = await AsyncStorage.getItem(STORAGE_KEY);
  
          if (DEMO_TOKEN === undefined) {
            navigate("Login");
          } else if (DEMO_TOKEN === null) {
            navigate("Splash");
          } else {
             navigate("Temp");
          }
        };
  
  
  
        render() {
          const { navigate } = this.props.navigation;
          return(
          &lt;View style={styles.wrapper}&gt;
            &lt;View style={styles.titlewrapper}&gt;
                    &lt;Text style={styles.title}&gt; Loding... &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
          );
        }
      }
  
      const Section = StackNavigator({
         Root: {screen: Splashscreen},
         Splash: { screen: Splash },
         Login: { screen: Login },
         Registerscreen: { screen: Register },
         Temp: { screen: Check },
         Qwerty:{screen: Qwerty},
         Home:{screen: Home},
      });
  
      AppRegistry.registerComponent('shopcon', () =&gt; Section);
  </code></pre>
  
  <p>here i can navigate properly without any error Now,</p>
  
  <p>This is my tab.js => Here i given three tabs (mainly working in first home.js)</p>
  
  <pre><code>  import React, { PureComponent } from 'react';
    import { Animated, StyleSheet,View } from 'react-native';
    import { TabViewAnimated, TabBar } from 'react-native-tab-view';
    import { StackNavigator } from 'react-navigation';
    import Qwerty from './Qwerty';
    import Home from './Home';
    //import Login from './Login'
  
    import type { NavigationState } from 'react-native-tab-view/types';
  
    type Route = {
     key: string,
     title: string,
   };
  
  type State = NavigationState&lt;Route&gt;;
  
  class Tab extends PureComponent&lt;void, *, State&gt; {
  
  static navigationOptions = {
    header: null
  };
  
  state: State = {
    index: 0,
    routes: [
      { key: '1', title: 'Home' },
      { key: '2', title: 'Shops' },
      { key: '3', title: 'Bookmark' },
    ],
  };
  
  _first: Object;
  _second: Object;
  _third: Object;
  
  _handleIndexChange = index =&gt; {
    this.setState({
      index,
    });
  };
  
  _renderLabel = props =&gt; ({ route, index }) =&gt; {
    const inputRange = props.navigationState.routes.map((x, i) =&gt; i);
    const outputRange = inputRange.map(
      inputIndex =&gt; (inputIndex === index ? '#fff' : '#222')
    );
    const color = props.position.interpolate({
      inputRange,
      outputRange,
    });
  
    return (
      &lt;View&gt;
        &lt;Animated.Text style={[styles.label, { color }]}&gt;
          {route.title}
        &lt;/Animated.Text&gt;
      &lt;/View&gt;
    );
  };
  
  _renderHeader = props =&gt; {
    return (
      &lt;TabBar
        {...props}
        pressColor="#999"
       // onTabPress={this._handleTabItemPress}
        renderLabel={this._renderLabel(props)}
        indicatorStyle={styles.indicator}
        tabStyle={styles.tab}
        style={styles.tabbar}
      /&gt;
    );
  };
  
  _renderScene = ({ route }) =&gt; {
    switch (route.key) {
      case '1':
        return (
          &lt;Home
            ref={el =&gt; (this._first = el)}
            style={[styles.page, { backgroundColor: '#E3F4DD' }]}
          /&gt;
        );
      case '2':
        return (
          &lt;Qwerty
            ref={el =&gt; (this._second = el)}
            style={[styles.page, { backgroundColor: '#E6BDC5' }]}
            initialListSize={1}
          /&gt;
        );
      case '3':
        return (
          &lt;Qwerty
            ref={el =&gt; (this._third = el)}
            style={[styles.page, { backgroundColor: '#EDD8B5' }]}
            initialListSize={1}
          /&gt;
        );
      default:
        return null;
    }
  };
  
  render() {
    return (
  
      &lt;TabViewAnimated
        style={[styles.container, this.props.style]}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onIndexChange={this._handleIndexChange}
       // onRequestChangeTab={this._handleIndexChange}
        lazy
      /&gt;
    );
  }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
  indicator: {
    backgroundColor: '#fff',
  },
  label: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 8,
  },
  tabbar: {
    backgroundColor: '#ff6600',
  },
  tab: {
     opacity: 1,
    // width: 140,
  },
  page: {
    backgroundColor: '#f9f9f9',
  
  },
  });
  
  export default Tab;
  </code></pre>
  
  <p>This is Home.js => It is running well if i am using it directly but not running when using it in Tab.js</p>
  
  <pre><code>GoPressed(navigate){
      navigate("Registerscreen");
    }
  
    render() {
       const { navigate } = this.props.navigation;
        contents = this.state.qwerty.data.map((item) =&gt; {
          return (
              &lt;View&gt;   
                  {item.p1.shareproductid ? &lt;TouchableHighlight onPress={() =&gt; this.GoPressed(navigate)} style={styles.button}&gt;
                      &lt;Text style={styles.buttonText}&gt;
                        Go
                      &lt;/Text&gt;
                    &lt;/TouchableHighlight&gt; : null }
  
                &lt;Text&gt;
                  {item.p1.content}
                &lt;/Text&gt;
              &lt;/View&gt;
            );
         });
        return (
          &lt;ScrollView style={styles.container}&gt;
            {contents}
          &lt;/ScrollView&gt;
        );
      }
  </code></pre>
  
  <p>I am trying to navigate on Register screen after Go button pressed, But here it shows me error. I have used same navigation method before they works correctly but here it gives error. please show where i am going wrong?</p>
  
  <p>How to navigate to any other(not these three screens of tab-view ) screen from tab-view?</p>
  
  <p>I tried running Home.js in other way means not using in tab view then it is running and navigation also works but when i am calling Home.js in tab-view i.e in Tab.js then it showing error as in screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/l0ZSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l0ZSA.png" alt="enter image description here"></a></p>