how to pass state.params in react-native

Question

Hello i am kinda new to react-native but i am trying to do some basic app with using react native maps. I have a login screen and after login screen i have a different drawers for different entries. In one of them i call ManageBinScreen and inside ManageBinScreen calling MapScreen component that i created also. I created a mapScreen as class component and i call MarkerDetail inside this component and i also call markerEdit component inside MarkerDetail. But i am facing with this error: Component Exception undifines is not an object (evaluating 'state.params'). I couldn't find a way for this erros and I know its long but here is my code:

ManageBinScreen:

import React from 'react';
import MapScreen from '../mapScreen'

export default class AManageBinScreen extends React.Component {
  render() {
    return (
      <MapScreen navigation={ this.props.navigation }/>
    );    
  }
}
module.exports = AManageBinScreen;

MapScreen:

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

import MapView from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps



export default class mapScreen extends React.Component {

  constructor(props) {
    super(props);
    this.goToMarkerDetail = this.goToMarkerDetail.bind(this);
  }

  state = { reports: [] };

  componentDidMount() {
    fetch('https://my-json-server.typicode.com/UmutYvz/JSONHOLDER/report')
      .then(res => res.json())
      .then(data => {
        //console.log(data)
        this.setState({ reports: data.reports })
      })
      .catch(console.error)
  }



  goToMarkerDetail(id) {
    //console.log(this.state.reports)
    this.props.navigation.navigate('MarkerDetail', {
      id: id,
      adress: this.state.reports[id].adress,
      street: this.state.reports[id].street,
      district: this.state.reports[id].district,
      city: this.state.reports[id].city,
      country: this.state.reports[id].county,
      info: this.state.reports[id].info,
      lon: this.state.reports[id].lon,
      lat: this.state.reports[id].lat,
    })
  }

  render() {
    return (
      <MapView
        style={{ ...StyleSheet.absoluteFillObject }}
        initialRegion={{
          latitude: 41.249374,
          longitude: 32.682974,
          latitudeDelta: 0.015,
          longitudeDelta: 0.015
        }} >
        {this.state.reports.map((report) =>
          <MapView.Marker
            key={report.id}
            coordinate={{
              latitude: report.lat,
              longitude: report.lon
            }}
            title={report.info}
            description={report.street}

          >
            <MapView.Callout tooltip onPress={() => this.goToMarkerDetail(report.id)} >
              <TouchableHighlight style={styles.container}>
                <View>
                  <Text style={styles.upperText}>{report.info}</Text>
                  <Text style={styles.lowerText}>{report.city}, {report.district}, {report.street}, {report.adress}</Text>
                </View>
              </TouchableHighlight>
            </MapView.Callout>

          </MapView.Marker>
        )}
      </MapView>
    );
  }
}
module.exports = mapScreen;

MarkerDetail

import React from 'react';
import { StyleSheet, View, Text, TouchableHighlight, SafeAreaView, ScrollView } from 'react-native';
import MapView from 'react-native-maps';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons'


const mapDetailComponent = (props) => {

  

  const { state } = props.navigation;
  const info = {
    markerData: {
      id: state.params.id,
      adress: state.params.adress,
      street: state.params.street,
      district: state.params.district,
      city: state.params.city,
      country: state.params.country,
      info: state.params.info,
      latitude: state.params.lat,
      longitude: state.params.lon,
    },
    mapData: {
      latitude: state.params.lat,
      longitude: state.params.lon,
      latitudeDelta: 0.015,
      longitudeDelta: 0.0121,
    },
  };

  return (
    <View style={styles.container}>
      <View style={styles.mapContainer}>
        <View style={styles.mapView}>
          <MapView
            style={styles.map}
            initialRegion={{
              latitude: info.mapData.latitude,
              longitude: info.mapData.longitude,
              latitudeDelta: 0.0015,
              longitudeDelta: 0.0015
            }}
          >
            <MapView.Marker
              key={state.params.id}
              coordinate={{
                latitude: info.markerData.latitude,
                longitude: info.markerData.longitude
              }}
              title={info.markerData.location}
              description={info.markerData.comments}
              onDragEnd={(e) => {
                info.markerData.latitude = e.nativeEvent.coordinate.latitude;
                info.markerData.longitude = e.nativeEvent.coordinate.longitude;
                console.log("New" + info.markerData.latitude + "...." + info.markerData.longitude)
              }
              }
            >
            </MapView.Marker>
          </MapView>
        </View>
      </View>

      <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 }}>
        <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
        <View>
          <Text style={{ color: '#003f5c', width: 100, textAlign: 'center', fontWeight: 'bold', letterSpacing: 1, fontSize: 18 }}>DETAYLAR</Text>
        </View>
        <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
      </View>

      <SafeAreaView style={styles.infoContainer}>
        <ScrollView>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Konteyner ID: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.id}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Şehir: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.city}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>İlçe: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.district}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Mahalle: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.street}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Adres: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.adress}</Text>
            </View>
          </View>

          <View style={styles.infoItem}>
            <View style={styles.infoLeft}>
              <Text style={styles.infoText}>Bilgiler: </Text>
            </View>
            <View style={styles.infoRiht}>
              <Text style={styles.infoParam}>{info.markerData.info}</Text>
            </View>
          </View>
        </ScrollView>
      </SafeAreaView>

      
      <View style={styles.buttons}>
        <TouchableHighlight style={styles.leftB} onPress={()=>props.navigation.navigate('MarkerEdit', {
            id: info.markerData.id,
            adress: info.markerData.adress,
            street: info.markerData.street,
            district: info.markerData.district,
            city: info.markerData.city,
            country: info.markerData.country,
            info: info.markerData.info,
            latitude: info.markerData.latitude,
            longitude: info.markerData.longitude,
          })}>
          <View style={styles.ltouchable}>
            <FontAwesomeIcon icon={faEdit} color='white' size={30} />
          </View>
        </TouchableHighlight>

        <TouchableHighlight style={styles.rightB} onPress={() => { console.log('right button') }}>
          <View style={styles.rtouchable}>
            <FontAwesomeIcon icon={faTrashAlt} color='white' size={30} />
          </View>
        </TouchableHighlight>
      </View>
    </View>
  );
}

