diff --git a/docs/Camera.md b/docs/Camera.md index 1587674cc..07a6ef4dc 100644 --- a/docs/Camera.md +++ b/docs/Camera.md @@ -145,7 +145,7 @@ number ``` The zoom level used when following the user location. - +[Show Map](../examples/Map/ShowMap) ### followPitch diff --git a/docs/FillLayer.md b/docs/FillLayer.md index b5cde7f15..53a2d1b9d 100644 --- a/docs/FillLayer.md +++ b/docs/FillLayer.md @@ -31,7 +31,7 @@ boolean ``` The id refers to en existing layer in the style. Does not create a new layer. - +[Change Layer Color](../examples/Map/ChangeLayerColor), [Show and hide layer](../examples/Map/ShowAndHideLayer) ### sourceID diff --git a/docs/LineLayer.md b/docs/LineLayer.md index 550d1ca62..0d1e89a14 100644 --- a/docs/LineLayer.md +++ b/docs/LineLayer.md @@ -31,7 +31,7 @@ boolean ``` The id refers to en existing layer in the style. Does not create a new layer. - +[Show and hide layer](../examples/Map/ShowAndHideLayer) ### sourceID diff --git a/docs/MapView.md b/docs/MapView.md index 9885b4ee5..43a630409 100644 --- a/docs/MapView.md +++ b/docs/MapView.md @@ -120,7 +120,7 @@ Enable/Disable attribution on map. For iOS you need to add MGLMapboxMetricsEnabl to your Info.plist _defaults to:_ `true` - +[Ornaments](../examples/Map/Ornaments) ### attributionPosition @@ -129,7 +129,7 @@ OrnamentPositonProp ``` Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map. By default on Android, the attribution with information icon (i) will be on the bottom left, while on iOS the mapbox logo will be on bottom left with information icon (i) on bottom right. Read more about mapbox attribution [here](https://docs.mapbox.com/help/getting-started/attribution/) - +[Ornaments](../examples/Map/Ornaments) ### tintColor @@ -148,7 +148,7 @@ boolean Enable/Disable the logo on the map. _defaults to:_ `true` - +[Ornaments](../examples/Map/Ornaments) ### logoPosition @@ -157,7 +157,7 @@ OrnamentPositonProp ``` Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map - +[Ornaments](../examples/Map/Ornaments) ### compassEnabled @@ -167,7 +167,7 @@ boolean Enable/Disable the compass from appearing on the map _defaults to:_ `false` - +[Ornaments](../examples/Map/Ornaments) ### compassFadeWhenNorth @@ -177,7 +177,7 @@ boolean [`mapbox` (v10) implementation only] Enable/Disable if the compass should fade out when the map is pointing north _defaults to:_ `false` - +[Ornaments](../examples/Map/Ornaments) ### compassPosition @@ -186,7 +186,7 @@ OrnamentPositonProp ``` [`mapbox` (v10) implementation only] Adds compass offset, e.g. `{top: 8, left: 8}` will put the compass in top-left corner of the map - +[Ornaments](../examples/Map/Ornaments) ### compassViewPosition @@ -216,7 +216,7 @@ string ``` [iOS, `mapbox` (v10) implementation only] A string referencing an image key. Requires an `Images` component. - +[Ornaments](../examples/Map/Ornaments) ### scaleBarEnabled @@ -226,7 +226,7 @@ boolean [`mapbox` (v10) implementation only] Enable/Disable the scale bar from appearing on the map _defaults to:_ `true` - +[Ornaments](../examples/Map/Ornaments) ### scaleBarPosition @@ -235,7 +235,7 @@ OrnamentPositonProp ``` [`mapbox` (v10) implementation only] Adds scale bar offset, e.g. `{top: 8, left: 8}` will put the scale bar in top-left corner of the map - +[Ornaments](../examples/Map/Ornaments) ### surfaceView @@ -272,7 +272,7 @@ when embedded into a scroll view [`mapbox` (v10) implementation only] Set map's label locale, e.g. { "locale": "es" } will localize labels to Spanish, { "locale": "current" } will localize labels to system locale. - +[Localize Labels](../examples/Map/LocalizeLabels) ### gestureSettings @@ -311,7 +311,7 @@ func Map press listener, gets called when a user presses the map *signature:*`(feature:GeoJSON.Feature) => void` - +[Show Click](../examples/Map/ShowClick) ### onLongPress @@ -335,7 +335,7 @@ This event is triggered whenever the currently displayed map region is about to @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds *signature:*`(feature:GeoJSON.Feature) => void` - +[Show Region Did Change](../examples/Map/ShowRegionDidChange) ### onRegionIsChanging @@ -347,7 +347,7 @@ This event is triggered whenever the currently displayed map region is changing. @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds *signature:*`(feature:GeoJSON.Feature) => void` - +[Show Region Did Change](../examples/Map/ShowRegionDidChange) ### onRegionDidChange @@ -359,7 +359,7 @@ This event is triggered whenever the currently displayed map region finished cha @param {PointFeature} feature - The geojson point feature at the camera center, properties contains zoomLevel, visibleBounds *signature:*`(feature:GeoJSON.Feature) => void` - +[Show Region Did Change](../examples/Map/ShowRegionDidChange) ### onCameraChanged diff --git a/docs/OfflineManager.md b/docs/OfflineManager.md index 39ad8ecf6..974dae12f 100644 --- a/docs/OfflineManager.md +++ b/docs/OfflineManager.md @@ -42,7 +42,7 @@ await Mapbox.offlineManager.createPack({ ``` -### invalidatePack(name) +[Offline Example](../examples/Map/OfflineExample)### invalidatePack(name) Invalidates the specified offline pack. This method checks that the tiles in the specified offline pack match those from the server. Local tiles that do not match the latest version on the server are updated.This is more efficient than deleting the offline pack and downloading it again. If the data stored locally matches that on the server, new data will not be downloaded. @@ -170,7 +170,7 @@ const offlinePacks = await Mapbox.offlineManager.getPacks(); ``` -### getPack(name) +[Offline Example](../examples/Map/OfflineExample)### getPack(name) Retrieves an offline pack that is stored in the database by name. @@ -186,7 +186,7 @@ const offlinePack = await Mapbox.offlineManager.getPack(); ``` -### mergeOfflineRegions(path) +[Offline Example](../examples/Map/OfflineExample)### mergeOfflineRegions(path) Sideloads offline db diff --git a/docs/ShapeSource.md b/docs/ShapeSource.md index f9314dcce..66cd0e13b 100644 --- a/docs/ShapeSource.md +++ b/docs/ShapeSource.md @@ -40,7 +40,7 @@ string ``` An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. - +[Dynamic URL](../examples/Map/DynamicUrl) ### shape @@ -163,7 +163,7 @@ if that layer has a higher z-index than another source layers @return void *signature:*`(event:OnPressEvent) => void` -[Custom Icon](../examples/SymbolCircleLayer/CustomIcon) +[Custom Icon](../examples/SymbolCircleLayer/CustomIcon), [Custom Icon Native Asset](../examples/SymbolCircleLayer/CustomIconNativeAsset) ### hitbox @@ -252,4 +252,4 @@ const collection = await shapeSource.getClusterChildren(clusterId); | `event` | `NativeSyntheticEvent` | `Yes` | undefined | -[Custom Icon](../examples/SymbolCircleLayer/CustomIcon) +[Custom Icon](../examples/SymbolCircleLayer/CustomIcon), [Custom Icon Native Asset](../examples/SymbolCircleLayer/CustomIconNativeAsset) diff --git a/docs/Style.md b/docs/Style.md index a03c10ce0..9f48b09f8 100644 --- a/docs/Style.md +++ b/docs/Style.md @@ -23,7 +23,7 @@ MapboxJSON | URL _required_ A JSON object conforming to the schema described in the Mapbox Style Specification , or a URL to such JSON. - +[Style JSON](../examples/Map/StyleJson) diff --git a/docs/UserLocation.md b/docs/UserLocation.md index 36990cd53..128980c32 100644 --- a/docs/UserLocation.md +++ b/docs/UserLocation.md @@ -65,7 +65,7 @@ func Callback that is triggered on location icon press *signature:*`() => void` - +[Show Map](../examples/Map/ShowMap) ### onUpdate diff --git a/docs/examples.json b/docs/examples.json index 9d6800e9b..b5bfa2d81 100644 --- a/docs/examples.json +++ b/docs/examples.json @@ -21,6 +21,22 @@ "relPath": "SymbolCircleLayer/CustomIcon.tsx", "name": "CustomIcon" }, + { + "metadata": { + "title": "Custom Icon Native Asset", + "tags": [ + "ShapeSource", + "ShapeSource#onPress", + "SymbolLayer", + "Images", + "SymbolLayer#iconImage" + ], + "docs": "\nRenders a symbol layer with custom icon (native asset) defined using the Images component. Clicking a location on a map add a new icon.\n" + }, + "fullPath": "example/src/examples/SymbolCircleLayer/CustomIconNativeAsset.tsx", + "relPath": "SymbolCircleLayer/CustomIconNativeAsset.tsx", + "name": "CustomIconNativeAsset" + }, { "metadata": { "title": "Data driven circle colors", @@ -162,5 +178,221 @@ "name": "UserLocationUpdates" } ] + }, + { + "groupName": "Map", + "metadata": { + "title": "Map" + }, + "examples": [ + { + "metadata": { + "title": "Change Layer Color", + "tags": [ + "FillLayer#existing", + "FillLayer#fillColor" + ], + "docs": "\nChange style of a layer part of the map on the fly.\n" + }, + "fullPath": "example/src/examples/Map/ChangeLayerColor.js", + "relPath": "Map/ChangeLayerColor.js", + "name": "ChangeLayerColor" + }, + { + "metadata": { + "title": "Change Offline Region", + "tags": [ + "offlineManage#createPack" + ], + "docs": "\nCreates offline pack and montiors them\n" + }, + "fullPath": "example/src/examples/Map/CreateOfflineRegion.js", + "relPath": "Map/CreateOfflineRegion.js", + "name": "CreateOfflineRegion" + }, + { + "metadata": { + "title": "Dynamic URL", + "tags": [ + "ShapeSource#url" + ], + "docs": "\nChange shape source URL on press of the bubble.\n" + }, + "fullPath": "example/src/examples/Map/DynamicUrl.tsx", + "relPath": "Map/DynamicUrl.tsx", + "name": "DynamicUrl" + }, + { + "metadata": { + "title": "Localize Labels", + "tags": [ + "MapView#localizeLabels" + ], + "docs": "\nLocalize labels to a specific locale(es).\n" + }, + "fullPath": "example/src/examples/Map/LocalizeLabels.tsx", + "relPath": "Map/LocalizeLabels.tsx", + "name": "LocalizeLabels" + }, + { + "metadata": { + "title": "Map and React Navigation", + "tags": [ + "MapView" + ], + "docs": "\nDemonstrates various ways to embedd map via (Navigation, Page, modal, etc)\n" + }, + "fullPath": "example/src/examples/Map/MapAndRNNavigation.js", + "relPath": "Map/MapAndRNNavigation.js", + "name": "MapAndRNNavigation" + }, + { + "metadata": { + "title": "Offline Example", + "tags": [ + "offlineManager#createPack", + "offlineManager#getPack", + "offlineManager#getPacks" + ], + "docs": "\nDemonstates basic use of offlineManager api.\n" + }, + "fullPath": "example/src/examples/Map/OfflineExample.tsx", + "relPath": "Map/OfflineExample.tsx", + "name": "OfflineExample" + }, + { + "metadata": { + "title": "Ornaments", + "tags": [ + "MapView#logoEnabled", + "MapView#logoPosition", + "MapView#attributionEnabled", + "MapView#attributionPosition", + "MapView#compassEnabled", + "MapView#compassPosition", + "MapView#compassImage", + "MapView#compassFadeWhenNorth", + "MapView#scaleBarEnabled", + "MapView#scaleBarPosition" + ], + "docs": "\nCustomize ornaments of the map(logo, compass, scalebar, attribution)\n" + }, + "fullPath": "example/src/examples/Map/Ornaments.tsx", + "relPath": "Map/Ornaments.tsx", + "name": "Ornaments" + }, + { + "metadata": { + "title": "Point in Map View", + "tags": [ + "MapView#pointInMapView" + ], + "docs": "\nConverts a coordinate to a point in the current view.\n" + }, + "fullPath": "example/src/examples/Map/PointInMapView.js", + "relPath": "Map/PointInMapView.js", + "name": "PointInMapView" + }, + { + "metadata": { + "title": "Show and hide layer", + "tags": [ + "FillLayer#existing", + "LineLayer#existing", + "FillLayer#visibility", + "FillLayer#visibility" + ], + "docs": "\nChanges visibility of layers part of the map\n" + }, + "fullPath": "example/src/examples/Map/ShowAndHideLayer.js", + "relPath": "Map/ShowAndHideLayer.js", + "name": "ShowAndHideLayer" + }, + { + "metadata": { + "title": "Show Click", + "tags": [ + "MapView#onPress" + ], + "docs": "\nDemonstates onPress event and how to get the screen point of the click.\n" + }, + "fullPath": "example/src/examples/Map/ShowClick.js", + "relPath": "Map/ShowClick.js", + "name": "ShowClick" + }, + { + "metadata": { + "title": "Show Map", + "tags": [ + "Camera#followZoomLevel", + "UserLocation#onPress" + ], + "docs": "\nShows a map with the user location annotation enabled, and on press of the user location annotation, an alert is shown.\n" + }, + "fullPath": "example/src/examples/Map/ShowMap.tsx", + "relPath": "Map/ShowMap.tsx", + "name": "ShowMap" + }, + { + "metadata": { + "title": "Show Map Local Style", + "tags": [], + "docs": "\nCustomize ornaments of the map(logo, compass, scalebar, attribution)\n" + }, + "fullPath": "example/src/examples/Map/ShowMapLocalStyle.tsx", + "relPath": "Map/ShowMapLocalStyle.tsx", + "name": "ShowMapLocalStyle" + }, + { + "metadata": { + "title": "Show Region Did Change", + "tags": [ + "MapView#onRegionWillChange", + "MapView#onRegionIsChanging", + "MapView#onRegionDidChange" + ], + "docs": "\nDemonstates MapView region change events.\n" + }, + "fullPath": "example/src/examples/Map/ShowRegionDidChange.js", + "relPath": "Map/ShowRegionDidChange.js", + "name": "ShowRegionDidChange" + }, + { + "metadata": { + "title": "Source Layer Visibility", + "tags": [ + "MapView#setSoruceVisibility" + ], + "docs": "\nChanges visibility of layers using a source in the map\n" + }, + "fullPath": "example/src/examples/Map/SourceLayerVisibility.js", + "relPath": "Map/SourceLayerVisibility.js", + "name": "SourceLayerVisibility" + }, + { + "metadata": { + "title": "Style JSON", + "tags": [ + "Style#json" + ], + "docs": "\nChange style of a MapView on the fly.\n" + }, + "fullPath": "example/src/examples/Map/StyleJson.js", + "relPath": "Map/StyleJson.js", + "name": "StyleJson" + }, + { + "metadata": { + "title": "Two Map Views", + "tags": [ + "MapView" + ], + "docs": "\nDisplay two map views side by side\n" + }, + "fullPath": "example/src/examples/Map/TwoByTwo.js", + "relPath": "Map/TwoByTwo.js", + "name": "TwoByTwo" + } + ] } ] \ No newline at end of file diff --git a/example/__tests__/dumpExamplesJson.ts b/example/__tests__/dumpExamplesJson.ts index c90a3a4e1..4d2f93caf 100644 --- a/example/__tests__/dumpExamplesJson.ts +++ b/example/__tests__/dumpExamplesJson.ts @@ -6,6 +6,7 @@ import fs from 'fs'; import * as SymbolCircleLayer from '../src/examples/SymbolCircleLayer'; import * as UserLocation from '../src/examples/UserLocation'; +import * as Map from '../src/examples/Map'; import type { Examples, Example, @@ -22,6 +23,7 @@ jest.mock('../src/assets/scale-test-icon4.png', () => null, { const allTests = { SymbolCircleLayer, UserLocation, + Map, } as const; const relExamplesPath = path.join('example', 'src', 'examples'); diff --git a/example/jest.config.ts b/example/jest.config.ts index f47a75e48..af20f182d 100644 --- a/example/jest.config.ts +++ b/example/jest.config.ts @@ -1,17 +1,9 @@ import type { Config } from 'jest'; -function rnfix(path: string): string { - return path.replace('@rnmapbox/maps', '/..'); -} - const config: Config = { - verbose: true, preset: 'react-native', - roots: ['__tests__/'], - setupFilesAfterEnv: [rnfix('@rnmapbox/maps/setup-jest')], - moduleNameMapper: { - '@rnmapbox/maps': '/..', - }, + setupFiles: ['./jest.setup.ts'], + verbose: true, }; export default config; diff --git a/example/jest.setup.ts b/example/jest.setup.ts new file mode 100644 index 000000000..b57138fd8 --- /dev/null +++ b/example/jest.setup.ts @@ -0,0 +1,5 @@ +jest.mock('@rnmapbox/maps', () => ({ + StyleURL: { + Satellite: 'mapbox://styles/mapbox/satellite-v9', + }, +})); diff --git a/example/src/examples/Map/ChangeLayerColor.js b/example/src/examples/Map/ChangeLayerColor.js index 5ae245a50..5cfeddb8f 100644 --- a/example/src/examples/Map/ChangeLayerColor.js +++ b/example/src/examples/Map/ChangeLayerColor.js @@ -1,9 +1,7 @@ import React from 'react'; import { Text } from 'react-native'; -import MapboxGL from '@rnmapbox/maps'; +import { MapView, FillLayer, Camera } from '@rnmapbox/maps'; -import BaseExamplePropTypes from '../common/BaseExamplePropTypes'; -import Page from '../common/Page'; import Bubble from '../common/Bubble'; const defaultCamera = { @@ -16,10 +14,6 @@ const styles = { }; class ChangeLayerColor extends React.Component { - static propTypes = { - ...BaseExamplePropTypes, - }; - state = { fillColor: '', }; @@ -32,23 +26,35 @@ class ChangeLayerColor extends React.Component { render() { const { fillColor } = this.state; return ( - - + (this._map = c)} onPress={this.onPress} style={styles.mapView} > - + {!!fillColor && ( - + )} - + Paint Water - + ); } } export default ChangeLayerColor; + +/* end-example-doc */ + +/** @type ExampleWithMetadata['metadata'] */ +const metadata = { + title: 'Change Layer Color', + tags: ['FillLayer#existing', 'FillLayer#fillColor'], + docs: ` +Change style of a layer part of the map on the fly. +`, +}; +ChangeLayerColor.metadata = metadata; diff --git a/example/src/examples/Map/CreateOfflineRegion.js b/example/src/examples/Map/CreateOfflineRegion.js index 3d8a7809f..7b6c22075 100755 --- a/example/src/examples/Map/CreateOfflineRegion.js +++ b/example/src/examples/Map/CreateOfflineRegion.js @@ -12,8 +12,6 @@ import Mapbox, { offlineManager, MapView, Camera } from '@rnmapbox/maps'; import geoViewport from '@mapbox/geo-viewport'; import sheet from '../../styles/sheet'; -import BaseExamplePropTypes from '../common/BaseExamplePropTypes'; -import Page from '../common/Page'; import Bubble from '../common/Bubble'; const CENTER_COORD = [-73.970895, 40.723279]; @@ -40,10 +38,6 @@ const styles = StyleSheet.create({ }); class CreateOfflineRegion extends React.Component { - static propTypes = { - ...BaseExamplePropTypes, - }; - constructor(props) { super(props); @@ -154,7 +148,7 @@ class CreateOfflineRegion extends React.Component { const { offlineRegionStatus } = this.state; return ( - + <> (this._map = c)} onPress={this.onPress} @@ -211,9 +205,21 @@ class CreateOfflineRegion extends React.Component { ) : null} - + ); } } export default CreateOfflineRegion; + +/* end-example-doc */ + +/** @type ExampleWithMetadata['metadata'] */ +const metadata = { + title: 'Change Offline Region', + tags: ['offlineManage#createPack'], + docs: ` +Creates offline pack and montiors them +`, +}; +CreateOfflineRegion.metadata = metadata; diff --git a/example/src/examples/Map/DynamicUrl.tsx b/example/src/examples/Map/DynamicUrl.tsx index d18cd2c32..4ce431885 100644 --- a/example/src/examples/Map/DynamicUrl.tsx +++ b/example/src/examples/Map/DynamicUrl.tsx @@ -8,10 +8,8 @@ import { StyleURL, } from '@rnmapbox/maps'; -import sheet from '../../styles/sheet'; -import { BaseExampleProps } from '../common/BaseExamplePropTypes'; -import Page from '../common/Page'; import Bubble from '../common/Bubble'; +import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc const randomCountries = [ { @@ -36,7 +34,9 @@ const randomCountries = [ }, ]; -const DynamicUrl = (props: BaseExampleProps) => { +const styles = { matchParent: { flex: 1 } }; + +const DynamicUrl = () => { const [country, setCountry] = useState(randomCountries[0]); const handleUpdate = () => { @@ -46,10 +46,10 @@ const DynamicUrl = (props: BaseExampleProps) => { }; return ( - + <> { Update country (active: {country.id}) - + ); }; export default DynamicUrl; + +/* end-example-doc */ + +const metadata: ExampleWithMetadata['metadata'] = { + title: 'Dynamic URL', + tags: ['ShapeSource#url'], + docs: ` +Change shape source URL on press of the bubble. +`, +}; +DynamicUrl.metadata = metadata; diff --git a/example/src/examples/Map/LocalizeLabels.tsx b/example/src/examples/Map/LocalizeLabels.tsx index 76d1043e5..a6d1395cd 100644 --- a/example/src/examples/Map/LocalizeLabels.tsx +++ b/example/src/examples/Map/LocalizeLabels.tsx @@ -1,19 +1,29 @@ import React from 'react'; import { Camera, MapView } from '@rnmapbox/maps'; -import Page from '../common/Page'; -import { type BaseExampleProps } from '../common/BaseExamplePropTypes'; - const CENTER_COORD = [-74.00597, 40.71427]; -const LocalizeLabels = (props: BaseExampleProps) => { +import { ExampleWithMetadata } from '../common/ExampleMetadata'; // exclude-from-doc + +const LocalizeLabels = () => { return ( - - - - - + + + ); }; export default LocalizeLabels; + +/* end-example-doc */ + +const metadata: ExampleWithMetadata['metadata'] = { + title: 'Localize Labels', + tags: ['MapView#localizeLabels'], + docs: ` +Localize labels to a specific locale(es). +`, +}; +LocalizeLabels.metadata = metadata; diff --git a/example/src/examples/Map/MapAndRNNavigation.js b/example/src/examples/Map/MapAndRNNavigation.js index 092adb72c..842862b7d 100644 --- a/example/src/examples/Map/MapAndRNNavigation.js +++ b/example/src/examples/Map/MapAndRNNavigation.js @@ -1,93 +1,16 @@ import React, { useState } from 'react'; -import { - Button, - Image, - Pressable, - View, - StyleSheet, - Modal, - Text, - SafeAreaView, -} from 'react-native'; -import MapboxGL, { - MapView, - ShapeSource, - SymbolLayer, - CircleLayer, - UserLocation, - Camera, -} from '@rnmapbox/maps'; +import { Button, Modal, Text, SafeAreaView } from 'react-native'; +import { MapView, UserLocation, Camera } from '@rnmapbox/maps'; -import Page from '../common/Page'; - -const styles = { - mapView: { flex: 1 }, - circleLayer: { - circleRadiusTransition: { duration: 5000, delay: 0 }, - circleColor: '#ff0000', - }, -}; - -const features = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - id: 'a-feature', - properties: { - icon: 'example', - text: 'example-icon-and-label', - }, - geometry: { - type: 'Point', - coordinates: [-74.00597, 40.71427], - }, - }, - { - type: 'Feature', - id: 'b-feature', - properties: { - text: 'just-label', - }, - geometry: { - type: 'Point', - coordinates: [-74.001097, 40.71527], - }, - }, - { - type: 'Feature', - id: 'c-feature', - properties: { - icon: 'example', - }, - geometry: { - type: 'Point', - coordinates: [-74.00697, 40.72427], - }, - }, - ], -}; - -export default function MapAndNavigation({ - navigation, - label, - onDismissExample, -}) { +/** + * @param {ItempProps['navigation']} navigation + */ +export default function MapAndNavigation({ navigation }) { const [modalVisible, setModalVisible] = useState(false); const [showMap, setShowMap] = useState(false); - const [radius, setRadius] = useState(20); - - const circleLayerStyle = { - ...styles.circleLayer, - ...{ circleRadius: radius }, - }; - - console.log('+++ modalVisible', modalVisible); - console.log('### rendering...'); return ( - -