CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigationreact-android
Mizlul
Mizlul

Reputation: 2290

undefined is not object React Native

I am getting well known error undefined is not an object when trying to call this.refs from the context of navigationOptions.

Better if I explain with code:

 static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle: 'my app',
        title: 'my app',
        headerTitleStyle: {
            textAlign: "center",
            flex: 1,
        },
        headerLeft:
            <TouchableOpacity style={{padding: 15, marginLeft: 5}} onPress={() => { navigation.state.params.goBack(navigation.state.params.canGoBack) }}>
                {navigation.state.params.canGoBack ? <Text>back</Text>: <Text>close</Text>}
            </TouchableOpacity>,
    });


    componentDidMount() {
            this.props.navigation.setParams({goBack: this.onBack});
            this.props.navigation.setParams({canGoBack: this.state.canGoBack});
            Keyboard.dismiss();
        }

   onBack(canGoBack) {
        console.log(canGoBack);
        if(canGoBack){
            this.refs[WEBVIEW_REF].goBack(); // here is the error happening, somehow I can access this.refs.
        }
    }

    onNavigationStateChange(navState) {
        this.setState({
            canGoBack: navState.canGoBack
        });
        this.props.navigation.setParams({
            canGoBack: this.state.canGoBack,
        });
        console.log("some action happened: " + this.state.canGoBack);

    }

Anyone knows how to solve this?

Upvotes: 2

Views: 2359

Answers (1)

Hamza El Aoutar
Hamza El Aoutar

Reputation: 5657

The issue is that you are losing the context when using this.onBack

You need to make sure that this.onBack is called with your component context, and you can do this by either:

  • Using arrow functions: this.props.navigation.setParams({goBack: (e) => this.onBack(e)});

  • Bind this to your function: this.props.navigation.setParams({goBack: this.onBack.bind(this)});

Upvotes: 3

Related Questions