I'm working on a React-Native project using expo and I'm facing an issue.
Here is my code.
This is the navSlicer navSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
origin: null,
destination: null,
travelTimeInformation: null,
}
export const navSlice = createSlice ({
name: 'nav',
initialState,
reducers: {
setOrigin: (state, action) => {
state.origin = action.payload;
},
setDestination: (state, action) => {
state.destination = action.payload;
},
setTravelTimeInformation: (state, action) => {
state.travelTimeInformation= action.payload;
},
},
});
export const { setOrigin, setDestination, setTravelTimeInformation} = navSlice.actions;
//Selectors
export const selectOrigin = (state) => state.nav.origin;
export const selectDestination = (state) => state.nav.destination;
export const selectTravelTimeInformation = (state) => state.nav.travelTimeInformation;
export default navSlice.reducer;
HomeScreen.js
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView, Alert, DeviceEventEmitter } from 'react-native'
import React, { useEffect, useRef, useState } from 'react'
import Map from "../../components/Map"
import CustomInput from './CustomInput'
import CustomButton from './CustomButton'
const HomeScreen = () => {
const [showStart, setShowStart] = useState(false);
const showOrigin = () => {
if(showStart) {
return (
<View>
<CustomInput text="Pornire:" placeholder="Initial location"></CustomInput>
</View>
)
}
}
return (
<View style={styles.container}>
{/* <View style={styles.navbar}>
<Ionicons name='md-arrow-back-outline' onPress={handleBackButton} style={styles.arrow} size={32} ></Ionicons>
<Ionicons name='notifications-outline' style={styles.icons} size={32} ></Ionicons>
<Ionicons name='settings-outline' size={32} ></Ionicons>
</View> */}
<View style={{padding: 15, flex: 0}}>
{showOrigin()}
<CustomInput text="Destinatie" placeholder="Destination"></CustomInput>
<CustomButton text="Cauta" onPress={() => setShowStart(true)}></CustomButton>
</View>
<Map styles={styles.map} />
</View>
)
}
This is my Custom Input file for Homescreen that also contains my GooglePlacesAutocomplete component which comunicates with reducer CustomInput.js
import { StyleSheet, Text, View, TextInput } from 'react-native'
import React, { useState } from 'react'
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { GOOGLE_API_KEY } from '@env'
import { useDispatch } from 'react-redux';
import { setDestination, setOrigin } from '../../components/navSlice';
const CustomInput = ({text, placeholder}) => {
const dispatch = useDispatch();
return (
<View>
<Text style={styles.text}>{text}</Text>
<GooglePlacesAutocomplete
styles={{textInput: styles.inputGoogle, container: {flex: 0}}}
placeholder={placeholder}
fetchDetails={true}
enablePoweredByContainer={false}
minLength={2}
onPress={(data, details = null) => {
console.log(data)
console.log(details)
dispatch(setOrigin({
location: details.geometry.location,
description: data.description,
}));
dispatch(setDestination(null));
}}
query={{
key: GOOGLE_API_KEY,
language: 'en',
}}
nearbyPlacesAPI="GooglePlacesSearch"
debounce={400}
/>
</View>
)
}
export default CustomInput
The problem looks like it is coming from Map.js where is my MapView created
import { Dimensions, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps'
import { useSelector } from 'react-redux'
import { selectOrigin } from './navSlice'
const Map = () => {
const origin = useSelector(selectOrigin);
return (
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: origin.location.lat,
longitude: origin.location.lng,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
}}
/>
)
}
The error is the following:
ERROR TypeError: null is not an object (evaluating 'origin.location')
This error is located at:
in Map (created by HomeScreen)
in RCTView (created by View)
in View (created by HomeScreen)
in HomeScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)