How to send data from one screen to another - react-native

Question

I've got this problem - I can get variables from the props (being sent from MainContainer which contains navigation and those variables. (item.name, item.coordinates.latitude and item.coordinates.longitude work fine on Primary.js, but I can't get them on Map_map.js.
What i'm trying to do is to send the coords (from MainContainer.js through Primary.js which shows names of cities) into in Map_map.js.
When it gets there, it should place a marker only on the location of the city I clicked on.
Also, I currently have Map_map in the navigation tab and when I remove it from there, I can't navigate to it anymore so I need help with that as well.
Code:
MainContainer.js
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';
// Locations
const mesta = [
{
name: 'Praha',
coordinates: {
latitude: 50.072829,
longitude: 14.433817
}},
,
{
name: 'České Budějovice',
coordinates: {
latitude: 48.975250,
longitude: 14.479161
}},
,
{
name: 'Plzeň',
coordinates: {
latitude: 49.739296,
longitude: 13.372455
}},
{
name: 'Karlovy Vary',
coordinates: {
latitude: 50.231656,
longitude: 12.869226
}},
{
name: 'Ústí nad Labem',
coordinates: {
latitude: 50.662592,
longitude: 14.042824
}},
{
name: 'Liberec',
coordinates: {
latitude: 50.764136,
longitude: 15.047840
}},
{
name: 'Hradec Králové',
coordinates: {
latitude: 50.210071,
longitude: 15.829660
}},
{
name: 'Pardubice',
coordinates: {
latitude: 50.032558,
longitude: 15.773678
}},
{
name: 'Jihlava',
coordinates: {
latitude: 49.401642,
longitude: 15.584001
}},
{
name: 'Brno',
coordinates: {
latitude: 49.190254,
longitude: 16.614144
}},
{
name: 'Olomouc',
coordinates: {
latitude: 49.590450,
longitude: 17.259280
}},
{
name: 'Ostrava',
coordinates: {
latitude: 49.820469,
longitude: 18.269387
}},
{
name: 'Zlín',
coordinates: {
latitude: 49.224215,
longitude: 17.668567
}},
]
//Screen names
const lokace = "Lokace";
const mapa = "Mapa";
const mapa_det = "Mapa_det";
const Tab = createBottomTabNavigator();
function MainContainer() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={lokace}
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === lokace) {
iconName = focused ? 'home' : 'home-outline';
} else if (rn === mapa) {
iconName = focused ? 'map' : 'map-outline';
}
else if (rn === mapa_det) {
iconName = focused ? 'locate' : 'locate-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#007aff',
inactiveTintColor: 'grey',
labelStyle: { paddingBottom: 10, fontSize: 10 },
style: { padding: 10, height: 70}
}}>
<Tab.Screen name={lokace} children={() => <Primary towns={mesta}/>}/>
<Tab.Screen name={mapa} children={() => <Secondary towns={mesta}/>}/>
<Tab.Screen name={mapa_det} component={Map_map}/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MainContainer;
(inside "nav" folder): Primary.js, Secondary.js, Map_map.js
Primary.js
import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import { useNavigation } from '#react-navigation/native';
export default function Primary(props)
{
const navigation = useNavigation();
const map_map = "Map_map";
return(
<ScrollView style=
{{
flex: 1,
}}>
<View>
{props.towns.map(item => (
<Text
style={styles.card}
onPress={() => navigation.navigate('Map_map', item.coordinates)}
>
{item.name}
{item.coordinates.latitude }
{item.coordinates.longitude}
</Text>
))}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
card:{
backgroundColor: "#007aff",
borderRadius: 50,
alignItems: 'center',
margin: 5,
padding: 10,
color: 'white',
fontWeight: 'bold'
},
card2:{
backgroundColor: "#FF3300",
borderRadius: 50,
alignItems: 'center',
margin: 5,
padding: 10,
color: 'white',
fontWeight: 'bold'
},
});
Map_map.js
import * as React from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import Primary from './Primary.js';
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
function ProfileScreen({ navigation: { goBack } }) {
return (
<View>
<Button onPress={() => goBack()} title="Go back from ProfileScreen" />
</View>
);
}
export default function Map_map({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
//specify our coordinates.
initialRegion=
{{
latitude: 49.061880,
longitude: 17.349916,
latitudeDelta: 0.002,
longitudeDelta: 0.002,
}}
>
<Marker
//coordinate={navigation.getParam(item.coordinates)}
// latitude: 49.061880,
// longitude: 17.349916,
/>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
map: {
height: '100%',
width: '100%'
},
});

Answer 1

In your Primary.js card onPress, do it like below -
onPress={() => navigation.navigate('Map_map', {
data: item.coordinates,
})}

Answer 2

As you can see in the documentation you can pass param to another screen in the second parameter of navigate function.
navigation.navigate('Screen_Name', { param: 'abc' })