DetailScreen.js

import React,{Component} from 'react';
import {View,Text,Button} from 'react-native';

export default class DetailScreen extends Component {
  constructor(props){
    super(props);
  }
  
  render(){
    return(
      <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
        <Text>DetailScreen</Text>
        <Button title="Go Back" onPress={()=> this.props.navigation.goBack()} />
      </View>
    );
  }
}

HomeScreen.js

import React,{Component} from 'react';
import {View,Text} from 'react-native';

export default class HomeScreen extends Component {
  constructor(props){
    super(props);
  }
  
  render(){
    return(
      <View style={{flex:1, justifyContent:"center", alignItems:"center"}}>
        <Text>HomeScreen</Text>
        /* Use the name of the navigation in stack*/
        <Button title="Go to Detail" onPress={()=> this.props.navigation.navigate("Detail")} />
      </View>
    );
  }
}

NavigationContainer.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// import screens here
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();

export default App extends React.Component {
  render(){
    return(
     /* Here's the wrapper for navigation */
    <NavigationContainer>
      /* Here's the stack, you input your screen */
      <Stack.Navigator>
      /* The name in each screen is used to call to go to each screen */
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );
  }
}