HOW DO I USE CREATESTACKNAVIGATOR IN CLASS? REACT-NATIVE

Question

im new in react-native and im trying to build sidemenu, the problem is that all the examples they are using hooks, and for now im using class, this is my structure for the side menu:

import Home from "../screens/Home";
import Create_note from "../screens/Create_Note";
import Edit_note from "../screens/Edit_Note";

class Slide_menu extends Component {

    Drawer = createDrawerNavigator();
    
    render() {

        return (
            <NavigationContainer>
                <this.Drawer.Navigator initialRouteName = "Home">
                    <this.Drawer.Screen name = "Home" component = {Home}/>
                </this.Drawer.Navigator>            
            </NavigationContainer>
        )
    }
}

export default Slide_menu;

it works, because it will show the menu and the Home option, the problem now is that from the Home component I open a Notes component and after that I navigate throught the app:

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation-stack";
import Notes from "../components/Notes";

class Home extends Component {
    render() {
        return (
            <>
                <Notes navigation = {this.props.navigation}></Notes>
            </>
        );
    }
}

export default Home;

it will show the Notes but when I click the one of the notes to run this function:

select_edit(item) {
    this.note = item;
    this.note_number = item.note_number;
    if (this.onpress) {
        this.set_color();
    }else {
        this.props.navigation.navigate("Edit_note");
    }
}

it gives me the error:

console.error: The action NAVIGATE with playload {"name":Edit_note} was not handled by any navigator
do you have a screen named 'Edit_note"?

how can solve this?

Answer 1

you just have to add the Edit_note to your navigator:

import Home from "../screens/Home";
import Create_note from "../screens/Create_Note";
import Edit_note from "../screens/Edit_Note";

class Slide_menu extends Component {

    Drawer = createDrawerNavigator();
    
    render() {

        return (
            <NavigationContainer>
                <this.Drawer.Navigator initialRouteName = "Home">
                    <this.Drawer.Screen name = "Home" component = {Home}/>
                    <this.Drawer.Screen name = "Edit_note" component = {Edit_note}/>
                </this.Drawer.Navigator>            
            </NavigationContainer>
        )
    }
}

export default Slide_menu;