undefined is not a function (evaluating 'navigate("Register")') navigation not working

Question

following is my code

This is my tab.js => Here i given three tabs (mainly working in first home.js)

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<Route>;

   class Tab extends PureComponent<void, *, State> {

    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 => {
      this.setState({
        index,
      });
    };

    _renderLabel = props => ({ route, index }) => {
      const inputRange = props.navigationState.routes.map((x, i) => i);
      const outputRange = inputRange.map(
        inputIndex => (inputIndex === index ? '#fff' : '#222')
      );
      const color = props.position.interpolate({
        inputRange,
        outputRange,
      });

      return (
        <View>
          <Animated.Text style={[styles.label, { color }]}>
            {route.title}
          </Animated.Text>
        </View>
      );
    };

    _renderHeader = props => {
      return (
        <TabBar
          {...props}
          pressColor="#999"
         // onTabPress={this._handleTabItemPress}
          renderLabel={this._renderLabel(props)}
          indicatorStyle={styles.indicator}
          tabStyle={styles.tab}
          style={styles.tabbar}
        />
      );
    };

    _renderScene = ({ route }) => {
      switch (route.key) {
        case '1':
          return (
            <Home
              ref={el => (this._first = el)}
              style={[styles.page, { backgroundColor: '#E3F4DD' }]}
            />
          );
        case '2':
          return (
            <Qwerty
              ref={el => (this._second = el)}
              style={[styles.page, { backgroundColor: '#E6BDC5' }]}
              initialListSize={1}
            />
          );
        case '3':
          return (
            <Qwerty
              ref={el => (this._third = el)}
              style={[styles.page, { backgroundColor: '#EDD8B5' }]}
              initialListSize={1}
            />
          );
        default:
          return null;
      }
    };

    render() {
      return (

        <TabViewAnimated
          style={[styles.container, this.props.style]}
          navigationState={this.state}
          renderScene={this._renderScene}
          renderHeader={this._renderHeader}
          onIndexChange={this._handleIndexChange}
         // onRequestChangeTab={this._handleIndexChange}
          lazy
        />
      );
    }
  }

  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;

This is Home.js => It is running well if i am using it directly but not running when using it in Tab.js.

GoPressed(navigate){
  navigate("Register");
}


render() {
   const { navigate } = this.props.navigation;
    contents = this.state.qwerty.data.map((item) => {
      return (
          <View>   
              {item.p1.shareproductid ? <TouchableHighlight onPress={() => this.GoPressed(navigate)} style={styles.button}>
                  <Text style={styles.buttonText}>
                    Go
                  </Text>
                </TouchableHighlight> : null }

            <Text>
              {item.p1.content}
            </Text>
          </View>
        );
     });
    return (
      <ScrollView style={styles.container}>
        {contents}
      </ScrollView>
    );
  }

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?

Done somewhat changes in the code 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.

Answer 1

Your render code is incorrect, you are getting the navigate from props after the return clause.

Try this:

render() {
  const { navigate } = this.props.navigation;
  contents = this.state.qwerty.data.map((item) => {

    return (
        <View>   
            {item.p1.shareproductid ? <TouchableHighlight onPress={() => this.GoPressed(navigate)} style={styles.button}>
                <Text style={styles.buttonText}>
                  Go
                </Text>
              </TouchableHighlight> : null }

          <Text>
            {item.p1.content}
          </Text>
        </View>
      );
   });
  return (
    <ScrollView style={styles.container}>
      {contents}
    </ScrollView>
  );
}

Answer 2

Change this,

onPress={() => this.GoPressed(navigate)}

with this

onPress={() => { this.GoPressed(navigate) }}

or this

onPress={this.GoPressed.bind(this, navigate)}

Also I think

 const { navigate } = this.props.navigation;

this should be before map since you are using navigate inside the map