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;

Are you using a `Navigator` in any other component ? Can you show us the code for your navigator ? Check [this](http://stackoverflow.com/questions/29335523/react-native-custom-navigation-with-navigator-component) for a working example of `Navigator` — G. Hamaide, Feb 24 '16 at 08:23
You don't have navigator in your scope. Try to use this.props.navigator instead. — siwymilek, Feb 24 '16 at 10:14
the problem is solved i just need to put `this` in a variable. I put `this` as: `let context = this;` and called it as: `context.props.navigator.pop();` — Ankush Rishi, Feb 24 '16 at 10:38

score 0 · Answer 1 · answered Nov 24 '17 at 03:19

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.

score 0 · Answer 2 · answered Sep 12 '20 at 16:21

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', } })

score 0 · Answer 3 · answered Oct 12 '22 at 21:31

0

this does not work onPress={() => navigation.pop()}

So, use this:

onPress={() => navigation.goBack()}

answered Oct 12 '22 at 21:31

Awara Amini

307
1
6

React-native: this.navigator.pop not working

3 Answers3