Develop Reference

TypeError: null is not an object (evaluating 'order.originLatitude')

I kept getting a typeerror, for my code I do not know what to fix This error is located at: in HomeScreen (at App.js:11) in RCTView (at View.js:32) in View (at SafeAreaView.js:41) in SafeAreaView (at App.js:10) in App (at renderApplication.js:50) in RCTView (at View.js:32) in View (at AppContainer.js:92) in RCTView (at View.js:32) in View (at AppContainer.js:119) in AppContainer (at renderApplication.js:43) in ClarkLoop2(RootComponent) (at renderApplication.js:60)
const origin = {latitude: 37.3318456, longitude: -122.0296002};
const destination = {latitude: 37.771707, longitude: -122.4053769};
const GOOGLE_MAPS_APIKEY = 'API_KEY';
const HomeScreen = (props) => {
const [isOnline, setIsOnline] = useState(false);
const [order, setOrder] = useState(null)
const [newOrders, setNewOrders] = useState({
id: '1',
type: 'Loop 1',
originLatitude: 15.166958649105302,
originLongitude: 120.58020821518215,
destLatitude: 15.166958649105302,
destLongitude: 120.58020821518215,
user: {
rating: 5.0,
name: 'Mark',
}
});
const onDecline = () => {
setNewOrders(null);
}
const onAccept = (newOrders) => {
setOrder(newOrders);
setNewOrders(null);
}
const onGoPress = async () => {
setIsOnline(!isOnline);
}
const renderBottomTitle = () => {
if(order) {
return(
<View style={{ alignItems: 'center' }}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
<Text>1 min</Text>
<View style={{ backgroundColor: '#1e9203', marginHorizontal: 10, width: 30, height: 30, alignItems:'center', justifyContent: 'center', borderRadius: 20}}>
<FontAwesome name={"user"} color={"white"} size={20} />
</View>
<Text>0.5 km</Text>
</View>
<Text style={styles.bottomText}>Picking up {order.user.name}</Text>
</View>
)
}
if (isOnline) {
return (
<Text style={styles.bottomText}>You're Online</Text>
)
}
return <Text style={styles.bottomText}>You're Offline</Text>
}
return (
<View>
<MapView
style={{width: '100%', height: Dimensions.get('window').height - 90}}
showsUserLocation={true}
initialRegion={{
latitude: 15.166958649105302,
longitude: 120.58020821518215,
latitudeDelta: 0.015,
longitudeDelta: 0.015,
}}
>
<MapViewDirections
origin={origin}
destination={{
latitude: order.originLatitude,
longitude: order.originLongitude
}}
apikey={GOOGLE_MAPS_APIKEY}
/>
</MapView>
<Pressable
onPress={() => console.warn('Hey')}
style={[styles.roundButton, {top: 10, left: 10}]}>
<Entypo name={"menu"} size={24} color="#4a4a4a"/>
</Pressable>
<Pressable
onPress={() => console.warn('Hey')}
style={[styles.roundButton, {top: 10, right: 10}]}>
<Entypo name={"magnifying-glass"} size={24} color="#4a4a4a"/>
</Pressable>
<Pressable
onPress={() => console.warn('Hey')}
style={[styles.roundButton, {bottom: 125, left: 10}]}>
<Entypo name={"shield"} size={24} color="#4a4a4a"/>
</Pressable>
<Pressable
onPress={() => console.warn('Hey')}
style={[styles.roundButton, {bottom: 125, right: 10}]}>
<Entypo name={"info"} size={24} color="#4a4a4a"/>
</Pressable>
<Pressable
onPress={onGoPress}
style={styles.goButton}>
<Text style={styles.goText}>
{
isOnline ? 'End' : 'Go'
}
</Text>
</Pressable>
<View style={styles.bottomContainer}>
<Ionicons name={"options"} size={24} color="#4a4a4a"/>
{renderBottomTitle()}
<Entypo name={"list"} size={24} color="#4a4a4a"/>
</View>
{newOrders &&<NewOrderPopup
newOrders={newOrders}
duration={2}
distance={0.5}
onDecline={onDecline}
onAccept={() => onAccept(newOrders)}
/>}
</View>
);
};
export default HomeScreen;

It looks like your order * object is initially being set to null, so when you first try and reference order.originLatitude in the props of the <MapViewDirections> component it throws an error.
const [order, setOrder] = useState(null)
You need to add a check to make sure that order is not null, or given a default value, before using it in props of this component:
<MapViewDirections
origin={origin}
destination={{
latitude: order.originLatitude,
longitude: order.originLongitude
}}
apikey={GOOGLE_MAPS_APIKEY}
/>

How to change Google Mapview Polyline Stroke Style Dashed Style Line Using React Native?

In My Scenario, I have Implemented in my application Google MapView using "react-native-maps" npm package. In this package as per my requirement I have to draw a dashed circle polyline, like below mentioned image Green line should be dashed stroke style. How to change it like dashed or dotted stroke style line.
enter image description here
<Polyline
coordinates={[
{ latitude: 37.88045, longitude: -122.4324 },
{ latitude: 37.78825, longitude: -122.3903 },
]}
strokeWidth={3}
lineDashPattern={[170, 170]}
/>

