title: undefined is not a function (evaluating 'navigate("Register")') navigation not working
body: <p>following is my code</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 <code>Tab.js</code>.</p>
  
  <pre><code>GoPressed(navigate){
    navigate("Register");
  }
  
  
  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 <code>Register</code> screen after <code>Go</code> 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>Done somewhat changes in the code I tried running <code>Home.js</code> in other way means not using in tab view then it is running and navigation also works but when i am calling <code>Home.js</code> in tab-view i.e in <code>Tab.js</code> then it showing error as in screenshot.</p>
  
  <p><a href="https://i.stack.imgur.com/gdhDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gdhDg.png" alt="enter image description here"></a></p>