diff --git a/.gitignore b/.gitignore
index 41f9bec..8422dbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,7 +4,6 @@
 # node.js
 node_modules/
 npm-debug.log
-dist/
 
 # NPM file created by GitHub actions
 .npmrc
diff --git a/dist/MapView/CONST.d.ts b/dist/MapView/CONST.d.ts
new file mode 100644
index 0000000..09dbc73
--- /dev/null
+++ b/dist/MapView/CONST.d.ts
@@ -0,0 +1,4 @@
+import { MapViewProps } from './MapViewTypes';
+export declare const PADDING = 50;
+export declare const DEFAULT_INITIAL_STATE: MapViewProps['initialState'];
+//# sourceMappingURL=CONST.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/CONST.d.ts.map b/dist/MapView/CONST.d.ts.map
new file mode 100644
index 0000000..1197dbc
--- /dev/null
+++ b/dist/MapView/CONST.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"CONST.d.ts","sourceRoot":"","sources":["../../src/MapView/CONST.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAK5C,eAAO,MAAM,OAAO,KAAK,CAAC;AAC1B,eAAO,MAAM,qBAAqB,EAAE,YAAY,CAAC,cAAc,CAG9D,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/CONST.js b/dist/MapView/CONST.js
new file mode 100644
index 0000000..2f9bacc
--- /dev/null
+++ b/dist/MapView/CONST.js
@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PADDING = exports.DEFAULT_INITIAL_STATE = void 0;
+var DEFAULT_ZOOM = 10;
+var DEFAULT_COORDINATE = [-122.4021, 37.7911];
+var PADDING = 50;
+exports.PADDING = PADDING;
+var DEFAULT_INITIAL_STATE = {
+  location: DEFAULT_COORDINATE,
+  zoom: DEFAULT_ZOOM
+};
+exports.DEFAULT_INITIAL_STATE = DEFAULT_INITIAL_STATE;
+//# sourceMappingURL=CONST.js.map
\ No newline at end of file
diff --git a/dist/MapView/CONST.js.map b/dist/MapView/CONST.js.map
new file mode 100644
index 0000000..471e10a
--- /dev/null
+++ b/dist/MapView/CONST.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"CONST.js","names":["DEFAULT_ZOOM","DEFAULT_COORDINATE","PADDING","exports","DEFAULT_INITIAL_STATE","location","zoom"],"sources":["../../src/MapView/CONST.ts"],"sourcesContent":["import {MapViewProps} from './MapViewTypes';\n\nconst DEFAULT_ZOOM = 10;\nconst DEFAULT_COORDINATE: [number, number] = [-122.4021, 37.7911];\n\nexport const PADDING = 50;\nexport const DEFAULT_INITIAL_STATE: MapViewProps['initialState'] = {\n    location: DEFAULT_COORDINATE,\n    zoom: DEFAULT_ZOOM,\n};\n"],"mappings":";;;;;;AAEA,IAAMA,YAAY,GAAG,EAAE;AACvB,IAAMC,kBAAoC,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC;AAE1D,IAAMC,OAAO,GAAG,EAAE;AAACC,OAAA,CAAAD,OAAA,GAAAA,OAAA;AACnB,IAAME,qBAAmD,GAAG;EAC/DC,QAAQ,EAAEJ,kBAAkB;EAC5BK,IAAI,EAAEN;AACV,CAAC;AAACG,OAAA,CAAAC,qBAAA,GAAAA,qBAAA"}
\ No newline at end of file
diff --git a/dist/MapView/Direction.d.ts b/dist/MapView/Direction.d.ts
new file mode 100644
index 0000000..b60e323
--- /dev/null
+++ b/dist/MapView/Direction.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DirectionProps } from './MapViewTypes';
+declare function Direction({ coordinates, directionStyle }: DirectionProps): import("react").JSX.Element | null;
+export default Direction;
+//# sourceMappingURL=Direction.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/Direction.d.ts.map b/dist/MapView/Direction.d.ts.map
new file mode 100644
index 0000000..6952efa
--- /dev/null
+++ b/dist/MapView/Direction.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Direction.d.ts","sourceRoot":"","sources":["../../src/MapView/Direction.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAE9C,iBAAS,SAAS,CAAC,EAAC,WAAW,EAAE,cAAc,EAAC,EAAE,cAAc,sCA0B/D;AAED,eAAe,SAAS,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/Direction.js b/dist/MapView/Direction.js
new file mode 100644
index 0000000..ab7d737
--- /dev/null
+++ b/dist/MapView/Direction.js
@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _maps = _interopRequireDefault(require("@rnmapbox/maps"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function Direction(_ref) {
+  var _directionStyle$color, _directionStyle$width;
+  var coordinates = _ref.coordinates,
+    directionStyle = _ref.directionStyle;
+  if (coordinates.length < 1) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_maps["default"].ShapeSource, {
+    id: "routeSource",
+    shape: {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'LineString',
+        coordinates: coordinates
+      }
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maps["default"].LineLayer, {
+      id: "routeFill",
+      style: {
+        lineColor: (_directionStyle$color = directionStyle === null || directionStyle === void 0 ? void 0 : directionStyle.color) !== null && _directionStyle$color !== void 0 ? _directionStyle$color : '#000000',
+        lineWidth: (_directionStyle$width = directionStyle === null || directionStyle === void 0 ? void 0 : directionStyle.width) !== null && _directionStyle$width !== void 0 ? _directionStyle$width : 1
+      }
+    })
+  });
+}
+var _default = Direction;
+exports["default"] = _default;
+//# sourceMappingURL=Direction.js.map
\ No newline at end of file
diff --git a/dist/MapView/Direction.js.map b/dist/MapView/Direction.js.map
new file mode 100644
index 0000000..915a692
--- /dev/null
+++ b/dist/MapView/Direction.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"Direction.js","names":["_maps","_interopRequireDefault","require","_jsxRuntime","obj","__esModule","Direction","_ref","_directionStyle$color","_directionStyle$width","coordinates","directionStyle","length","jsx","ShapeSource","id","shape","type","properties","geometry","children","LineLayer","style","lineColor","color","lineWidth","width","_default","exports"],"sources":["../../src/MapView/Direction.tsx"],"sourcesContent":["import Mapbox from '@rnmapbox/maps';\nimport {DirectionProps} from './MapViewTypes';\n\nfunction Direction({coordinates, directionStyle}: DirectionProps) {\n    if (coordinates.length < 1) {\n        return null;\n    }\n\n    return (\n        <Mapbox.ShapeSource\n            id=\"routeSource\"\n            shape={{\n                type: 'Feature',\n                properties: {},\n                geometry: {\n                    type: 'LineString',\n                    coordinates,\n                },\n            }}\n        >\n            <Mapbox.LineLayer\n                id=\"routeFill\"\n                style={{\n                    lineColor: directionStyle?.color ?? '#000000',\n                    lineWidth: directionStyle?.width ?? 1,\n                }}\n            />\n        </Mapbox.ShapeSource>\n    );\n}\n\nexport default Direction;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAoC,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAGpC,SAASE,SAASA,CAAAC,IAAA,EAAgD;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAAA,IAA9CC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;EAC3C,IAAID,WAAW,CAACE,MAAM,GAAG,CAAC,EAAE;IACxB,OAAO,IAAI;EACf;EAEA,oBACI,IAAAT,WAAA,CAAAU,GAAA,EAACb,KAAA,WAAM,CAACc,WAAW;IACfC,EAAE,EAAC,aAAa;IAChBC,KAAK,EAAE;MACHC,IAAI,EAAE,SAAS;MACfC,UAAU,EAAE,CAAC,CAAC;MACdC,QAAQ,EAAE;QACNF,IAAI,EAAE,YAAY;QAClBP,WAAW,EAAXA;MACJ;IACJ,CAAE;IAAAU,QAAA,eAEF,IAAAjB,WAAA,CAAAU,GAAA,EAACb,KAAA,WAAM,CAACqB,SAAS;MACbN,EAAE,EAAC,WAAW;MACdO,KAAK,EAAE;QACHC,SAAS,GAAAf,qBAAA,GAAEG,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEa,KAAK,cAAAhB,qBAAA,cAAAA,qBAAA,GAAI,SAAS;QAC7CiB,SAAS,GAAAhB,qBAAA,GAAEE,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,KAAK,cAAAjB,qBAAA,cAAAA,qBAAA,GAAI;MACxC;IAAE,CACL;EAAC,CACc,CAAC;AAE7B;AAAC,IAAAkB,QAAA,GAEcrB,SAAS;AAAAsB,OAAA,cAAAD,QAAA"}
\ No newline at end of file
diff --git a/dist/MapView/Direction.web.d.ts b/dist/MapView/Direction.web.d.ts
new file mode 100644
index 0000000..28fded9
--- /dev/null
+++ b/dist/MapView/Direction.web.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DirectionProps } from './MapViewTypes';
+declare function Direction({ coordinates, directionStyle }: DirectionProps): import("react").JSX.Element | null;
+export default Direction;
+//# sourceMappingURL=Direction.web.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/Direction.web.d.ts.map b/dist/MapView/Direction.web.d.ts.map
new file mode 100644
index 0000000..f3f7eb6
--- /dev/null
+++ b/dist/MapView/Direction.web.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"Direction.web.d.ts","sourceRoot":"","sources":["../../src/MapView/Direction.web.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAC;AAE9C,iBAAS,SAAS,CAAC,EAAC,WAAW,EAAE,cAAc,EAAC,EAAE,cAAc,sCA8B/D;AAED,eAAe,SAAS,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/Direction.web.js b/dist/MapView/Direction.web.js
new file mode 100644
index 0000000..15ea085
--- /dev/null
+++ b/dist/MapView/Direction.web.js
@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _reactMapGl = require("react-map-gl");
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function Direction(_ref) {
+  var _directionStyle$color, _directionStyle$width;
+  var coordinates = _ref.coordinates,
+    directionStyle = _ref.directionStyle;
+  if (coordinates.length < 1) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: coordinates && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMapGl.Source, {
+      id: "route",
+      type: "geojson",
+      data: {
+        type: 'Feature',
+        properties: {},
+        geometry: {
+          type: 'LineString',
+          coordinates: coordinates
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMapGl.Layer, {
+        id: "route",
+        type: "line",
+        source: "route",
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round'
+        },
+        paint: {
+          'line-color': (_directionStyle$color = directionStyle === null || directionStyle === void 0 ? void 0 : directionStyle.color) !== null && _directionStyle$color !== void 0 ? _directionStyle$color : '#000000',
+          'line-width': (_directionStyle$width = directionStyle === null || directionStyle === void 0 ? void 0 : directionStyle.width) !== null && _directionStyle$width !== void 0 ? _directionStyle$width : 1
+        }
+      })
+    })
+  });
+}
+var _default = Direction;
+exports["default"] = _default;
+//# sourceMappingURL=Direction.web.js.map
\ No newline at end of file
diff --git a/dist/MapView/Direction.web.js.map b/dist/MapView/Direction.web.js.map
new file mode 100644
index 0000000..65b41f4
--- /dev/null
+++ b/dist/MapView/Direction.web.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"Direction.web.js","names":["_reactMapGl","require","_reactNative","_jsxRuntime","Direction","_ref","_directionStyle$color","_directionStyle$width","coordinates","directionStyle","length","jsx","View","children","Source","id","type","data","properties","geometry","Layer","source","layout","paint","color","width","_default","exports"],"sources":["../../src/MapView/Direction.web.tsx"],"sourcesContent":["import {Layer, Source} from 'react-map-gl';\nimport {View} from 'react-native';\nimport {DirectionProps} from './MapViewTypes';\n\nfunction Direction({coordinates, directionStyle}: DirectionProps) {\n    if (coordinates.length < 1) {\n        return null;\n    }\n    return (\n        <View>\n            {coordinates && (\n                <Source\n                    id=\"route\"\n                    type=\"geojson\"\n                    data={{\n                        type: 'Feature',\n                        properties: {},\n                        geometry: {\n                            type: 'LineString',\n                            coordinates,\n                        },\n                    }}\n                >\n                    <Layer\n                        id=\"route\"\n                        type=\"line\"\n                        source=\"route\"\n                        layout={{'line-join': 'round', 'line-cap': 'round'}}\n                        paint={{'line-color': directionStyle?.color ?? '#000000', 'line-width': directionStyle?.width ?? 1}}\n                    />\n                </Source>\n            )}\n        </View>\n    );\n}\n\nexport default Direction;\n"],"mappings":";;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAkC,IAAAE,WAAA,GAAAF,OAAA;AAGlC,SAASG,SAASA,CAAAC,IAAA,EAAgD;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EAAA,IAA9CC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAEC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;EAC3C,IAAID,WAAW,CAACE,MAAM,GAAG,CAAC,EAAE;IACxB,OAAO,IAAI;EACf;EACA,oBACI,IAAAP,WAAA,CAAAQ,GAAA,EAACT,YAAA,CAAAU,IAAI;IAAAC,QAAA,EACAL,WAAW,iBACR,IAAAL,WAAA,CAAAQ,GAAA,EAACX,WAAA,CAAAc,MAAM;MACHC,EAAE,EAAC,OAAO;MACVC,IAAI,EAAC,SAAS;MACdC,IAAI,EAAE;QACFD,IAAI,EAAE,SAAS;QACfE,UAAU,EAAE,CAAC,CAAC;QACdC,QAAQ,EAAE;UACNH,IAAI,EAAE,YAAY;UAClBR,WAAW,EAAXA;QACJ;MACJ,CAAE;MAAAK,QAAA,eAEF,IAAAV,WAAA,CAAAQ,GAAA,EAACX,WAAA,CAAAoB,KAAK;QACFL,EAAE,EAAC,OAAO;QACVC,IAAI,EAAC,MAAM;QACXK,MAAM,EAAC,OAAO;QACdC,MAAM,EAAE;UAAC,WAAW,EAAE,OAAO;UAAE,UAAU,EAAE;QAAO,CAAE;QACpDC,KAAK,EAAE;UAAC,YAAY,GAAAjB,qBAAA,GAAEG,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEe,KAAK,cAAAlB,qBAAA,cAAAA,qBAAA,GAAI,SAAS;UAAE,YAAY,GAAAC,qBAAA,GAAEE,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEgB,KAAK,cAAAlB,qBAAA,cAAAA,qBAAA,GAAI;QAAC;MAAE,CACvG;IAAC,CACE;EACX,CACC,CAAC;AAEf;AAAC,IAAAmB,QAAA,GAEctB,SAAS;AAAAuB,OAAA,cAAAD,QAAA"}
\ No newline at end of file
diff --git a/dist/MapView/MapView.d.ts b/dist/MapView/MapView.d.ts
new file mode 100644
index 0000000..f27c253
--- /dev/null
+++ b/dist/MapView/MapView.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { MapViewProps, MapViewHandle } from './MapViewTypes';
+declare const MapView: import("react").ForwardRefExoticComponent<MapViewProps & import("react").RefAttributes<MapViewHandle>>;
+export default MapView;
+//# sourceMappingURL=MapView.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/MapView.d.ts.map b/dist/MapView/MapView.d.ts.map
new file mode 100644
index 0000000..f7c7a7d
--- /dev/null
+++ b/dist/MapView/MapView.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapView.d.ts","sourceRoot":"","sources":["../../src/MapView/MapView.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAI3D,QAAA,MAAM,OAAO,wGA2EX,CAAC;AAEH,eAAe,OAAO,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/MapView.js b/dist/MapView/MapView.js
new file mode 100644
index 0000000..2c038a6
--- /dev/null
+++ b/dist/MapView/MapView.js
@@ -0,0 +1,97 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _maps = _interopRequireWildcard(require("@rnmapbox/maps"));
+var _reactNative = require("react-native");
+var _Direction = _interopRequireDefault(require("./Direction"));
+var _utils = _interopRequireDefault(require("./utils"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var MapView = /*#__PURE__*/(0, _react.forwardRef)(function MapView(_ref, ref) {
+  var accessToken = _ref.accessToken,
+    style = _ref.style,
+    styleURL = _ref.styleURL,
+    pitchEnabled = _ref.pitchEnabled,
+    mapPadding = _ref.mapPadding,
+    initialState = _ref.initialState,
+    waypoints = _ref.waypoints,
+    directionCoordinates = _ref.directionCoordinates,
+    directionStyle = _ref.directionStyle;
+  var cameraRef = (0, _react.useRef)(null);
+  var bounds = (0, _react.useMemo)(function () {
+    if (!waypoints || waypoints.length === 0) {
+      return undefined;
+    }
+    if (waypoints.length === 1) {
+      var _cameraRef$current, _cameraRef$current2;
+      (_cameraRef$current = cameraRef.current) === null || _cameraRef$current === void 0 ? void 0 : _cameraRef$current.flyTo(waypoints[0].coordinate);
+      (_cameraRef$current2 = cameraRef.current) === null || _cameraRef$current2 === void 0 ? void 0 : _cameraRef$current2.zoomTo(15);
+      return undefined;
+    }
+    var _Utils$getBounds = _utils["default"].getBounds(waypoints.map(function (waypoint) {
+        return waypoint.coordinate;
+      })),
+      southWest = _Utils$getBounds.southWest,
+      northEast = _Utils$getBounds.northEast;
+    return {
+      ne: northEast,
+      sw: southWest,
+      paddingTop: mapPadding,
+      paddingRight: mapPadding,
+      paddingBottom: mapPadding,
+      paddingLeft: mapPadding
+    };
+  }, [waypoints]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      flyTo: function flyTo(location, animationDuration) {
+        var _cameraRef$current3;
+        return (_cameraRef$current3 = cameraRef.current) === null || _cameraRef$current3 === void 0 ? void 0 : _cameraRef$current3.flyTo(location, animationDuration);
+      }
+    };
+  }, []);
+
+  // Initialize Mapbox on first mount
+  (0, _react.useEffect)(function () {
+    _maps["default"].setAccessToken(accessToken);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_maps["default"].MapView, {
+      styleURL: styleURL,
+      pitchEnabled: pitchEnabled,
+      style: {
+        flex: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_maps["default"].Camera, {
+        ref: cameraRef,
+        defaultSettings: {
+          centerCoordinate: initialState === null || initialState === void 0 ? void 0 : initialState.location,
+          zoomLevel: initialState === null || initialState === void 0 ? void 0 : initialState.zoom
+        },
+        bounds: bounds
+      }), waypoints && waypoints.map(function (_ref2) {
+        var coordinate = _ref2.coordinate,
+          MarkerComponent = _ref2.markerComponent;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_maps.MarkerView, {
+          id: "".concat(coordinate[0], ",").concat(coordinate[1]),
+          coordinate: coordinate,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkerComponent, {})
+        }, "".concat(coordinate[0], ",").concat(coordinate[1]));
+      }), directionCoordinates && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Direction["default"], {
+        coordinates: directionCoordinates,
+        directionStyle: directionStyle
+      })]
+    })
+  });
+});
+var _default = MapView;
+exports["default"] = _default;
+//# sourceMappingURL=MapView.js.map
\ No newline at end of file
diff --git a/dist/MapView/MapView.js.map b/dist/MapView/MapView.js.map
new file mode 100644
index 0000000..767d14c
--- /dev/null
+++ b/dist/MapView/MapView.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapView.js","names":["_react","require","_maps","_interopRequireWildcard","_reactNative","_Direction","_interopRequireDefault","_utils","_jsxRuntime","obj","__esModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MapView","forwardRef","_ref","ref","accessToken","style","styleURL","pitchEnabled","mapPadding","initialState","waypoints","directionCoordinates","directionStyle","cameraRef","useRef","bounds","useMemo","length","undefined","_cameraRef$current","_cameraRef$current2","current","flyTo","coordinate","zoomTo","_Utils$getBounds","Utils","getBounds","map","waypoint","southWest","northEast","ne","sw","paddingTop","paddingRight","paddingBottom","paddingLeft","useImperativeHandle","location","animationDuration","_cameraRef$current3","useEffect","Mapbox","setAccessToken","jsx","View","children","jsxs","flex","Camera","defaultSettings","centerCoordinate","zoomLevel","zoom","_ref2","MarkerComponent","markerComponent","MarkerView","id","concat","coordinates","_default","exports"],"sources":["../../src/MapView/MapView.tsx"],"sourcesContent":["import {forwardRef, useEffect, useImperativeHandle, useMemo, useRef} from 'react';\nimport Mapbox, {MarkerView} from '@rnmapbox/maps';\nimport {View} from 'react-native';\nimport {MapViewProps, MapViewHandle} from './MapViewTypes';\nimport Direction from './Direction';\nimport Utils from './utils';\n\nconst MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(\n    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle},\n    ref,\n) {\n    const cameraRef = useRef<Mapbox.Camera>(null);\n\n    const bounds = useMemo(() => {\n        if (!waypoints || waypoints.length === 0) {\n            return undefined;\n        }\n\n        if (waypoints.length === 1) {\n            cameraRef.current?.flyTo(waypoints[0].coordinate);\n            cameraRef.current?.zoomTo(15);\n            return undefined;\n        }\n\n        const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));\n        return {\n            ne: northEast,\n            sw: southWest,\n            paddingTop: mapPadding,\n            paddingRight: mapPadding,\n            paddingBottom: mapPadding,\n            paddingLeft: mapPadding,\n        };\n    }, [waypoints]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            flyTo: (location: [number, number], animationDuration?: number) => cameraRef.current?.flyTo(location, animationDuration),\n        }),\n        [],\n    );\n\n    // Initialize Mapbox on first mount\n    useEffect(() => {\n        Mapbox.setAccessToken(accessToken);\n    }, []);\n\n    return (\n        <View style={style}>\n            <Mapbox.MapView\n                styleURL={styleURL}\n                pitchEnabled={pitchEnabled}\n                style={{flex: 1}}\n            >\n                <Mapbox.Camera\n                    ref={cameraRef}\n                    defaultSettings={{\n                        centerCoordinate: initialState?.location,\n                        zoomLevel: initialState?.zoom,\n                    }}\n                    bounds={bounds}\n                />\n                {waypoints &&\n                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (\n                        <MarkerView\n                            id={`${coordinate[0]},${coordinate[1]}`}\n                            key={`${coordinate[0]},${coordinate[1]}`}\n                            coordinate={coordinate}\n                        >\n                            <MarkerComponent />\n                        </MarkerView>\n                    ))}\n                {directionCoordinates && (\n                    <Direction\n                        coordinates={directionCoordinates}\n                        directionStyle={directionStyle}\n                    />\n                )}\n            </Mapbox.MapView>\n        </View>\n    );\n});\n\nexport default MapView;\n"],"mappings":"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"}
\ No newline at end of file
diff --git a/dist/MapView/MapView.web.d.ts b/dist/MapView/MapView.web.d.ts
new file mode 100644
index 0000000..cab0c27
--- /dev/null
+++ b/dist/MapView/MapView.web.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MapViewHandle, MapViewProps } from './MapViewTypes';
+import 'mapbox-gl/dist/mapbox-gl.css';
+declare const MapView: import("react").ForwardRefExoticComponent<MapViewProps & import("react").RefAttributes<MapViewHandle>>;
+export default MapView;
+//# sourceMappingURL=MapView.web.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/MapView.web.d.ts.map b/dist/MapView/MapView.web.d.ts.map
new file mode 100644
index 0000000..7345681
--- /dev/null
+++ b/dist/MapView/MapView.web.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapView.web.d.ts","sourceRoot":"","sources":["../../src/MapView/MapView.web.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,aAAa,EAAE,YAAY,EAAW,MAAM,gBAAgB,CAAC;AAErE,OAAO,8BAA8B,CAAC;AAYtC,QAAA,MAAM,OAAO,wGAwEX,CAAC;AAEH,eAAe,OAAO,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/MapView.web.js b/dist/MapView/MapView.web.js
new file mode 100644
index 0000000..84fab8c
--- /dev/null
+++ b/dist/MapView/MapView.web.js
@@ -0,0 +1,123 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _reactMapGl = _interopRequireWildcard(require("react-map-gl"));
+var _react = require("react");
+var _webMercator = _interopRequireDefault(require("@math.gl/web-mercator"));
+var _reactNative = require("react-native");
+var _utils = _interopRequireDefault(require("./utils"));
+require("mapbox-gl/dist/mapbox-gl.css");
+var _Direction = _interopRequireDefault(require("./Direction"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var getAdjustment = function getAdjustment(mapWidth, mapHeight, waypoints, mapPadding) {
+  var viewport = new _webMercator["default"]({
+    height: mapWidth,
+    width: mapHeight
+  });
+  var _Utils$getBounds = _utils["default"].getBounds(waypoints.map(function (waypoint) {
+      return waypoint.coordinate;
+    })),
+    northEast = _Utils$getBounds.northEast,
+    southWest = _Utils$getBounds.southWest;
+  return viewport.fitBounds([southWest, northEast], {
+    padding: mapPadding
+  });
+};
+var MapView = /*#__PURE__*/(0, _react.forwardRef)(function MapView(_ref, ref) {
+  var _mapRef$getCanvas;
+  var accessToken = _ref.accessToken,
+    waypoints = _ref.waypoints,
+    style = _ref.style,
+    mapPadding = _ref.mapPadding,
+    directionCoordinates = _ref.directionCoordinates,
+    longitude = _ref.longitude,
+    latitude = _ref.latitude,
+    zoom = _ref.zoom,
+    _onMove = _ref.onMove;
+  // const mapRef = useRef<MapRef>(null);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    mapRef = _useState2[0],
+    setMapRef = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    bounds = _useState4[0],
+    setBounds = _useState4[1];
+  var setRef = (0, _react.useCallback)(function (newRef) {
+    return setMapRef(newRef);
+  }, []);
+  var _ref2 = (_mapRef$getCanvas = mapRef === null || mapRef === void 0 ? void 0 : mapRef.getCanvas()) !== null && _mapRef$getCanvas !== void 0 ? _mapRef$getCanvas : {
+      clientHeight: undefined,
+      clientWidth: undefined
+    },
+    mapHeight = _ref2.clientHeight,
+    mapWidth = _ref2.clientWidth;
+  (0, _react.useEffect)(function () {
+    if (!waypoints || waypoints.length === 0) {
+      return;
+    }
+    if (!mapRef || !mapWidth || !mapHeight) {
+      return;
+    }
+    if (waypoints.length === 1) {
+      mapRef.flyTo({
+        center: waypoints[0].coordinate,
+        zoom: 15
+      });
+      return;
+    }
+    var newBounds = getAdjustment(mapWidth, mapHeight, waypoints, mapPadding);
+    setBounds(newBounds);
+  }, [waypoints, mapHeight, mapWidth]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      flyTo: function flyTo(location, animationDuration) {
+        mapRef === null || mapRef === void 0 ? void 0 : mapRef.flyTo({
+          center: location,
+          duration: animationDuration
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: style,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactMapGl["default"], {
+      ref: setRef,
+      mapboxAccessToken: accessToken,
+      longitude: longitude,
+      latitude: latitude,
+      zoom: zoom,
+      mapStyle: "mapbox://styles/mapbox/streets-v9",
+      onMove: function onMove(event) {
+        return _onMove(event.viewState);
+      },
+      children: [waypoints && waypoints.map(function (_ref3) {
+        var coordinate = _ref3.coordinate,
+          MarkerComponent = _ref3.markerComponent;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMapGl.Marker, {
+          longitude: coordinate[0],
+          latitude: coordinate[1],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkerComponent, {})
+        }, "".concat(coordinate[0], ",").concat(coordinate[1]));
+      }), directionCoordinates && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Direction["default"], {
+        coordinates: directionCoordinates
+      })]
+    })
+  });
+});
+var _default = MapView;
+exports["default"] = _default;
+//# sourceMappingURL=MapView.web.js.map
\ No newline at end of file
diff --git a/dist/MapView/MapView.web.js.map b/dist/MapView/MapView.web.js.map
new file mode 100644
index 0000000..f4ba19c
--- /dev/null
+++ b/dist/MapView/MapView.web.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapView.web.js","names":["_reactMapGl","_interopRequireWildcard","require","_react","_webMercator","_interopRequireDefault","_reactNative","_utils","_Direction","_jsxRuntime","obj","__esModule","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","isArray","getAdjustment","mapWidth","mapHeight","waypoints","mapPadding","viewport","WebMercatorViewport","height","width","_Utils$getBounds","Utils","getBounds","map","waypoint","coordinate","northEast","southWest","fitBounds","padding","MapView","forwardRef","_ref","ref","_mapRef$getCanvas","accessToken","style","directionCoordinates","longitude","latitude","zoom","onMove","_useState","useState","_useState2","mapRef","setMapRef","_useState3","_useState4","bounds","setBounds","setRef","useCallback","newRef","_ref2","getCanvas","clientHeight","undefined","clientWidth","useEffect","flyTo","center","newBounds","useImperativeHandle","location","animationDuration","duration","jsx","View","children","jsxs","mapboxAccessToken","mapStyle","event","viewState","_ref3","MarkerComponent","markerComponent","Marker","concat","coordinates","_default","exports"],"sources":["../../src/MapView/MapView.web.tsx"],"sourcesContent":["import Map, {MapRef, Marker} from 'react-map-gl';\nimport {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';\nimport WebMercatorViewport from '@math.gl/web-mercator';\nimport {View} from 'react-native';\nimport {MapViewHandle, MapViewProps, WayPoint} from './MapViewTypes';\nimport Utils from './utils';\nimport 'mapbox-gl/dist/mapbox-gl.css';\nimport Direction from './Direction';\n\nconst getAdjustment = (mapWidth: number, mapHeight: number, waypoints: WayPoint[], mapPadding?: number) => {\n    const viewport = new WebMercatorViewport({height: mapWidth, width: mapHeight});\n\n    const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));\n    return viewport.fitBounds([southWest, northEast], {\n        padding: mapPadding,\n    });\n};\n\nconst MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, longitude, latitude, zoom, onMove}, ref) {\n    // const mapRef = useRef<MapRef>(null);\n    const [mapRef, setMapRef] = useState<MapRef | null>(null);\n    const [bounds, setBounds] = useState<{\n        longitude: number;\n        latitude: number;\n        zoom: number;\n    }>();\n\n    const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);\n\n    const {clientHeight: mapHeight, clientWidth: mapWidth} = mapRef?.getCanvas() ?? {clientHeight: undefined, clientWidth: undefined};\n\n    useEffect(() => {\n        if (!waypoints || waypoints.length === 0) {\n            return;\n        }\n\n        if (!mapRef || !mapWidth || !mapHeight) {\n            return;\n        }\n\n        if (waypoints.length === 1) {\n            mapRef.flyTo({\n                center: waypoints[0].coordinate,\n                zoom: 15,\n            });\n            return;\n        }\n\n        const newBounds = getAdjustment(mapWidth, mapHeight, waypoints, mapPadding);\n        setBounds(newBounds);\n    }, [waypoints, mapHeight, mapWidth]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            flyTo: (location: [number, number], animationDuration?: number) => {\n                mapRef?.flyTo({\n                    center: location,\n                    duration: animationDuration,\n                });\n            },\n        }),\n        [],\n    );\n\n    return (\n        <View style={style}>\n            <Map\n                ref={setRef}\n                mapboxAccessToken={accessToken}\n                longitude={longitude}\n                latitude={latitude}\n                zoom={zoom}\n                mapStyle=\"mapbox://styles/mapbox/streets-v9\"\n                onMove={(event) => onMove(event.viewState)}\n            >\n                {waypoints &&\n                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (\n                        <Marker\n                            key={`${coordinate[0]},${coordinate[1]}`}\n                            longitude={coordinate[0]}\n                            latitude={coordinate[1]}\n                        >\n                            <MarkerComponent />\n                        </Marker>\n                    ))}\n                {directionCoordinates && <Direction coordinates={directionCoordinates} />}\n            </Map>\n        </View>\n    );\n});\n\nexport default MapView;\n"],"mappings":";;;;;;;AAAA,IAAAA,WAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAEA,IAAAK,MAAA,GAAAF,sBAAA,CAAAH,OAAA;AACAA,OAAA;AACA,IAAAM,UAAA,GAAAH,sBAAA,CAAAH,OAAA;AAAoC,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAG,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAZ,wBAAAS,GAAA,EAAAG,WAAA,SAAAA,WAAA,IAAAH,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAO,OAAA,CAAAP,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAQ,KAAA,GAAAN,wBAAA,CAAAC,WAAA,OAAAK,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,cAAAX,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAAA,SAAAW,eAAAC,GAAA,EAAAC,CAAA,WAAAC,eAAA,CAAAF,GAAA,KAAAG,qBAAA,CAAAH,GAAA,EAAAC,CAAA,KAAAG,2BAAA,CAAAJ,GAAA,EAAAC,CAAA,KAAAI,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAApB,MAAA,CAAAI,SAAA,CAAAiB,QAAA,CAAAf,IAAA,CAAAW,CAAA,EAAAK,KAAA,aAAAF,CAAA,iBAAAH,CAAA,CAAAM,WAAA,EAAAH,CAAA,GAAAH,CAAA,CAAAM,WAAA,CAAAC,IAAA,MAAAJ,CAAA,cAAAA,CAAA,mBAAAK,KAAA,CAAAC,IAAA,CAAAT,CAAA,OAAAG,CAAA,+DAAAO,IAAA,CAAAP,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAT,GAAA,EAAAkB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,EAAAD,GAAA,GAAAlB,GAAA,CAAAmB,MAAA,WAAAlB,CAAA,MAAAmB,IAAA,OAAAL,KAAA,CAAAG,GAAA,GAAAjB,CAAA,GAAAiB,GAAA,EAAAjB,CAAA,IAAAmB,IAAA,CAAAnB,CAAA,IAAAD,GAAA,CAAAC,CAAA,UAAAmB,IAAA;AAAA,SAAAjB,sBAAAH,GAAA,EAAAC,CAAA,QAAAoB,EAAA,WAAArB,GAAA,gCAAAsB,MAAA,IAAAtB,GAAA,CAAAsB,MAAA,CAAAC,QAAA,KAAAvB,GAAA,4BAAAqB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAzB,IAAA,CAAAI,GAAA,GAAA+B,IAAA,QAAA9B,CAAA,QAAAX,MAAA,CAAA+B,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAA9B,IAAA,CAAAyB,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAAT,MAAA,KAAAlB,CAAA,GAAA4B,EAAA,iBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,eAAAM,EAAA,GAAAN,EAAA,cAAA/B,MAAA,CAAAqC,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAA1B,gBAAAF,GAAA,QAAAe,KAAA,CAAAqB,OAAA,CAAApC,GAAA,UAAAA,GAAA;AAEpC,IAAMqC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAEC,SAAiB,EAAEC,SAAqB,EAAEC,UAAmB,EAAK;EACvG,IAAMC,QAAQ,GAAG,IAAIC,uBAAmB,CAAC;IAACC,MAAM,EAAEN,QAAQ;IAAEO,KAAK,EAAEN;EAAS,CAAC,CAAC;EAE9E,IAAAO,gBAAA,GAA+BC,iBAAK,CAACC,SAAS,CAACR,SAAS,CAACS,GAAG,CAAC,UAACC,QAAQ;MAAA,OAAKA,QAAQ,CAACC,UAAU;IAAA,EAAC,CAAC;IAAzFC,SAAS,GAAAN,gBAAA,CAATM,SAAS;IAAEC,SAAS,GAAAP,gBAAA,CAATO,SAAS;EAC3B,OAAOX,QAAQ,CAACY,SAAS,CAAC,CAACD,SAAS,EAAED,SAAS,CAAC,EAAE;IAC9CG,OAAO,EAAEd;EACb,CAAC,CAAC;AACN,CAAC;AAED,IAAMe,OAAO,gBAAG,IAAAC,iBAAU,EAA8B,SAASD,OAAOA,CAAAE,IAAA,EAAuGC,GAAG,EAAE;EAAA,IAAAC,iBAAA;EAAA,IAA1GC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAErB,SAAS,GAAAkB,IAAA,CAATlB,SAAS;IAAEsB,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAAErB,UAAU,GAAAiB,IAAA,CAAVjB,UAAU;IAAEsB,oBAAoB,GAAAL,IAAA,CAApBK,oBAAoB;IAAEC,SAAS,GAAAN,IAAA,CAATM,SAAS;IAAEC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IAAEC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IAAEC,OAAM,GAAAT,IAAA,CAANS,MAAM;EACxK;EACA,IAAAC,SAAA,GAA4B,IAAAC,eAAQ,EAAgB,IAAI,CAAC;IAAAC,UAAA,GAAAvE,cAAA,CAAAqE,SAAA;IAAlDG,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EACxB,IAAAG,UAAA,GAA4B,IAAAJ,eAAQ,EAIjC,CAAC;IAAAK,UAAA,GAAA3E,cAAA,CAAA0E,UAAA;IAJGE,MAAM,GAAAD,UAAA;IAAEE,SAAS,GAAAF,UAAA;EAMxB,IAAMG,MAAM,GAAG,IAAAC,kBAAW,EAAC,UAACC,MAAqB;IAAA,OAAKP,SAAS,CAACO,MAAM,CAAC;EAAA,GAAE,EAAE,CAAC;EAE5E,IAAAC,KAAA,IAAApB,iBAAA,GAAyDW,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEU,SAAS,CAAC,CAAC,cAAArB,iBAAA,cAAAA,iBAAA,GAAI;MAACsB,YAAY,EAAEC,SAAS;MAAEC,WAAW,EAAED;IAAS,CAAC;IAA5G5C,SAAS,GAAAyC,KAAA,CAAvBE,YAAY;IAA0B5C,QAAQ,GAAA0C,KAAA,CAArBI,WAAW;EAE3C,IAAAC,gBAAS,EAAC,YAAM;IACZ,IAAI,CAAC7C,SAAS,IAAIA,SAAS,CAACrB,MAAM,KAAK,CAAC,EAAE;MACtC;IACJ;IAEA,IAAI,CAACoD,MAAM,IAAI,CAACjC,QAAQ,IAAI,CAACC,SAAS,EAAE;MACpC;IACJ;IAEA,IAAIC,SAAS,CAACrB,MAAM,KAAK,CAAC,EAAE;MACxBoD,MAAM,CAACe,KAAK,CAAC;QACTC,MAAM,EAAE/C,SAAS,CAAC,CAAC,CAAC,CAACW,UAAU;QAC/Be,IAAI,EAAE;MACV,CAAC,CAAC;MACF;IACJ;IAEA,IAAMsB,SAAS,GAAGnD,aAAa,CAACC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,CAAC;IAC3EmC,SAAS,CAACY,SAAS,CAAC;EACxB,CAAC,EAAE,CAAChD,SAAS,EAAED,SAAS,EAAED,QAAQ,CAAC,CAAC;EAEpC,IAAAmD,0BAAmB,EACf9B,GAAG,EACH;IAAA,OAAO;MACH2B,KAAK,EAAE,SAAAA,MAACI,QAA0B,EAAEC,iBAA0B,EAAK;QAC/DpB,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEe,KAAK,CAAC;UACVC,MAAM,EAAEG,QAAQ;UAChBE,QAAQ,EAAED;QACd,CAAC,CAAC;MACN;IACJ,CAAC;EAAA,CAAC,EACF,EACJ,CAAC;EAED,oBACI,IAAAnH,WAAA,CAAAqH,GAAA,EAACxH,YAAA,CAAAyH,IAAI;IAAChC,KAAK,EAAEA,KAAM;IAAAiC,QAAA,eACf,IAAAvH,WAAA,CAAAwH,IAAA,EAACjI,WAAA,WAAG;MACA4F,GAAG,EAAEkB,MAAO;MACZoB,iBAAiB,EAAEpC,WAAY;MAC/BG,SAAS,EAAEA,SAAU;MACrBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXgC,QAAQ,EAAC,mCAAmC;MAC5C/B,MAAM,EAAE,SAAAA,OAACgC,KAAK;QAAA,OAAKhC,OAAM,CAACgC,KAAK,CAACC,SAAS,CAAC;MAAA,CAAC;MAAAL,QAAA,GAE1CvD,SAAS,IACNA,SAAS,CAACS,GAAG,CAAC,UAAAoD,KAAA;QAAA,IAAElD,UAAU,GAAAkD,KAAA,CAAVlD,UAAU;UAAmBmD,eAAe,GAAAD,KAAA,CAAhCE,eAAe;QAAA,oBACvC,IAAA/H,WAAA,CAAAqH,GAAA,EAAC9H,WAAA,CAAAyI,MAAM;UAEHxC,SAAS,EAAEb,UAAU,CAAC,CAAC,CAAE;UACzBc,QAAQ,EAAEd,UAAU,CAAC,CAAC,CAAE;UAAA4C,QAAA,eAExB,IAAAvH,WAAA,CAAAqH,GAAA,EAACS,eAAe,IAAE;QAAC,MAAAG,MAAA,CAJXtD,UAAU,CAAC,CAAC,CAAC,OAAAsD,MAAA,CAAItD,UAAU,CAAC,CAAC,CAAC,CAKlC,CAAC;MAAA,CACZ,CAAC,EACLY,oBAAoB,iBAAI,IAAAvF,WAAA,CAAAqH,GAAA,EAACtH,UAAA,WAAS;QAACmI,WAAW,EAAE3C;MAAqB,CAAE,CAAC;IAAA,CACxE;EAAC,CACJ,CAAC;AAEf,CAAC,CAAC;AAAC,IAAA4C,QAAA,GAEYnD,OAAO;AAAAoD,OAAA,cAAAD,QAAA"}
\ No newline at end of file
diff --git a/dist/MapView/MapViewTypes.d.ts b/dist/MapView/MapViewTypes.d.ts
new file mode 100644
index 0000000..6742361
--- /dev/null
+++ b/dist/MapView/MapViewTypes.d.ts
@@ -0,0 +1,43 @@
+import { ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type MapViewProps = {
+    accessToken: string;
+    style: StyleProp<ViewStyle>;
+    styleURL?: string;
+    pitchEnabled?: boolean;
+    mapPadding?: number;
+    initialState?: InitialState;
+    waypoints?: WayPoint[];
+    directionCoordinates?: Array<[number, number]>;
+    directionStyle?: DirectionStyle;
+    longitude: number;
+    latitude: number;
+    zoom: number;
+    onMove: (viewState: ViewState) => void;
+};
+export type DirectionProps = {
+    coordinates: Array<[number, number]>;
+    directionStyle?: DirectionStyle;
+};
+export type ViewState = {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+};
+type InitialState = {
+    location: [number, number];
+    zoom: number;
+};
+export type WayPoint = {
+    coordinate: [number, number];
+    markerComponent: ComponentType;
+};
+export type DirectionStyle = {
+    width?: number;
+    color?: string;
+};
+export type MapViewHandle = {
+    flyTo: (location: [number, number], animationDuration?: number) => void;
+};
+export {};
+//# sourceMappingURL=MapViewTypes.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/MapViewTypes.d.ts.map b/dist/MapView/MapViewTypes.d.ts.map
new file mode 100644
index 0000000..2e79f5c
--- /dev/null
+++ b/dist/MapView/MapViewTypes.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapViewTypes.d.ts","sourceRoot":"","sources":["../../src/MapView/MapViewTypes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG;IAEvB,WAAW,EAAE,MAAM,CAAC;IAEpB,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEvB,oBAAoB,CAAC,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/C,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC,SAAS,EAAE,MAAM,CAAC;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAEzB,WAAW,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAErC,cAAc,CAAC,EAAE,cAAc,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,KAAK,YAAY,GAAG;IAEhB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC;AAGF,MAAM,MAAM,QAAQ,GAAG;IACnB,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,aAAa,CAAC;CAClC,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IACxB,KAAK,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,iBAAiB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3E,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/MapViewTypes.js b/dist/MapView/MapViewTypes.js
new file mode 100644
index 0000000..cc70729
--- /dev/null
+++ b/dist/MapView/MapViewTypes.js
@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=MapViewTypes.js.map
\ No newline at end of file
diff --git a/dist/MapView/MapViewTypes.js.map b/dist/MapView/MapViewTypes.js.map
new file mode 100644
index 0000000..a04073c
--- /dev/null
+++ b/dist/MapView/MapViewTypes.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"MapViewTypes.js","names":[],"sources":["../../src/MapView/MapViewTypes.ts"],"sourcesContent":["import {ComponentType} from 'react';\nimport type {StyleProp, ViewStyle} from 'react-native';\n\nexport type MapViewProps = {\n    // Public access token to be used to fetch map data from Mapbox.\n    accessToken: string;\n    // Style applied to MapView component. Note some of the View Style props are not available on ViewMap\n    style: StyleProp<ViewStyle>;\n    // Link to the style JSON document.\n    styleURL?: string;\n    // Whether map can tilt in the vertical direction.\n    pitchEnabled?: boolean;\n    // Padding to apply when the map is adjusted to fit waypoints and directions\n    mapPadding?: number;\n    // Initial coordinate and zoom level\n    initialState?: InitialState;\n    // Locations on which to put markers\n    waypoints?: WayPoint[];\n    // List of coordinates which together forms a direction.\n    directionCoordinates?: Array<[number, number]>;\n    // Style used for the line that displays direction\n    directionStyle?: DirectionStyle;\n\n    longitude: number;\n\n    latitude: number;\n\n    zoom: number;\n\n    onMove: (viewState: ViewState) => void;\n};\n\nexport type DirectionProps = {\n    // Coordinates of points that constitute the direction\n    coordinates: Array<[number, number]>;\n    // Style used for the line that displays direction\n    directionStyle?: DirectionStyle;\n};\n\nexport type ViewState = {\n    longitude: number;\n    latitude: number;\n    zoom: number;\n};\n\n// Initial state of the map\ntype InitialState = {\n    // Coordinate on which to center the map\n    location: [number, number];\n    zoom: number;\n};\n\n// Waypoint to be displayed on the map\nexport type WayPoint = {\n    coordinate: [number, number];\n    markerComponent: ComponentType;\n};\n\n// Style used for the line that displays direction\nexport type DirectionStyle = {\n    width?: number;\n    color?: string;\n};\n\nexport type MapViewHandle = {\n    flyTo: (location: [number, number], animationDuration?: number) => void;\n};\n"],"mappings":""}
\ No newline at end of file
diff --git a/dist/MapView/index.d.ts b/dist/MapView/index.d.ts
new file mode 100644
index 0000000..a76269e
--- /dev/null
+++ b/dist/MapView/index.d.ts
@@ -0,0 +1,4 @@
+import MapView from './MapView';
+export type { MapViewProps, MapViewHandle } from './MapViewTypes';
+export default MapView;
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/index.d.ts.map b/dist/MapView/index.d.ts.map
new file mode 100644
index 0000000..908c9ba
--- /dev/null
+++ b/dist/MapView/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MapView/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAChE,eAAe,OAAO,CAAC"}
\ No newline at end of file
diff --git a/dist/MapView/index.js b/dist/MapView/index.js
new file mode 100644
index 0000000..dba90ce
--- /dev/null
+++ b/dist/MapView/index.js
@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _MapView = _interopRequireDefault(require("./MapView"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = _MapView["default"];
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/MapView/index.js.map b/dist/MapView/index.js.map
new file mode 100644
index 0000000..e6c77f6
--- /dev/null
+++ b/dist/MapView/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_MapView","_interopRequireDefault","require","obj","__esModule","_default","MapView","exports"],"sources":["../../src/MapView/index.ts"],"sourcesContent":["import MapView from './MapView';\n\nexport type {MapViewProps, MapViewHandle} from './MapViewTypes';\nexport default MapView;\n"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAgC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,IAAAE,QAAA,GAGjBC,mBAAO;AAAAC,OAAA,cAAAF,QAAA"}
\ No newline at end of file
diff --git a/dist/MapView/utils.d.ts b/dist/MapView/utils.d.ts
new file mode 100644
index 0000000..cd62a84
--- /dev/null
+++ b/dist/MapView/utils.d.ts
@@ -0,0 +1,9 @@
+declare function getBounds(waypoints: Array<[number, number]>): {
+    southWest: [number, number];
+    northEast: [number, number];
+};
+declare const _default: {
+    getBounds: typeof getBounds;
+};
+export default _default;
+//# sourceMappingURL=utils.d.ts.map
\ No newline at end of file
diff --git a/dist/MapView/utils.d.ts.map b/dist/MapView/utils.d.ts.map
new file mode 100644
index 0000000..c427d35
--- /dev/null
+++ b/dist/MapView/utils.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/MapView/utils.ts"],"names":[],"mappings":"AAAA,iBAAS,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,GAAG;IAAC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAC,CAQjH;;;;AAED,wBAEE"}
\ No newline at end of file
diff --git a/dist/MapView/utils.js b/dist/MapView/utils.js
new file mode 100644
index 0000000..3543e8b
--- /dev/null
+++ b/dist/MapView/utils.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function getBounds(waypoints) {
+  var lngs = waypoints.map(function (waypoint) {
+    return waypoint[0];
+  });
+  var lats = waypoints.map(function (waypoint) {
+    return waypoint[1];
+  });
+  return {
+    southWest: [Math.min.apply(Math, _toConsumableArray(lngs)), Math.min.apply(Math, _toConsumableArray(lats))],
+    northEast: [Math.max.apply(Math, _toConsumableArray(lngs)), Math.max.apply(Math, _toConsumableArray(lats))]
+  };
+}
+var _default = {
+  getBounds: getBounds
+};
+exports["default"] = _default;
+//# sourceMappingURL=utils.js.map
\ No newline at end of file
diff --git a/dist/MapView/utils.js.map b/dist/MapView/utils.js.map
new file mode 100644
index 0000000..535c6a0
--- /dev/null
+++ b/dist/MapView/utils.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getBounds","waypoints","lngs","map","waypoint","lats","southWest","Math","min","apply","_toConsumableArray","northEast","max","_default","exports"],"sources":["../../src/MapView/utils.ts"],"sourcesContent":["function getBounds(waypoints: Array<[number, number]>): {southWest: [number, number]; northEast: [number, number]} {\n    const lngs = waypoints.map((waypoint) => waypoint[0]);\n    const lats = waypoints.map((waypoint) => waypoint[1]);\n\n    return {\n        southWest: [Math.min(...lngs), Math.min(...lats)],\n        northEast: [Math.max(...lngs), Math.max(...lats)],\n    };\n}\n\nexport default {\n    getBounds,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAASA,SAASA,CAACC,SAAkC,EAA8D;EAC/G,IAAMC,IAAI,GAAGD,SAAS,CAACE,GAAG,CAAC,UAACC,QAAQ;IAAA,OAAKA,QAAQ,CAAC,CAAC,CAAC;EAAA,EAAC;EACrD,IAAMC,IAAI,GAAGJ,SAAS,CAACE,GAAG,CAAC,UAACC,QAAQ;IAAA,OAAKA,QAAQ,CAAC,CAAC,CAAC;EAAA,EAAC;EAErD,OAAO;IACHE,SAAS,EAAE,CAACC,IAAI,CAACC,GAAG,CAAAC,KAAA,CAARF,IAAI,EAAAG,kBAAA,CAAQR,IAAI,EAAC,EAAEK,IAAI,CAACC,GAAG,CAAAC,KAAA,CAARF,IAAI,EAAAG,kBAAA,CAAQL,IAAI,EAAC,CAAC;IACjDM,SAAS,EAAE,CAACJ,IAAI,CAACK,GAAG,CAAAH,KAAA,CAARF,IAAI,EAAAG,kBAAA,CAAQR,IAAI,EAAC,EAAEK,IAAI,CAACK,GAAG,CAAAH,KAAA,CAARF,IAAI,EAAAG,kBAAA,CAAQL,IAAI,EAAC;EACpD,CAAC;AACL;AAAC,IAAAQ,QAAA,GAEc;EACXb,SAAS,EAATA;AACJ,CAAC;AAAAc,OAAA,cAAAD,QAAA"}
\ No newline at end of file
diff --git a/dist/index.d.ts b/dist/index.d.ts
new file mode 100644
index 0000000..22aa93a
--- /dev/null
+++ b/dist/index.d.ts
@@ -0,0 +1,4 @@
+import MapView from './MapView';
+export * from './MapView';
+export default MapView;
+//# sourceMappingURL=index.d.ts.map
\ No newline at end of file
diff --git a/dist/index.d.ts.map b/dist/index.d.ts.map
new file mode 100644
index 0000000..2b506cb
--- /dev/null
+++ b/dist/index.d.ts.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,eAAe,OAAO,CAAC"}
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000..73bc918
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+var _MapView = _interopRequireWildcard(require("./MapView"));
+Object.keys(_MapView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MapView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MapView[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = _MapView["default"];
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/dist/index.js.map b/dist/index.js.map
new file mode 100644
index 0000000..4422896
--- /dev/null
+++ b/dist/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_MapView","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set","_default","MapView"],"sources":["../src/index.ts"],"sourcesContent":["import MapView from './MapView';\n\nexport * from './MapView';\nexport default MapView;\n"],"mappings":";;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAA0B,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAmB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAE,OAAA,CAAAF,GAAA,yBAAAA,GAAA,uCAAAA,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,cAAAL,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,IAAAK,QAAA,GACXC,mBAAO;AAAApB,OAAA,cAAAmB,QAAA"}
\ No newline at end of file
diff --git a/src/MapView/Direction.tsx b/src/MapView/Direction.tsx
index 5ba9e63..f6f6795 100644
--- a/src/MapView/Direction.tsx
+++ b/src/MapView/Direction.tsx
@@ -1,6 +1,7 @@
 import Mapbox from '@rnmapbox/maps';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -20,8 +21,8 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
             <Mapbox.LineLayer
                 id="routeFill"
                 style={{
-                    lineColor: 'blue',
-                    lineWidth: 3,
+                    lineColor: directionStyle?.color ?? '#000000',
+                    lineWidth: directionStyle?.width ?? 1,
                 }}
             />
         </Mapbox.ShapeSource>
diff --git a/src/MapView/Direction.web.tsx b/src/MapView/Direction.web.tsx
index ac43c6a..cf5fb21 100644
--- a/src/MapView/Direction.web.tsx
+++ b/src/MapView/Direction.web.tsx
@@ -1,7 +1,8 @@
 import {Layer, Source} from 'react-map-gl';
 import {View} from 'react-native';
+import {DirectionProps} from './MapViewTypes';
 
-function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
+function Direction({coordinates, directionStyle}: DirectionProps) {
     if (coordinates.length < 1) {
         return null;
     }
@@ -25,7 +26,7 @@ function Direction({coordinates}: {coordinates: Array<[number, number]>}) {
                         type="line"
                         source="route"
                         layout={{'line-join': 'round', 'line-cap': 'round'}}
-                        paint={{'line-color': '#888', 'line-width': 4}}
+                        paint={{'line-color': directionStyle?.color ?? '#000000', 'line-width': directionStyle?.width ?? 1}}
                     />
                 </Source>
             )}
diff --git a/src/MapView/MapView.tsx b/src/MapView/MapView.tsx
index 6405a06..e4bfefa 100644
--- a/src/MapView/MapView.tsx
+++ b/src/MapView/MapView.tsx
@@ -6,7 +6,7 @@ import Direction from './Direction';
 import Utils from './utils';
 
 const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, markerComponent: MarkerComponent, directionCoordinates},
+    {accessToken, style, styleURL, pitchEnabled, mapPadding, initialState, waypoints, directionCoordinates, directionStyle},
     ref,
 ) {
     const cameraRef = useRef<Mapbox.Camera>(null);
@@ -17,12 +17,12 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
         }
 
         if (waypoints.length === 1) {
-            cameraRef.current?.flyTo(waypoints[0]);
+            cameraRef.current?.flyTo(waypoints[0].coordinate);
             cameraRef.current?.zoomTo(15);
             return undefined;
         }
 
-        const {southWest, northEast} = Utils.getBounds(waypoints);
+        const {southWest, northEast} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
         return {
             ne: northEast,
             sw: southWest,
@@ -61,18 +61,22 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
                     }}
                     bounds={bounds}
                 />
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <MarkerView
-                            id={`${waypoint[0]},${waypoint[1]}`}
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            coordinate={waypoint}
+                            id={`${coordinate[0]},${coordinate[1]}`}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            coordinate={coordinate}
                         >
                             <MarkerComponent />
                         </MarkerView>
                     ))}
