How to send data from one screen to another-CodePudding

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%'
    },
  });

CodePudding user response：

In your Primary.js card onPress, do it like below -

onPress={() => navigation.navigate('Map_map', {
     data: item.coordinates,
})}

CodePudding user response：

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' })