Is there a way to make Maps and Current Location load faster in React Native?

Question

I have 4 Map Screens in a Stack Manager that lets my users see their current location as they complete tasks. After they complete a task, it sends them to the next maps screen, until that task is complete. There is sometimes a significant amount of lag (10 seconds) from one maps screen to another. While the app is reloading their current location, I have implemented an ActivityIndicator that will run until the function mounts. The function then unmounts when they navigate away and triggers a mounting for the next page where it loads their current location, and repeat. Is there a way to speed up this process and make the maps load faster?

Edit: Up to this point, I have turned off trackViewChanges. I am currently using an icon, and not an image for my custom marker. I tried running in development mode to see if it would run faster (based on some reports that it would) but it did not effect its render ability.

Edit 2: Here is some of the code I use to generate the user's current location.

function Screen({navigation}) { 
    const [user_latitude, setUserLatitude] = useState(0)
    const [user_longitude, setUserLongitude] = useState(0)
    const [position_error, setPositionError] = useState(null)
    const [ isLoading, setIsLoading ] = useState(true)
    const [ location, setLocation ] = useState(null);

  const renderLoading = () =>  {
        if (isLoading) {
            return (
            <View style = {{flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#d3d3d3', height: height*0.75, width: width}}>
            <ActivityIndicator
            color = 'black'
            size = 'large'
            animated = {false}
          />
          <Text style = { styles.text }>{i18n.t('')}</Text>
          </View>
            );
        }else {
            return null;
        }
    }

useFocusEffect( 
      React.useCallback(()=> {

      let isActive = true;

      const fetchGeoPosition = () => {
        navigator.geolocation.getCurrentPosition(
        position => { 
          if (isActive){
          setUserLatitude(position.coords.latitude);
          setUserLongitude(position.coords.longitude);
          setPositionError(null);
          console.log('Location Accessed')
        } 
        setIsLoading(false)

      }, 

      error => isActive && setPositionError(error.message),
      {enableHighAccuracy: true, timeout: 0, maximumAge: 1000} 
      ); 
    }
    const permission_get = async () => {
      if (Platform.OS === 'android' && !Constants.isDevice) {
        setErrorMsg(
          'Oops, this will not work on Snack in an Android emulator. Try it on your device!'
        );
        return;
      }
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        console.log('Not permitted')
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      console.log('Permitted')
    }

    permission_get()
    fetchGeoPosition()

      return () =>{
        isActive = false
        console.log('Location Severed')
    }


        }, 
      [],
       ),
    )



  if (!exercise.trim()){
    return;
  }
  Alert.alert(
    (i18n.t('')),
    (i18n.t('')),
    [
    {
      text: (i18n.t('')),
      onPress: () => navigation.navigate('Screen2')
    },

    {
      text: (i18n.t('')),
     
    }]
    )
}


  return(
      <View style = {styles.container}>

      <View style = {styles.header}>
       <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        region= {{
        latitude: user_latitude,
        longitude: user_longitude,
        latitudeDelta: 0.0451,
        longitudeDelta: 0.0451
      }}>
      
        <Marker 
        coordinate={ 

          {latitude: user_latitude,
           longitude: user_longitude,
           error: position_error,
         }}
         
        >
        </Marker>
      </MapView>

      <View style = { styles.blank }>
      
      <View style = {{flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' }}>
      {(renderLoading())}
      </View>

    </View>
    </View> 
      </View> 
  )
}

export {Screen};

const {height}= Dimensions.get("screen");
const { width } = Dimensions.get("screen")


const styles = StyleSheet.create({
 container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: '#fff',
    },


  
});