You should be using <Circle/> instead of `. Here's a sample code and code snippet below. (Note: lineDashPattern is only available in iOS per doc).
import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Circle, Polyline } from 'react-native-maps';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
class MapApp extends Component {
render() {
return (
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
/>
<Circle
center={{ latitude: 37.78825, longitude: -122.4324 }}
radius={1000}
strokeWidth={3}
strokeColor="green"
lineDashPattern={[10]} />
</MapView>
</View>
);
}
}
export default MapApp;

Fixing an element size and adding ScrollView on that

I want to add some more information on the bottom of the page and fix this bottom card portion on this page.But on scrolling i want to view the other informations i want to add at the bottom which will only be shown after scrolling.How can i do that?
I am having this code for now:
render(){
return(
<View style={styles.container}>
<MapView style={styles.mapcontainer}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} />
<JobInfo/>
</View>
)
}
}
const styles = StyleSheet.create ({
container: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
justifyContent: 'flex-end',
alignItems: 'center'
},
mapcontainer: {
flex: 1,
width: width,
height: height
}
})
class JobInfo extends Component {
render() {
return (
<View style={{width: '100%'}}>
<Card>
<CardItem >
<Text>General Info:</Text>
</CardItem>
<CardItem >
<Body>
<Text>
Click on any carditem
</Text>
</Body>
</CardItem>
<CardItem >
<Text>Packaging Info:</Text>
</CardItem>
<CardItem >
<Body>
<Text>
Click on any carditem
</Text>
</Body>
</CardItem>
<CardItem >
<Text>Manpower Info:</Text>
</CardItem>
<CardItem >
<Body>
<Text>
Click on any carditem
</Text>
</Body>
</CardItem>
</Card>
</View>
)
}
}
ScrollView is somehow not working.Any help would be appreciated.Thanks.

try below method
add JobInfo into a Scrollview . and remove height prop from mapContainer
<ScrollView style={[{flex:1} ,{ width: '100%'}, {justifyContent: 'flex-start'}]}>
<JobInfo/>
</ScrollView>
And mapContainer is
mapcontainer: {
flex: 3,
width: '100%',
}
Use flex values to adjust height of the map
Edit 1
If you want scroll all container (both Map & JobInfo ) you need to set specific height for Map. Wrap all elements to a single ScrollView like below
<ScrollView style={[{flex:1} , {justifyContent: 'flex-start'}]}>
<View style={styles.container}>
<MapView style={styles.mapcontainer}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} />
<JobInfo/>
</View>
</ScrollView>
And styles are follows
const styles = StyleSheet.create ({
container: {
flex: 1,
},
mapcontainer: {
width: '100%',
height:600,
}
})

React Native Maps and callout with images

I am not able to display images (both from the assets and web) in custom marker callout : the image in callout is always shown as a blank rectangle.
class CustomCalloutView extends React.Component {
render() {
return (
<View>
<View>
<Text style={{
fontWeight: "bold",
}}>
Test
</Text>
</View>
<View>
<Image
source={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
style={{ width: 100, height: 100 }}
/>
</View>
</View>
)
}
}
And the main Map component is:
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
{this.state.markers.map(marker => (
<Marker
key={marker.id}
coordinate={marker.latlng}>
<Callout>
<CustomCalloutView />
</Callout>
</Marker>
))}
</MapView>);
The marker is correctly shown, and the callout renders, but the image is not shown. The same image works if i use it in a normal view.
I am using expo (expo.io) but also tried emulator and installed APK on the device (android; no info about ios).

Use Image inside Text component.
Something like this:
<Text>
<Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" />
</Text>
Another workaround by using WebView.
I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>

Positioning the <Image/> was a bit challenge in the custom Callout for Android. It's a bit mystery for Android, IMHO. Especially, with the trick to display it by wrapping around Text. Looks like, it affects the styling, too. I've had to figure out monotonously the https://reactnative.dev/docs/image#resizemode with this "fix" along with some custom styling what works, pff.
I've ended up with 2 different styles, one for Android, one for iOS.
{Platform.OS === "android" ? <Text style={styles.imageWrapperAndroid}>
<Image
resizeMode="cover"
source={
event.imageUrl
? { uri: event.imageUrl }
: require("../assets/images/no-image.jpeg")
}
style={styles.imageAndroid}
/>
</Text> : <Image
source={
event.imageUrl
? { uri: event.imageUrl }
: require("../assets/images/no-image.jpeg")
}
style={styles.imageIOS}
/>}
...
const styles = StyleSheet.create({
imageAndroid: {
height: 200,
width: 330,
},
imageIOS: {
height: "50%",
width: "100%",
},
imageWrapperAndroid: {
height: 200,
flex: 1,
marginTop: -85,
width: 330,
},
...
});

react native maps does not display the map correctly

I have installed react-native-maps in my app but when i enter a MapView this is the output :
I followed the installation guide on github and entered the api key, but still does not display anything.
this is the code:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import MapView from 'react-native-maps';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 41.89193,
longitude: 12.51133,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
Does anyone know how I can solve this problem or what does it depend on?
thank's

You need to add provider to MapView:
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
....
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: 41.89193,
longitude: 12.51133,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>