I am kinda new to react-native, and 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 get an error:
Component exception undefined is not an object (evaluating 'state.params')
I couldn't find a way for this error and I know it's 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>
);
}
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.
i.e. the params should look like:
// MarkerDetail
const { id, address, street... } = props.route.params;