feat: add react-navigation (MAPCO-11773)

config-overrides.js

@@ -20,8 +20,17 @@ module.exports = function override(config, env) {
     ...config.resolve.alias,
     'react-dnd': path.resolve(__dirname, './node_modules/react-dnd'),
     'react-dnd-html5-backend': path.resolve(__dirname, './node_modules/react-dnd-html5-backend'),
+    'react-native$': 'react-native-web',
   };
 
+  config.resolve.extensions = [
+    '.web.js',
+    '.web.jsx',
+    '.web.ts',
+    '.web.tsx',
+    ...(config.resolve.extensions || []),
+  ];
+
   config.plugins.push(
     new webpack.ProvidePlugin({
       process: 'process/browser',

package.json

@@ -96,6 +96,8 @@
     "@map-colonies/static-assets": "^0.5.1",
     "@map-colonies/types": "1.6.0",
     "@material-ui/core": "^4.11.0",
+    "@react-navigation/native": "^7.4.1",
+    "@react-navigation/stack": "^7.11.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -182,6 +184,8 @@
     "react-hook-form": "6.15.8",
     "react-intl": "5.7.1",
     "react-loading-skeleton": "^3.5.0",
+    "react-native-safe-area-context": "^5.10.0",
+    "react-native-web": "^0.21.2",
     "react-scripts": "5.0.1",
     "react-sortable-tree": "^2.8.0",
     "react-virtualized": "^9.22.5",

src/common/navigation/react-navigation.proxy.ts

@@ -0,0 +1,3 @@
+// Single import point for @react-navigation/*. No other file should import from those packages directly.
+export { NavigationIndependentTree, NavigationContainer } from '@react-navigation/native';
+export { createStackNavigator } from '@react-navigation/stack';

src/discrete-layer/navigation/base-maps-router.component.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box } from '@map-colonies/react-components';
+import {
+  NavigationIndependentTree,
+  NavigationContainer,
+  createStackNavigator,
+} from '../../common/navigation/react-navigation.proxy';
+
+// TODO: replace `undefined` params once BaseMapsListScreen / EditBaseMapScreen / AddLayerScreen land.
+type BaseMapsStackParamList = {
+  BaseMapsList: undefined;
+  EditBaseMap: undefined;
+  AddLayer: undefined;
+};
+
+const Stack = createStackNavigator<BaseMapsStackParamList>();
+
+export const BasemapsRouter: React.FC = () => {
+  return (
+    <NavigationIndependentTree>
+      <NavigationContainer documentTitle={{ enabled: false }}>
+        <Stack.Navigator initialRouteName="BaseMapsList" screenOptions={{ headerShown: false }}>
+          <Stack.Screen
+            name="BaseMapsList"
+            // component={BaseMapsListScreen}
+            component={() => <Box>PLACEHOLDER_BASEMAPS</Box>}
+          />
+          <Stack.Screen
+            name="EditBaseMap"
+            // component={EditBaseMapScreen}
+            component={() => <Box>PLACEHOLDER_EDIT_BASEMAP</Box>}
+          />
+          <Stack.Screen
+            name="AddLayer"
+            // component={AddLayerScreen}
+            component={() => <Box>PLACEHOLDER_ADD_LAYER</Box>}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </NavigationIndependentTree>
+  );
+};