react-navigation withNavigation returns undefined

Question

In my react-native app, I have a component for my header with back button. It works except for when I click the back button and it gives me this error: undefined is not an object (evaluating this.props.navigation)

So I followed the docs here and tried using withNavigation. But I still get the same error. What am I doing wrong?

import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import { withNavigation } from 'react-navigation';

const HeaderWithBackBtn = (props) => {
    return (
        <View style={styles.container}>
            {/* Back button */}
            <TouchableOpacity 
                style={{width: 100}} 
                onPress={() => this.props.navigation.goBack()}>
                <Text style={styles.backBtn}>Back</Text>
            </TouchableOpacity>

            <Text style={styles.text}> {props.screen} </Text>

            {/* Placeholder button */}
            <Text style={{width: 100}}></Text>
        </View>
    )
}

const styles = StyleSheet.create({
    ...
});

export default withNavigation(HeaderWithBackBtn);

how did you pass your props to your HeaderWithBackBtn component? — arjayosma
– arjayosma, Commented Feb 19, 2019 at 5:26

Kai · Accepted Answer · 2019-02-19 05:40:25Z

2

The component you're wrapping is a functional component, so you need to access your props as props.foo rather than as this.props.foo.

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

should work fine.

answered Feb 19, 2019 at 5:40

Kai

2,5991 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-navigation withNavigation returns undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related