How can I use navigation in a class component? REACT-NATIVE

Question

im new in react-native and I want to know how can i use the prop navigation in my class component, because it doesnt has it, let me show my code:

heres the home screen where I call my class component Notes:

render() {
    return (
        <>
        <View style = {this.styles.container}>
            <View>
                <Text style = {this.styles.Text}>Welcome to home!</Text>
            </View>
            <Notes data = {this.state.array_notes} navigation = {this.props.navigation}></Notes>        
            <View style = {this.styles.View}>                                                                                                 
                <Button title = "Create new note" onPress = {() => this.props.navigation.navigate("Create_note", {fetch_notes: this.fetch_notes.bind(this)})}></Button>
            </View>                                                                                                                           
            <View style = {this.styles.View2}>
                <Button title = "Notes" styles = {this.styles.Button} onPress = {() =>this.props.navigation.navigate("See_notes")}></Button>
            </View>
        </View>
        </>
    );

as you can see, im passing to it two props, data and navigation, in my class component Notes and use them like this:

render() {
    return (
        <>
        <View style = {this.styles.View}>
           <FlatList data = {this.props.data} renderItem = {({item}) => (<TouchableOpacity onPress = {this.navigation.navigate("Edit_note")}><Text style = {this.styles.Text}>{item.title}</Text></TouchableOpacity>)} keyExtractor = {(item) => item.note_number.toString()}></FlatList>
        </View>
        </>
    );
}

with the prop data it works, but with navigation it shows me this error:

what im doing wrong? i dont any variable call params.data

D10S · Accepted Answer · 2020-08-09 06:48:07Z

1

change

this.navigation.navigate..

to

this.props.navigation.navigate.

edited Aug 9, 2020 at 6:48

answered Aug 9, 2020 at 6:18

D10S

1,5692 gold badges9 silver badges15 bronze badges

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

2 Comments

D10S Over a year ago

I didn't read your question to the end of it. The error you are getting might be caused since you forgot to write "props" ('this.navigation.navigate..' ==> 'this.props.navigation.navigate..')

plus Over a year ago

got it, i had a bad syntax in edit_note.js, thats why wasnt working, thanks :)

Collectives™ on Stack Overflow

How can I use navigation in a class component? REACT-NATIVE

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related