When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to

Trying to pass coordinates from BackgroundGeolocation.getLocations() is causing an issue. Upon passing the coordinates, I encounter the following error message: JSON value '-122.02235491' of type NSNumber cannot be converted to NSDictionary

I have attempted to consult the Polyline documentation but am struggling to identify what changes are needed in my coordArray for it to be accepted by Polyline.

The structure of the location variable is outlined here: https://transistorsoft.github.io/cordova-background-geolocation-lt/interfaces/cordova_background_geolocation_lt.location.html

Thank you in advance!

if(this.state.locations && this.state.locations.length > 0){
      this.state.locations.map((location,index) => {
        console.log(this.state.locations)
        let coordArray = [latitude = parseFloat(location.coords.latitude), longitude= parseFloat(location.coords.longitude)]
        polyline.push(<Polyline key={index} initialRegion={initialRegion} coordinates={coordArray} geodesic />)
      })
    }

Answer №1

When passing an array of numbers to the coordinates parameter, you may encounter issues as shown in this example:

<Polyline ... coordinates={[-122.0, 88]}>
According to the Polyline documentation, you should be passing an array of dictionaries for your coordinates, like this:
<Polyline ... coordinates={[{latitude:-122.0, longitude:88}]}>
The error is caused by the fact that it takes the first element of the array (a number) and tries to convert it to a dictionary. For more information, visit https://github.com/react-native-maps/react-native-maps/blob/master/docs/polyline.md.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a Row to an HTML Table Inside a Form through JavaScript

I'm currently attempting to insert a row into a table that resides within a form using JavaScript. The strange thing is, the code functions perfectly when it's placed outside of the form tags. However, as soon as I enclose the code within the for ...

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

When utilizing exit-hook with process.on('SIGTERM'), child_process spawn requires two control-c commands to exit properly

I have the following program running: const { spawn } = require("child_process"); const exitHook = require("exit-hook"); exitHook(() => { console.log("Leaving"); }); spawn("my-program", ["my-args"], { stdio: "inherit" }); // Long running server ...

Ways to conceal the contents of an HTML element

I recently applied a background image to my "a" tag, but now I'm looking to hide only the HTML content within the tag. It's important that the background image and href address remain visible. Any suggestions on how to achieve this? Thank you in ...

Unable to successfully link filter outcomes with input in AngularJS

Here is the code snippet I am working with: <body ng-app=""> <div ng-init="friends = [{name:'John', phone:'555-1276'}, {name:'Mary', phone:'800-BIG-MARY'}, {nam ...

Navigating through cards in HTML: A guide to filtering techniques

I'm currently in the process of developing a platform that enables users to browse through different profiles based on their first names. I've attempted to utilize bootstrap's "data-title" for searching purposes, but unfortunately, it's ...

Managing different authentication methods for a single user on Firebase: Tips and Strategies

Currently, I am in the process of developing an authentication system utilizing Firebase. My aim is to incorporate email/password, Google, and Facebook as sign-up and sign-in methods. Initially, everything runs smoothly when a user signs up using each met ...

Utilizing SEO and incorporating special characters like !# in a website's URL

I came across an interesting concept about designing a website that utilizes AJAX to load each page section without compromising SEO. It involved incorporating !# in the URL, similar to the approach adopted by Twitter. However, I've been unable to loc ...

Connecting a specific entry in a data table with a corresponding web address

I have been working on a vue component that utilizes vue-tables-2. You can find the functioning example here. My goal is to link the edit href url to the entire row rather than just the edit cell. I attempted to achieve this using vanilla javascript by a ...

Deciphering the hidden power of anonymous functions within Express.js

Recently, I started learning about express and am grappling with understanding callbacks in RESTful actions. In the following PUT request code snippet, I am puzzled by the specific line that is highlighted below. Why is response.pageInfo.book being assigne ...

The custom $compile directive is selectively applied within the same scope

Thank you for taking a look. Let's get right into it: A JSON object contains HTML links with ng-click attributes, using ng-bind-html, and securing the HTML with $sce's trustAsHtml. Additionally, I've implemented a custom angular-compile dir ...

Converting a string containing multiple objects into an array with unique keys

I have a string with multiple objects and I need to add these objects into an array with different values. The data is received from the cart, so the number of objects can vary. For example: {"hidden_product_name":"productA","productId":"120","product_sk ...

Creating a web form with the ability to select multiple images using Javascript

Currently, I am in the process of developing an HTML form that enables users to select an image, a URL, and text that will be inserted as a <li> into a webpage. However, I am facing an issue where I want users to create multiple <li> per input. ...

What is the reason behind fullstack-angular generator utilizing Lo-Dash's merge rather than document.set?

This is the original code snippet used for updating: exports.update = function(req, res) { if(req.body._id) { delete req.body._id; } Thing.findById(req.params.id, function (err, thing) { if (err) { return handleError(res, err); } if(!thing) { ...

Tips for creating a console.log wrapper specifically designed for Angular2 using Typescript

Is there a way to create a custom global logging function in Angular 2 TypeScript project that can be used instead of console.log for services and components? I envision the function looking like this: mylogger.ts function mylogger(msg){ console.log ...

Exploring the interactive doughnut graph using SVG and Vue.js

Looking to create a unique dynamic donut chart using SVG and Vue. I want it to mirror the exact SVG format found on this webpage: (To see the animated chart, select a dish and click on ingredients) This might not have been the best approach, but it was ...

Using the window.prompt function to send information to specific fields in a MySQL database is not functioning correctly. I am looking for assistance with this issue

Currently, I am attempting to send some data to a server that is MySQL-based. After running the code below, it seems like there are no errors showing up in the console. Can you please review this code and let me know if you spot any issues? I would really ...

Leveraging the 'window' object as a dependency in the useEffect hook within NextJS

I'm encountering an issue where I need a function to run when the type of window.performance.getEntriesByType("navigation")[0].type changes. I attempted to use useEffect for this purpose, but it resulted in a 'window is not defined&apos ...

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

Tips for Sending Information to the Current Page Using JQuery

I am attempting to send the form data back to the same location as the form itself. The code needs to: Trigger the click action for #submit Retrieve data from #email, #selection1, and #selection2 Hide the form #form Show the data in #email, #selection1, ...