How to navigate to another screen in a nested navigator in React-Native?

I just implemented bottom navigation bar and it seems like I need to change the way I navigate between screens now on. This is how I was doing it before:

onPress={() => this.props.navigation.navigate('my_profile')}

but now it doesn't work, it shows this message:

Do you have a screen named 'my_profile'? If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigato

This is how I have implemented the bottom tab:

export default function home_customers() {    
  return (
    <NavigationContainer>
        <Tab.Navigator>
            <Tab.Screen name="Home" component={home_customer_screen} />
            <Tab.Screen name="More" component={settings_screen} />
        </Tab.Navigator>
    </NavigationContainer>
  );
}

//this class below is located in the same file with the function home_customers
class home_customer_screen extends Component{ 
   ... 
}

//this class is located in a different file that's why I am exporting it
export default class settings_screen extends Component{ 
   render() {
    return (
        <View>                    
             <TouchableOpacity onPress={() => this.props.navigation.navigate('my_profile')}>                           
               <Text>My profile/Text>                           
             </TouchableOpacity>                             
        </View >
    );
  } 
}

//this is where I am trying to navigate to
export default class my_profile extends Component {
 ...
}

FYI: I am not using Functions but Classes!

UPDATE

I am using nested navigators. This is the createStackNavigator located in another file:

const AppNavigator = createStackNavigator({
     login: {
        screen: login
     },
     home_customers: {
        screen: home_customers
     },
     settings_screen: {
        screen: settings_screen       
     },
     my_profile: {
        screen: my_profile        
     },
   },
     {
        initialRouteName: "login"
     }
);