1

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)
lipian
  • 11
  • 4

0 Answers0