And last EditMarker:

import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, SafeAreaView, ScrollView } from 'react-native';
import MapView from 'react-native-maps';

const MarkerEdit = (props) => {

    const { state } = props.navigation;
    console.log(state.params)

    const info = {
        markerData: {
            id: state.params.id,
            adress: state.params.adress,
            street: state.params.street,
            district: state.params.district,
            city: state.params.city,
            country: state.params.country,
            info: state.params.info,
            latitude: state.params.latitude,
            longitude: state.params.longitude,
        },
        mapData: {
            latitude: state.params.latitude,
            longitude: state.params.longitude,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
        },
    };
    return (
        <ScrollView style={styles.container}>
            <View style={styles.formRow}>
                <View style={styles.formColumn}>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.id.toString()}
                            placeholderTextColor="#003f5c"
                            editable={false}
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.city}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.street}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                </View>
                <View style={styles.formColumn}>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.info}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.district}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                    <View style={styles.inputView} >
                        <TextInput
                            style={styles.inputText}
                            placeholder={info.markerData.adress}
                            placeholderTextColor="#003f5c"
                        />
                    </View>
                </View>
            </View>
            <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 7 }}>
                <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
                <View>
                    <Text style={{ color: '#003f5c', width: 150, textAlign: 'center', fontWeight: 'bold', letterSpacing: 1, fontSize: 18 }}>SÜRÜKLE VE KONUM SEÇ</Text>
                </View>
                <View style={{ flex: 0.5, height: 1, backgroundColor: '#003f5c' }} />
            </View>
            <View style={styles.mapContainer}>
                <View style={styles.mapView}>
                    <MapView
                        style={styles.map}
                        initialRegion={{
                            latitude: info.mapData.latitude,
                            longitude: info.mapData.longitude,
                            latitudeDelta: 0.0015,
                            longitudeDelta: 0.0015
                        }}
                    >
                        <MapView.Marker
                            key={state.params.id}
                            draggable
                            coordinate={{
                                latitude: info.markerData.latitude,
                                longitude: info.markerData.longitude
                            }}
                            title={info.markerData.location}
                            description={info.markerData.comments}
                            onDragEnd={(e) => {
                                info.markerData.latitude = e.nativeEvent.coordinate.latitude;
                                info.markerData.longitude = e.nativeEvent.coordinate.longitude;
                                console.log("New" + info.markerData.latitude + "...." + info.markerData.longitude)
                            }
                            }
                        >
                        </MapView.Marker>
                    </MapView>
                </View>
            </View>
        </ScrollView>

    );
}

Answer 1

If you are using the latest react-navigation as your navigation library then the way of getting params from the navigation is changed in that, you can get the navigation params by using const {latitude} = props.route.params;

Answer 2

It looks like you are using react-navigation. When you pass params when you navigate, the next screen doesn't get them as a state variable in navigation .

The params are on a separate prop route that is passed into the screen that you navigate to.

Docs

ie the params should look like:

// MarkerDetail
const { id, address, street... } = props.route.params;