-                {directionCoordinates && <Direction coordinates={directionCoordinates} />}
+                {directionCoordinates && (
+                    <Direction
+                        coordinates={directionCoordinates}
+                        directionStyle={directionStyle}
+                    />
+                )}
             </Mapbox.MapView>
         </View>
     );
diff --git a/src/MapView/MapView.web.tsx b/src/MapView/MapView.web.tsx
index 92632d3..4f11476 100644
--- a/src/MapView/MapView.web.tsx
+++ b/src/MapView/MapView.web.tsx
@@ -1,68 +1,64 @@
 import Map, {MapRef, Marker} from 'react-map-gl';
-import {RefObject, forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
 import WebMercatorViewport from '@math.gl/web-mercator';
 import {View} from 'react-native';
-import {MapViewHandle, MapViewProps} from './MapViewTypes';
+import {MapViewHandle, MapViewProps, WayPoint} from './MapViewTypes';
 import Utils from './utils';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import Direction from './Direction';
-import {DEFAULT_INITIAL_STATE} from './CONST';
 
-const getMapDimension = (mapRef: RefObject<MapRef>): {width: number; height: number} | undefined => {
-    if (!mapRef.current?.getMap()) {
-        return undefined;
-    }
+const getAdjustment = (mapWidth: number, mapHeight: number, waypoints: WayPoint[], mapPadding?: number) => {
+    const viewport = new WebMercatorViewport({height: mapWidth, width: mapHeight});
 
-    const {clientWidth, clientHeight} = mapRef.current.getCanvas();
-    return {width: clientWidth, height: clientHeight};
+    const {northEast, southWest} = Utils.getBounds(waypoints.map((waypoint) => waypoint.coordinate));
+    return viewport.fitBounds([southWest, northEast], {
+        padding: mapPadding,
+    });
 };
 
-const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
-    {accessToken, waypoints, style, mapPadding, markerComponent: MarkerComponent, directionCoordinates, initialState = DEFAULT_INITIAL_STATE},
-    ref,
-) {
-    const mapRef = useRef<MapRef>(null);
+const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView({accessToken, waypoints, style, mapPadding, directionCoordinates, longitude, latitude, zoom, onMove}, ref) {
+    // const mapRef = useRef<MapRef>(null);
+    const [mapRef, setMapRef] = useState<MapRef | null>(null);
     const [bounds, setBounds] = useState<{
         longitude: number;
         latitude: number;
         zoom: number;
     }>();
 
+    const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
+
+    const {clientHeight: mapHeight, clientWidth: mapWidth} = mapRef?.getCanvas() ?? {clientHeight: undefined, clientWidth: undefined};
+
     useEffect(() => {
         if (!waypoints || waypoints.length === 0) {
             return;
         }
 
+        if (!mapRef || !mapWidth || !mapHeight) {
+            return;
+        }
+
         if (waypoints.length === 1) {
-            mapRef.current?.flyTo({
-                center: waypoints[0],
+            mapRef.flyTo({
+                center: waypoints[0].coordinate,
                 zoom: 15,
             });
             return;
         }
 
-        const {northEast, southWest} = Utils.getBounds(waypoints);
-        const {width, height} = getMapDimension(mapRef) || {
-            width: 0,
-            height: 0,
-        };
-        const viewport = new WebMercatorViewport({height, width});
-
-        const {latitude, longitude, zoom} = viewport.fitBounds([southWest, northEast], {
-            padding: mapPadding,
-        });
-
-        setBounds({latitude, longitude, zoom});
-    }, [waypoints]);
+        const newBounds = getAdjustment(mapWidth, mapHeight, waypoints, mapPadding);
+        setBounds(newBounds);
+    }, [waypoints, mapHeight, mapWidth]);
 
     useImperativeHandle(
         ref,
         () => ({
-            flyTo: (location: [number, number], animationDuration?: number) =>
-                mapRef.current?.flyTo({
+            flyTo: (location: [number, number], animationDuration?: number) => {
+                mapRef?.flyTo({
                     center: location,
                     duration: animationDuration,
-                }),
+                });
+            },
         }),
         [],
     );
@@ -70,23 +66,20 @@ const MapView = forwardRef<MapViewHandle, MapViewProps>(function MapView(
     return (
         <View style={style}>
             <Map
-                ref={mapRef}
+                ref={setRef}
                 mapboxAccessToken={accessToken}
-                initialViewState={{
-                    longitude: initialState?.location[0],
-                    latitude: initialState?.location[1],
-                    zoom: initialState?.zoom,
-                }}
+                longitude={longitude}
+                latitude={latitude}
+                zoom={zoom}
                 mapStyle="mapbox://styles/mapbox/streets-v9"
-                {...bounds}
+                onMove={(event) => onMove(event.viewState)}
             >
-                {MarkerComponent &&
-                    waypoints &&
-                    waypoints.map((waypoint) => (
+                {waypoints &&
+                    waypoints.map(({coordinate, markerComponent: MarkerComponent}) => (
                         <Marker
-                            key={`${waypoint[0]},${waypoint[1]}`}
-                            longitude={waypoint[0]}
-                            latitude={waypoint[1]}
+                            key={`${coordinate[0]},${coordinate[1]}`}
+                            longitude={coordinate[0]}
+                            latitude={coordinate[1]}
                         >
                             <MarkerComponent />
                         </Marker>
diff --git a/src/MapView/MapViewTypes.ts b/src/MapView/MapViewTypes.ts
index 23b363f..d65ec57 100644
--- a/src/MapView/MapViewTypes.ts
+++ b/src/MapView/MapViewTypes.ts
@@ -13,16 +13,53 @@ export type MapViewProps = {
     // Padding to apply when the map is adjusted to fit waypoints and directions
     mapPadding?: number;
     // Initial coordinate and zoom level
-    initialState?: {
-        location: [number, number];
-        zoom: number;
-    };
+    initialState?: InitialState;
     // Locations on which to put markers
-    waypoints?: Array<[number, number]>;
-    // React component to use for the marker. If not provided, markers are not displayed for waypoints.
-    markerComponent?: ComponentType;
+    waypoints?: WayPoint[];
     // List of coordinates which together forms a direction.
     directionCoordinates?: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+
+    longitude: number;
+
+    latitude: number;
+
+    zoom: number;
+
+    onMove: (viewState: ViewState) => void;
+};
+
+export type DirectionProps = {
+    // Coordinates of points that constitute the direction
+    coordinates: Array<[number, number]>;
+    // Style used for the line that displays direction
+    directionStyle?: DirectionStyle;
+};
+
+export type ViewState = {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+};
+
+// Initial state of the map
+type InitialState = {
+    // Coordinate on which to center the map
+    location: [number, number];
+    zoom: number;
+};
+
+// Waypoint to be displayed on the map
+export type WayPoint = {
+    coordinate: [number, number];
+    markerComponent: ComponentType;
+};
+
+// Style used for the line that displays direction
+export type DirectionStyle = {
+    width?: number;
+    color?: string;
 };
 
 export type MapViewHandle = {