@withNavigation produces an error when used for a left button

[michaelAndersonCampingWorld]

I'm trying to make a left button on the navigation bar will call navigator.pop when pressed and has different text than default.

Here is the component:

import React, { Component } from 'react'
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { withNavigation } from '@exponent/ex-navigation';

const styles = StyleSheet.create({
    centerStart: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingLeft: 15,
    },
});

/* eslint-disable react/prefer-stateless-function */
@withNavigation
class EndChat extends Component {
    props: Props;

    render() {
        const { navigator } = this.props;
        return (
            <TouchableOpacity onPress={navigator.pop} style={styles.centerStart}>
                <Text>End Chat</Text>
            </TouchableOpacity>
        );
    }
}

type Props = {
    navigator: Navigator,
};

export default EndChat;

and I use it on a route

Chat.route = {
    navigationBar: {
        visible: true,
        title: 'Chat',
        renderLeft: (route, props) => <EndChat />,
    },
}

When I actually click on endchat I get the following screen

Is this a bug with ex-navigation or core-decorators, or an incompatibility with react-native 37.

[kiki-le-singe]

@michaelAndersonCampingWorld I have the same error with react-native 40.

But you could do something like that:

        handleOnPress = () => {
           // this below code doesn't work.
           // const { navigator } = this.props;
           // navigator.pop()

           const { navigation } = this.props;
           navigation.getNavigator(':id').pop()
        }

    render() {
        return (
            <TouchableOpacity onPress={this.handleOnPress} style={styles.centerStart}>
                <Text>End Chat</Text>
            </TouchableOpacity>
        );
    }

See https://github.com/exponent/ex-navigation/issues/374