While converting one of my apps over to a new version of react-native-maps , I stumbled upon an issue involving markers. This experience led me down a path of refactoring and optimizing the code, which I thought might be helpful to share for anyone else dealing with similar challenges.
The problem occurred when I tried to work with markers on the map. After some investigation, I noticed that there were a few lines in various components that were not functions. Specifically, there was a getNativeComponent property defined in multiple files. To address this, I opened up a patch and started playing around with different ways to resolve the issue. Eventually, I decided to delete the unnecessary lines altogether.
Here is the diff that shows the cleanup I did:
diff --git a/lib/MapCallout.js b/lib/MapCallout.js
index 568ddfe285cd2c93d40ed908bbda432af99d85ad..73d920ee3bdc9fe28a76ac6da40eeb48a3a3c191 100644
--- a/lib/MapCallout.js
+++ b/lib/MapCallout.js
@@ -28,7 +28,6 @@ const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapCallout extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
render() {
diff --git a/lib/MapCalloutSubview.js b/lib/MapCalloutSubview.js
index 40cc7f332112d81fdf18e5892b3e687337bb7b26..09c8b04402ff873e1e579a7d7669b5b4b4244b61 100644
--- a/lib/MapCalloutSubview.js
+++ b/lib/MapCalloutSubview.js
@@ -28,7 +28,6 @@ const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapCalloutSubview extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
render() {
diff --git a/lib/MapCircle.js b/lib/MapCircle.js
index 0bd1636a8c98041d4837771c6541e1a3290bc548..1d56ca2e9b854f41ad2b1beb2d27b440f4910f8f 100644
--- a/lib/MapCircle.js
+++ b/lib/MapCircle.js
@@ -27,7 +27,6 @@ exports.MapCircle = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapCircle extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
circle;
diff --git a/lib/MapHeatmap.js b/lib/MapHeatmap.js
index d23a5a616a99e33116f43f5ab5a03fe38ad09f7a..2d12db0299e3ac7ba2884c0749fee76c94cfd767 100644
--- a/lib/MapHeatmap.js
+++ b/lib/MapHeatmap.js
@@ -28,7 +28,6 @@ const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapHeatmap extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
heatmap;
diff --git a/lib/MapLocalTile.js b/lib/MapLocalTile.js
index 68efbcdb9f0b94c7c2a0aeab9f911f9932da4830..7d394acf18228ce2f5010106e68f6245b9e05372 100644
--- a/lib/MapLocalTile.js
+++ b/lib/MapLocalTile.js
@@ -27,7 +27,6 @@ exports.MapLocalTile = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapLocalTile extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
render() {
diff --git a/lib/MapMarker.js b/lib/MapMarker.js
index 90b689efd421045040228b89d6bf2507b714c5f8..0df64b6931abe7695f8cbf4a8af5608f373e03d9 100644
--- a/lib/MapMarker.js
+++ b/lib/MapMarker.js
@@ -29,7 +29,6 @@ const react_native_1 = require("react-native");
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
const MapMarkerNativeComponent_1 = require("./MapMarkerNativeComponent");
class MapMarker extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
static Animated;
diff --git a/lib/MapOverlay.js b/lib/MapOverlay.js
index a3d7f509ddedb0339f2da13df7daa6f6cd4d03f2..ab2e83398404a276e70898c856690aeb0df9b3d7 100644
--- a/lib/MapOverlay.js
+++ b/lib/MapOverlay.js
@@ -28,7 +28,6 @@ const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapOverlay extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
static Animated;
diff --git a/lib/MapPolygon.js b/lib/MapPolygon.js
index 86b8fee4e514eac999b8606559f2a1ededccc76a..ad91c1bb9cd17fa9f654b4e754f5f35a143d9fbe 100644
--- a/lib/MapPolygon.js
+++ b/lib/MapPolygon.js
@@ -27,7 +27,6 @@ exports.MapPolygon = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapPolygon extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
polygon;
diff --git a/lib/MapPolyline.js b/lib/MapPolyline.js
index b0efda760a08058b02fd59799bbd2a54e161a553..b1a773108db210043294a8206c1c4d881cacbe52 100644
--- a/lib/MapPolyline.js
+++ b/lib/MapPolyline.js
@@ -27,7 +27,6 @@ exports.MapPolyline = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapPolyline extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
polyline;
diff --git a/lib/MapUrlTile.js b/lib/MapUrlTile.js
index 1a079e27dae32a0516ee53a269045f08428e95ce..612ed7f183810e646899213701e0f84d15480055 100644
--- a/lib/MapUrlTile.js
+++ b/lib/MapUrlTile.js
@@ -27,7 +27,6 @@ exports.MapUrlTile = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapUrlTile extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
render() {
diff --git a/lib/MapWMSTile.js b/lib/MapWMSTile.js
index 4619972c6ee4477c4e21479e91cb67ae242f04f7..3a160ecadee8ed2998ef1766b8e2fc520bd1aca7 100644
--- a/lib/MapWMSTile.js
+++ b/lib/MapWMSTile.js
@@ -27,7 +27,6 @@ exports.MapWMSTile = void 0;
const React = __importStar(require("react"));
const decorateMapComponent_1 = __importStar(require("./decorateMapComponent"));
class MapWMSTile extends React.Component {
- getNativeComponent;
getMapManagerCommand;
getUIManagerCommand;
render() {
Hope it helps someone!