React-native: this.navigator.pop not working

Question

I am new to react-native. I used the react-native-navbar package to go back to the previous route navbar component for react-native

when I click on the navbar button it shows me an error " undefined is not an object(evaluating 'this.navigator.pop') "

here is my snippet:

'use strict';
var React = require('react-native');
var {
    StyleSheet,
    Text,
    View,
} = React;
var NavigationBar = require('react-native-navbar');
var Demo = React.createClass({
    render: function()
    {
        var leftButtonConfig = {
          title: 'Back',
          handler: function onNext() {
            this.navigator.pop();
          }
        };

        var titleConfig = {
          title: 'Hello world page!',
        };
        return(
            <View style={{ flex: 1, }}>
      <NavigationBar
        title={titleConfig}
        leftButton={leftButtonConfig} />

            <View style={styles.container}>
        <Text style={styles.header}>
        Hello World
        </Text>
        </View>
        </View>
        );
    }
});
var styles = StyleSheet.create({
    container: {
        flex:1
    },
    header: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign: 'center'
    }
});

module.exports = Demo;

Answer 1

You just need to call it as a prop.

As they uses in their example

this.props.navigator.pop()

When routing the navigation uses to pass as props to the components to make easier when to make a pop to the screens stack. btw, wix-navigation can be an alternative to this, and the have a good documentation.

Answer 2

According to react native navigation 7.0.0 documentation, you need to import { Navigation } from 'react-native-navigation'; then on back button click you need to write Navigation.pop(this.props.componentId, { component: { name: 'ComponentName', } })