ReactNative: TypeError: this.props.navigation.navigate is not a function

Question

Not really sure how this is happening, I have seemingly typed all of my props, but I am trying to pass navigator to my bottom bar component so I can navigate onPress .

First I declare props interface:

export interface BottomBarProps {
    owner: string;
    navigation: NavigationProp<ParamListBase>;
}

Then the class component:

class BottomBar extends React.Component<any, any> {

    constructor() {
        super({});

        this.state = {
            loaded: false,
        }
    }

    navigateTo(page : string) {
        if (this.props.owner == page) {
            return;
        }

        this.props.navigation.navigate(page)
    }

    render() {
        return (
            <Appbar style={styles.bottom}>
                <Appbar.Action color={this.props.owner == "home" ? "white" : "#311b92"} icon="home" size={iconSize} onPress={() => this.navigateTo("home")} />                <Appbar.Action color={this.props.owner == "profile" ? "white" : "#311b92"} icon=“profile” size={iconSize} onPress={() => this.navigateTo("profile")} />
            </Appbar>
        );
    }
}

console.log(this.props.navigation results:

Object {
  "navigation": Object {
    "addListener": [Function addListener],
    "canGoBack": [Function canGoBack],
    "dispatch": [Function dispatch],
    "getParent": [Function getParent],
    "getState": [Function anonymous],
    "goBack": [Function anonymous],
    "isFocused": [Function isFocused],
    "navigate": [Function anonymous],
    "pop": [Function anonymous],
    "popToTop": [Function anonymous],
    "push": [Function anonymous],
    "removeListener": [Function removeListener],
    "replace": [Function anonymous],
    "reset": [Function anonymous],
    "setOptions": [Function setOptions],
    "setParams": [Function anonymous],
  },
  "route": Object {
    "key": "Home-0RS-tZ-9F2bbVZQ61Hb3a",
    "name": "Home",
    "params": undefined,
    "path": undefined,
  },
}

Can indeed see that navigate is a function. So what is going on here?

Answer 1

It's possible you need to declare navigate in your interface, like so:

export interface BottomBarProps {
    owner: string;
    navigation: NavigationProp<ParamListBase>;
    navigate?: YourTypeHere;
}