how to pass data to another screen in react native (and how to receive it)?

i want to pass data from this screen (Lihat.js)

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { style } from './Style';

class Lihat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nama:'',
      nim:'',
      prodi:'',
      no_telp:'',
      alamat:'',
      listData:[],
    };
    this.url = "http://192.168.100.161/mhs/mhs.php"
    // this.url = "http://192.168.162.248/mhs/mhs.php"
  }
  componentDidMount(){
    this.ambilListData()
  }
  async ambilListData(){
    await fetch(this.url)
    .then((response)=>response.json())
    .then((json)=>{
      console.log("hasil :"+JSON.stringify(json.data.result))
      this.setState({listData:json.data.result})
    })
    .catch((error)=>{
      console.log(error);
    })
  }
  async klikDelete(id){
    await fetch(this.url+"/?op=delete&id="+id)
    .then((response)=>response.json())
    .then((json)=>{
      alert('Data berhasil didelete');
      this.ambilListData();
    })
    .catch((error)=>{
      console.log(error)
    })
  }
  render() {
    return (
      <View style={style.lihatWrapper}>
        <View style={style.viewData}> 
        {
          this.state.listData.map((val,index)=>(
            <View style={style.viewList} key={index}>
                <Text style={style.textListNama}>Nama :{val.nama}</Text>
              
              <View style={{flexDirection:'column'}}>

              {/* i want to pass data from this button / link */}
              <Text style={style.textListLihat} onPress={()=>this.props.navigation.navigate('Detail',{id:this.state.listData.map()})}>Detail</Text>


              <Text style={style.textListEdit} onPress={()=>this.props.navigation.navigate('Update')}>Edit</Text>
              <Text style={style.textListDelete} onPress={()=>this.klikDelete(val.id)}>Delete</Text>
              </View>
            </View>
          ))
        }
        </View>
      </View>
    );
  }
}

export default Lihat;

to this screen (Detail.js)

import { TabRouter, validatePathConfig } from '@react-navigation/native';
import React, { Component } from 'react';
import { View, Text, FlatList, SafeAreaView} from 'react-native';
import { style } from './Style';
import Lihat from './Lihat';

class Detail extends Component {
  route
  constructor(props) {
    super(props);
    this.state = {
        nama:'',
        nim:'',
        prodi:'',
        no_telp:'',
        alamat:'',
        listData:[]
    };
    this.url = "https://192.168.100.161/mhs/mhs.php"
    // this.url = "http://192.168.162.248/mhs/mhs.php"
  }
  componentDidMount(){
    this.ambilListData()
  }
  async ambilListData(){
    await fetch(this.url)
    .then((response)=>response.json())
    .then((json)=>{
      console.log("hasil: "+json.data.result)
      this.setState({listData:json.data.result})
    })
    .catch((error)=>{
      console.log(error);
    })
  }
  render() {
    return (
      <View style={style.viewWrapper}>
        <Text style={style.content}>
        {
          this.state.listData.map((val,index)=>(
            <View style={style.viewList} key={index}>
              <Text style={style.textListNama}></Text>
              <Text style={style.textListNama}></Text>
            </View>
          ))
        }
        </Text>
      </View>
    );
  }
}

export default Detail;

so when i press ‘detail’, the screen will navigate to detail.js and display the data detail.

Lihat.js
enter image description here

Thanks

i already read react native passing data tutorial. but i cant understand it. and when i search on youtube mostly the tutorial is using axios.