feat: configure packages/examples

packages/examples/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@maplibre-react-native/examples",
+  "version": "1.0.0",
+  "private": true,
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "react-native": "src/index.js",
+  "source": "src/index.js",
+  "files": [
+    "src",
+    "!**/__tests__"
+  ],
+  "peerDependencies": {
+    "@maplibre/maplibre-react-native": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

packages/examples/src/examples/index.js

@@ -0,0 +1,60 @@
+// ANIMATIONS
+export { default as AnimatedLine } from './Animations/AnimatedLine';
+export { default as DriveTheLine } from './Animations/DriveTheLine';
+// ANNOTATIONS
+export { default as CustomCallout } from './Annotations/CustomCallout';
+export { default as Heatmap } from './Annotations/Heatmap';
+export { default as MarkerView } from './Annotations/MarkerView';
+export { default as ShowPointAnnotation } from './Annotations/ShowPointAnnotation';
+export { default as PointAnnotationAnchors } from './Annotations/PointAnnotationAnchors';
+// CAMERA
+export { default as CompassView } from './Camera/CompassView';
+export { default as Fit } from './Camera/Fit';
+export { default as FlyTo } from './Camera/FlyTo';
+export { default as GetCenter } from './Camera/GetCenter';
+export { default as GetZoom } from './Camera/GetZoom';
+export { default as RestrictMapBounds } from './Camera/RestrictMapBounds';
+export { default as SetHeading } from './Camera/SetHeading';
+export { default as SetPitch } from './Camera/SetPitch';
+export { default as SetUserTrackingModes } from './Camera/SetUserTrackingModes';
+export { default as TakeSnapshot } from './Camera/TakeSnapshot';
+export { default as TakeSnapshotWithMap } from './Camera/TakeSnapshotWithMap';
+export { default as YoYo } from './Camera/YoYo';
+// FILLRASTERLAYER
+export { default as ChoroplethLayerByZoomLevel } from './FillRasterLayer/ChoroplethLayerByZoomLevel';
+export { default as CustomVectorSource } from './FillRasterLayer/CustomVectorSource';
+export { default as GeoJSONSource } from './FillRasterLayer/GeoJSONSource';
+export { default as ImageOverlay } from './FillRasterLayer/ImageOverlay';
+export { default as IndoorBuilding } from './FillRasterLayer/IndoorBuilding';
+export { default as QueryAtPoint } from './FillRasterLayer/QueryAtPoint';
+export { default as QueryWithRect } from './FillRasterLayer/QueryWithRect';
+export { default as WatercolorRasterTiles } from './FillRasterLayer/WatercolorRasterTiles';
+// LINE LAYER
+export { default as GradientLine } from './LineLayer/GradientLine';
+// MAP
+export { default as ChangeLayerColor } from './Map/ChangeLayerColor';
+export { default as CreateOfflineRegion } from './Map/CreateOfflineRegion';
+export { default as PointInMapView } from './Map/PointInMapView';
+export { default as ShowAndHideLayer } from './Map/ShowAndHideLayer';
+export { default as ShowClick } from './Map/ShowClick';
+export { default as ShowMap } from './Map/ShowMap';
+export { default as ShowMapLocalStyle } from './Map/ShowMapLocalStyle';
+export { default as ShowRegionDidChange } from './Map/ShowRegionDidChange';
+export { default as SourceLayerVisibility } from './Map/SourceLayerVisibility';
+export { default as StyleJson } from './Map/StyleJson';
+export { default as TwoByTwo } from './Map/TwoByTwo';
+// SYMBOLCIRCLELAYER
+export { default as CustomIcon } from './SymbolCircleLayer/CustomIcon';
+export { default as DataDrivenCircleColors } from './SymbolCircleLayer/DataDrivenCircleColors';
+export { default as EarthQuakes } from './SymbolCircleLayer/EarthQuakes';
+export { default as ShapeSourceIcon } from './SymbolCircleLayer/ShapeSourceIcon';
+// USERLOCATION
+export { default as SetDisplacement } from './UserLocation/SetDisplacement';
+export { default as SetTintColor } from './UserLocation/SetTintColor';
+export { default as SetUserLocationRenderMode } from './UserLocation/SetUserLocationRenderMode';
+export { default as SetUserLocationVerticalAlignment } from './UserLocation/SetUserLocationVerticalAlignment';
+export { default as UserLocationChange } from './UserLocation/UserLocationChange';
+export { default as SetAndroidPreferredFramesPerSecond } from './UserLocation/SetAndroidPreferredFramesPerSecond';
+// MISC
+export { default as BugReportPage } from './BugReportPage';
+export { default as CacheManagement } from './CacheManagement';

packages/examples/src/index.js

@@ -0,0 +1,4 @@
+export * from './examples';
+export { default as sheet } from './styles/sheet';
+export { default as colors } from './styles/colors';
+export * from './utils';

packages/examples/src/scenes/Examples.js

@@ -5,8 +5,9 @@ import {NavigationContainer} from '@react-navigation/native';
 import {createStackNavigator, TransitionPresets} from '@react-navigation/stack';
 import PropTypes from 'prop-types';
 
-import { MapHeader, sheet } from '@maplibre-react-native/examples';
-import * as MaplibreExamples from '@maplibre-react-native/examples';
+import * as MaplibreExamples from '../examples';
+import { default as MapHeader } from '../examples/common/MapHeader'
+import { default as sheet } from '../styles/sheet'
 
 const styles = StyleSheet.create({
   exampleList: {
@@ -129,7 +130,7 @@ function FlatMapExamples(example, flattenedExamples = []) {
   if (example instanceof ExampleGroup) {
     return [
       ...flattenedExamples,
-      ...example.items.flatMap(e => MaplibreExamples.FlatMapExamples(e)),
+      ...example.items.flatMap(e => FlatMapExamples(e)),
       example,
     ];
   }

packages/react-native-app/metro.config.js

@@ -28,6 +28,16 @@ function withMonorepoPaths(config) {
 
 const config = {
   projectRoot: projectRoot,
+  watchFolders: [
+    path.resolve(__dirname, '../../assets'),
+    path.resolve(__dirname, '../../javascript'),
+    path.resolve(__dirname, '../examples'),
+  ],
+  resolver: {
+    extraNodeModules: new Proxy({}, {
+      get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
+    }),
+  },
   transformer: {
     getTransformOptions: async () => ({
       transform: {

packages/react-native-app/package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
+    "@maplibre-react-native/examples": "*",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/stack": "^6.3.25",

packages/react-native-app/src/App.js

@@ -3,11 +3,10 @@ import MapLibreGL from '@maplibre/maplibre-react-native';
 import {StyleSheet, Text, View, LogBox, SafeAreaView} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
-import sheet from './styles/sheet';
-import colors from './styles/colors';
-import {IS_ANDROID} from './utils';
-import Home from './scenes/Examples';
+import { sheet, colors } from '@maplibre-react-native/examples';
+import { default as Home } from '@maplibre-react-native/examples/src/scenes/Examples';
 
+const IS_ANDROID = true;
 LogBox.ignoreLogs([
   'Warning: isMounted(...) is deprecated',
   'Module RCTImageLoader',

yarn.lock

@@ -2839,6 +2839,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@maplibre-react-native/examples@npm:*, @maplibre-react-native/examples@workspace:packages/examples":
+  version: 0.0.0-use.local
+  resolution: "@maplibre-react-native/examples@workspace:packages/examples"
+  peerDependencies:
+    "@maplibre/maplibre-react-native": "*"
+    react: "*"
+    react-native: "*"
+  languageName: unknown
+  linkType: soft
+
 "@maplibre-react-native/react-native-app@workspace:packages/react-native-app":
   version: 0.0.0-use.local
   resolution: "@maplibre-react-native/react-native-app@workspace:packages/react-native-app"
@@ -2848,6 +2858,7 @@ __metadata:
     "@babel/preset-typescript": "npm:7.22.5"
     "@babel/runtime": "npm:^7.23.1"
     "@mapbox/geo-viewport": "npm:^0.5.0"
+    "@maplibre-react-native/examples": "npm:*"
     "@react-native-masked-view/masked-view": "npm:^0.3.1"
     "@react-native/metro-config": "npm:^0.75.2"
     "@react-navigation/native": "npm:^6.1.8"