feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/BorderBox.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+const View = require('../Components/View/View');
+const React = require('react');
+
+class BorderBox extends React.Component<$FlowFixMeProps> {
+  render(): $FlowFixMe | React.Node {
+    const box = this.props.box;
+    if (!box) {
+      return this.props.children;
+    }
+    const style = {
+      borderTopWidth: box.top,
+      borderBottomWidth: box.bottom,
+      borderLeftWidth: box.left,
+      borderRightWidth: box.right,
+    };
+    return <View style={[style, this.props.style]}>{this.props.children}</View>;
+  }
+}
+
+module.exports = BorderBox;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/BoxInspector.js

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
+
+const blank = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+class BoxInspector extends React.Component<$FlowFixMeProps> {
+  render(): React.Node {
+    const frame = this.props.frame;
+    const style = this.props.style;
+    const margin = (style && resolveBoxStyle('margin', style)) || blank;
+    const padding = (style && resolveBoxStyle('padding', style)) || blank;
+    return (
+      <BoxContainer title="margin" titleStyle={styles.marginLabel} box={margin}>
+        <BoxContainer title="padding" box={padding}>
+          <View>
+            <Text style={styles.innerText}>
+              ({(frame.left || 0).toFixed(1)}, {(frame.top || 0).toFixed(1)})
+            </Text>
+            <Text style={styles.innerText}>
+              {(frame.width || 0).toFixed(1)} &times;{' '}
+              {(frame.height || 0).toFixed(1)}
+            </Text>
+          </View>
+        </BoxContainer>
+      </BoxContainer>
+    );
+  }
+}
+
+class BoxContainer extends React.Component<$FlowFixMeProps> {
+  render(): React.Node {
+    const box = this.props.box;
+    return (
+      <View style={styles.box}>
+        <View style={styles.row}>
+          {}
+          <Text style={[this.props.titleStyle, styles.label]}>
+            {this.props.title}
+          </Text>
+          <Text style={styles.boxText}>{box.top}</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.boxText}>{box.left}</Text>
+          {this.props.children}
+          <Text style={styles.boxText}>{box.right}</Text>
+        </View>
+        <Text style={styles.boxText}>{box.bottom}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  marginLabel: {
+    width: 60,
+  },
+  label: {
+    fontSize: 10,
+    color: 'rgb(255,100,0)',
+    marginLeft: 5,
+    flex: 1,
+    textAlign: 'left',
+    top: -3,
+  },
+  innerText: {
+    color: 'yellow',
+    fontSize: 12,
+    textAlign: 'center',
+    width: 70,
+  },
+  box: {
+    borderWidth: 1,
+    borderColor: 'grey',
+  },
+  boxText: {
+    color: 'white',
+    fontSize: 12,
+    marginHorizontal: 3,
+    marginVertical: 2,
+    textAlign: 'center',
+  },
+});
+
+module.exports = BoxInspector;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/ElementBox.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+const View = require('../Components/View/View');
+const flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Dimensions = require('../Utilities/Dimensions').default;
+const BorderBox = require('./BorderBox');
+const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
+
+class ElementBox extends React.Component<$FlowFixMeProps> {
+  render(): React.Node {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    const style = flattenStyle(this.props.style) || {};
+    let margin = resolveBoxStyle('margin', style);
+    let padding = resolveBoxStyle('padding', style);
+
+    const frameStyle = {...this.props.frame};
+    const contentStyle: {width: number, height: number} = {
+      width: this.props.frame.width,
+      height: this.props.frame.height,
+    };
+
+    if (margin != null) {
+      margin = resolveRelativeSizes(margin);
+
+      frameStyle.top -= margin.top;
+      frameStyle.left -= margin.left;
+      frameStyle.height += margin.top + margin.bottom;
+      frameStyle.width += margin.left + margin.right;
+
+      if (margin.top < 0) {
+        contentStyle.height += margin.top;
+      }
+      if (margin.bottom < 0) {
+        contentStyle.height += margin.bottom;
+      }
+      if (margin.left < 0) {
+        contentStyle.width += margin.left;
+      }
+      if (margin.right < 0) {
+        contentStyle.width += margin.right;
+      }
+    }
+
+    if (padding != null) {
+      padding = resolveRelativeSizes(padding);
+
+      contentStyle.width -= padding.left + padding.right;
+      contentStyle.height -= padding.top + padding.bottom;
+    }
+
+    return (
+      <View style={[styles.frame, frameStyle]} pointerEvents="none">
+        <BorderBox box={margin} style={styles.margin}>
+          <BorderBox box={padding} style={styles.padding}>
+            <View style={[styles.content, contentStyle]} />
+          </BorderBox>
+        </BorderBox>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  frame: {
+    position: 'absolute',
+  },
+  content: {
+    backgroundColor: 'rgba(200, 230, 255, 0.8)', // blue
+  },
+  padding: {
+    borderColor: 'rgba(77, 255, 0, 0.3)', // green
+  },
+  margin: {
+    borderColor: 'rgba(255, 132, 0, 0.3)', // orange
+  },
+});
+
+type Style = {
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+  ...
+};
+
+/**
+ * Resolves relative sizes (percentages and auto) in a style object.
+ *
+ * @param style the style to resolve
+ * @return a modified copy
+ */
+function resolveRelativeSizes(style: $ReadOnly<Style>): Style {
+  let resolvedStyle = {...style};
+  resolveSizeInPlace(resolvedStyle, 'top', 'height');
+  resolveSizeInPlace(resolvedStyle, 'right', 'width');
+  resolveSizeInPlace(resolvedStyle, 'bottom', 'height');
+  resolveSizeInPlace(resolvedStyle, 'left', 'width');
+  return resolvedStyle;
+}
+
+/**
+ * Resolves the given size of a style object in place.
+ *
+ * @param style the style object to modify
+ * @param direction the direction to resolve (e.g. 'top')
+ * @param dimension the window dimension that this direction belongs to (e.g. 'height')
+ */
+function resolveSizeInPlace(
+  style: Style,
+  direction: string,
+  dimension: string,
+) {
+  if (style[direction] !== null && typeof style[direction] === 'string') {
+    if (style[direction].indexOf('%') !== -1) {
+      // $FlowFixMe[prop-missing]
+      style[direction] =
+        (parseFloat(style[direction]) / 100.0) *
+        Dimensions.get('window')[dimension];
+    }
+    if (style[direction] === 'auto') {
+      // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
+      // $FlowFixMe[prop-missing]
+      style[direction] = 0;
+    }
+  }
+}
+
+module.exports = ElementBox;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/ElementProperties.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {InspectorData} from '../Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
+const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
+const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
+const View = require('../Components/View/View');
+const flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const mapWithSeparator = require('../Utilities/mapWithSeparator');
+const BoxInspector = require('./BoxInspector');
+const StyleInspector = require('./StyleInspector');
+const React = require('react');
+
+type Props = $ReadOnly<{|
+  hierarchy: ?InspectorData['hierarchy'],
+  style?: ?ViewStyleProp,
+  frame?: ?Object,
+  selection?: ?number,
+  setSelection?: number => mixed,
+|}>;
+
+class ElementProperties extends React.Component<Props> {
+  render(): React.Node {
+    const style = flattenStyle(this.props.style);
+    const selection = this.props.selection;
+
+    // Without the `TouchableWithoutFeedback`, taps on this inspector pane
+    // would change the inspected element to whatever is under the inspector
+    return (
+      <TouchableWithoutFeedback>
+        <View style={styles.info}>
+          <View style={styles.breadcrumb}>
+            {this.props.hierarchy != null &&
+              mapWithSeparator(
+                this.props.hierarchy,
+                (hierarchyItem, i): React.MixedElement => (
+                  <TouchableHighlight
+                    key={'item-' + i}
+                    style={[
+                      styles.breadItem,
+                      i === selection && styles.selected,
+                    ]}
+                    // $FlowFixMe[not-a-function] found when converting React.createClass to ES6
+                    onPress={() => this.props.setSelection(i)}>
+                    <Text style={styles.breadItemText}>
+                      {hierarchyItem.name}
+                    </Text>
+                  </TouchableHighlight>
+                ),
+                (i): React.MixedElement => (
+                  <Text key={'sep-' + i} style={styles.breadSep}>
+                    &#9656;
+                  </Text>
+                ),
+              )}
+          </View>
+          <View style={styles.row}>
+            <View style={styles.col}>
+              <StyleInspector style={style} />
+            </View>
+            {<BoxInspector style={style} frame={this.props.frame} />}
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  breadSep: {
+    fontSize: 8,
+    color: 'white',
+  },
+  breadcrumb: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'flex-start',
+    marginBottom: 5,
+  },
+  selected: {
+    borderColor: 'white',
+    borderRadius: 5,
+  },
+  breadItem: {
+    borderWidth: 1,
+    borderColor: 'transparent',
+    marginHorizontal: 2,
+  },
+  breadItemText: {
+    fontSize: 10,
+    color: 'white',
+    marginHorizontal: 5,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  col: {
+    flex: 1,
+  },
+  info: {
+    padding: 10,
+  },
+});
+
+module.exports = ElementProperties;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/Inspector.js

@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {
+  InspectorData,
+  TouchedViewDataAtPoint,
+} from '../Renderer/shims/ReactNativeTypes';
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+
+const View = require('../Components/View/View');
+const PressabilityDebug = require('../Pressability/PressabilityDebug');
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Dimensions = require('../Utilities/Dimensions').default;
+const Platform = require('../Utilities/Platform');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+const InspectorOverlay = require('./InspectorOverlay');
+const InspectorPanel = require('./InspectorPanel');
+const React = require('react');
+
+const {useState} = React;
+
+type PanelPosition = 'top' | 'bottom';
+type SelectedTab =
+  | 'elements-inspector'
+  | 'network-profiling'
+  | 'performance-profiling';
+
+export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
+export type InspectedElement = $ReadOnly<{
+  frame: InspectedElementFrame,
+  style?: ViewStyleProp,
+}>;
+export type ElementsHierarchy = InspectorData['hierarchy'];
+
+type Props = {
+  inspectedViewRef: InspectedViewRef,
+  onRequestRerenderApp: () => void,
+  reactDevToolsAgent?: ReactDevToolsAgent,
+};
+
+function Inspector({
+  inspectedViewRef,
+  onRequestRerenderApp,
+  reactDevToolsAgent,
+}: Props): React.Node {
+  const [selectedTab, setSelectedTab] =
+    useState<?SelectedTab>('elements-inspector');
+
+  const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
+  const [inspectedElement, setInspectedElement] =
+    useState<?InspectedElement>(null);
+  const [selectionIndex, setSelectionIndex] = useState<?number>(null);
+  const [elementsHierarchy, setElementsHierarchy] =
+    useState<?ElementsHierarchy>(null);
+
+  const setSelection = (i: number) => {
+    const hierarchyItem = elementsHierarchy?.[i];
+    if (hierarchyItem == null) {
+      return;
+    }
+
+    // We pass in findNodeHandle as the method is injected
+    const {measure, props} = hierarchyItem.getInspectorData(findNodeHandle);
+
+    measure((x, y, width, height, left, top) => {
+      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      setInspectedElement({
+        frame: {left, top, width, height},
+        style: props.style,
+      });
+
+      setSelectionIndex(i);
+    });
+  };
+
+  const onTouchPoint = (locationX: number, locationY: number) => {
+    const setTouchedViewData = (viewData: TouchedViewDataAtPoint) => {
+      const {
+        hierarchy,
+        props,
+        selectedIndex,
+        frame,
+        pointerY,
+        touchedViewTag,
+        closestInstance,
+      } = viewData;
+
+      // Sync the touched view with React DevTools.
+      // Note: This is Paper only. To support Fabric,
+      // DevTools needs to be updated to not rely on view tags.
+      if (reactDevToolsAgent) {
+        reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
+        if (closestInstance != null) {
+          reactDevToolsAgent.selectNode(closestInstance);
+        }
+      }
+
+      setPanelPosition(
+        pointerY > Dimensions.get('window').height / 2 ? 'top' : 'bottom',
+      );
+      setSelectionIndex(selectedIndex);
+      setElementsHierarchy(hierarchy);
+      // $FlowFixMe[incompatible-call] `props` from InspectorData are defined as <string, string> dictionary, which is incompatible with ViewStyleProp
+      setInspectedElement({
+        frame,
+        style: props.style,
+      });
+    };
+
+    getInspectorDataForViewAtPoint(
+      inspectedViewRef.current,
+      locationX,
+      locationY,
+      viewData => {
+        setTouchedViewData(viewData);
+        return false;
+      },
+    );
+  };
+
+  const setInspecting = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'elements-inspector' : null);
+    setInspectedElement(null);
+  };
+
+  const setPerfing = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'performance-profiling' : null);
+    setInspectedElement(null);
+  };
+
+  const setNetworking = (enabled: boolean) => {
+    setSelectedTab(enabled ? 'network-profiling' : null);
+    setInspectedElement(null);
+  };
+
+  const setTouchTargeting = (val: boolean) => {
+    PressabilityDebug.setEnabled(val);
+    onRequestRerenderApp();
+  };
+
+  const panelContainerStyle =
+    panelPosition === 'bottom'
+      ? {bottom: 0}
+      : Platform.select({ios: {top: 0}, default: {top: 0}});
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {selectedTab === 'elements-inspector' && (
+        <InspectorOverlay
+          inspected={inspectedElement}
+          onTouchPoint={onTouchPoint}
+        />
+      )}
+
+      <View style={[styles.panelContainer, panelContainerStyle]}>
+        <InspectorPanel
+          devtoolsIsOpen={!!reactDevToolsAgent}
+          inspecting={selectedTab === 'elements-inspector'}
+          perfing={selectedTab === 'performance-profiling'}
+          setPerfing={setPerfing}
+          setInspecting={setInspecting}
+          inspected={inspectedElement}
+          hierarchy={elementsHierarchy}
+          selection={selectionIndex}
+          setSelection={setSelection}
+          touchTargeting={PressabilityDebug.isEnabled()}
+          setTouchTargeting={setTouchTargeting}
+          networking={selectedTab === 'network-profiling'}
+          setNetworking={setNetworking}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    backgroundColor: 'transparent',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  panelContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+});
+
+module.exports = Inspector;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/InspectorOverlay.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {InspectedElement} from './Inspector';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const ElementBox = require('./ElementBox');
+const React = require('react');
+
+type Props = $ReadOnly<{|
+  inspected?: ?InspectedElement,
+  onTouchPoint: (locationX: number, locationY: number) => void,
+|}>;
+
+function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+  const findViewForTouchEvent = (e: PressEvent) => {
+    const {locationX, locationY} = e.nativeEvent.touches[0];
+
+    onTouchPoint(locationX, locationY);
+  };
+
+  const handleStartShouldSetResponder = (e: PressEvent): boolean => {
+    findViewForTouchEvent(e);
+    return true;
+  };
+
+  let content = null;
+  if (inspected) {
+    content = <ElementBox frame={inspected.frame} style={inspected.style} />;
+  }
+
+  return (
+    <View
+      onStartShouldSetResponder={handleStartShouldSetResponder}
+      onResponderMove={findViewForTouchEvent}
+      nativeID="inspectorOverlay" /* TODO: T68258846. */
+      style={styles.inspector}>
+      {content}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+module.exports = InspectorOverlay;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/InspectorPanel.js

@@ -0,0 +1,158 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {ElementsHierarchy, InspectedElement} from './Inspector';
+
+import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
+
+const ScrollView = require('../Components/ScrollView/ScrollView');
+const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const ElementProperties = require('./ElementProperties');
+const NetworkOverlay = require('./NetworkOverlay');
+const PerformanceOverlay = require('./PerformanceOverlay');
+const React = require('react');
+
+type Props = $ReadOnly<{|
+  devtoolsIsOpen: boolean,
+  inspecting: boolean,
+  setInspecting: (val: boolean) => void,
+  perfing: boolean,
+  setPerfing: (val: boolean) => void,
+  touchTargeting: boolean,
+  setTouchTargeting: (val: boolean) => void,
+  networking: boolean,
+  setNetworking: (val: boolean) => void,
+  hierarchy?: ?ElementsHierarchy,
+  selection?: ?number,
+  setSelection: number => mixed,
+  inspected?: ?InspectedElement,
+|}>;
+
+class InspectorPanel extends React.Component<Props> {
+  renderWaiting(): React.Node {
+    if (this.props.inspecting) {
+      return (
+        <Text style={styles.waitingText}>Tap something to inspect it</Text>
+      );
+    }
+    return <Text style={styles.waitingText}>Nothing is inspected</Text>;
+  }
+
+  render(): React.Node {
+    let contents;
+    if (this.props.inspected) {
+      contents = (
+        <ScrollView style={styles.properties}>
+          <ElementProperties
+            style={this.props.inspected.style}
+            frame={this.props.inspected.frame}
+            hierarchy={this.props.hierarchy}
+            selection={this.props.selection}
+            setSelection={this.props.setSelection}
+          />
+        </ScrollView>
+      );
+    } else if (this.props.perfing) {
+      contents = <PerformanceOverlay />;
+    } else if (this.props.networking) {
+      contents = <NetworkOverlay />;
+    } else {
+      contents = <View style={styles.waiting}>{this.renderWaiting()}</View>;
+    }
+    return (
+      <SafeAreaView style={styles.container}>
+        {!this.props.devtoolsIsOpen && contents}
+        <View style={styles.buttonRow}>
+          <InspectorPanelButton
+            title={'Inspect'}
+            pressed={this.props.inspecting}
+            onClick={this.props.setInspecting}
+          />
+          <InspectorPanelButton
+            title={'Perf'}
+            pressed={this.props.perfing}
+            onClick={this.props.setPerfing}
+          />
+          <InspectorPanelButton
+            title={'Network'}
+            pressed={this.props.networking}
+            onClick={this.props.setNetworking}
+          />
+          <InspectorPanelButton
+            title={'Touchables'}
+            pressed={this.props.touchTargeting}
+            onClick={this.props.setTouchTargeting}
+          />
+        </View>
+      </SafeAreaView>
+    );
+  }
+}
+
+type InspectorPanelButtonProps = $ReadOnly<{|
+  onClick: (val: boolean) => void,
+  pressed: boolean,
+  title: string,
+|}>;
+
+class InspectorPanelButton extends React.Component<InspectorPanelButtonProps> {
+  render(): React.Node {
+    return (
+      <TouchableHighlight
+        onPress={() => this.props.onClick(!this.props.pressed)}
+        style={[styles.button, this.props.pressed && styles.buttonPressed]}>
+        <Text style={styles.buttonText}>{this.props.title}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  buttonRow: {
+    flexDirection: 'row',
+  },
+  button: {
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    margin: 2,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonPressed: {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  buttonText: {
+    textAlign: 'center',
+    color: 'white',
+    margin: 5,
+  },
+  container: {
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  properties: {
+    height: 200,
+  },
+  waiting: {
+    height: 100,
+  },
+  waitingText: {
+    fontSize: 20,
+    textAlign: 'center',
+    marginVertical: 20,
+    color: 'white',
+  },
+});
+
+module.exports = InspectorPanel;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/NetworkOverlay.js

@@ -0,0 +1,607 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {RenderItemProps} from '@react-native/virtualized-lists';
+
+const ScrollView = require('../Components/ScrollView/ScrollView');
+const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
+const View = require('../Components/View/View');
+const FlatList = require('../Lists/FlatList');
+const XHRInterceptor = require('../Network/XHRInterceptor');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const WebSocketInterceptor = require('../WebSocket/WebSocketInterceptor');
+const React = require('react');
+
+const LISTVIEW_CELL_HEIGHT = 15;
+
+// Global id for the intercepted XMLHttpRequest objects.
+let nextXHRId = 0;
+
+type NetworkRequestInfo = {
+  id: number,
+  type?: string,
+  url?: string,
+  method?: string,
+  status?: number,
+  dataSent?: any,
+  responseContentType?: string,
+  responseSize?: number,
+  requestHeaders?: Object,
+  responseHeaders?: string,
+  response?: Object | string,
+  responseURL?: string,
+  responseType?: string,
+  timeout?: number,
+  closeReason?: string,
+  messages?: string,
+  serverClose?: Object,
+  serverError?: Object,
+  ...
+};
+
+type Props = $ReadOnly<{||}>;
+type State = {|
+  detailRowId: ?number,
+  requests: Array<NetworkRequestInfo>,
+|};
+
+function getStringByValue(value: any): string {
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  if (typeof value === 'string' && value.length > 500) {
+    return String(value)
+      .slice(0, 500)
+      .concat('\n***TRUNCATED TO 500 CHARACTERS***');
+  }
+  return value;
+}
+
+function getTypeShortName(type: any): string {
+  if (type === 'XMLHttpRequest') {
+    return 'XHR';
+  } else if (type === 'WebSocket') {
+    return 'WS';
+  }
+
+  return '';
+}
+
+function keyExtractor(request: NetworkRequestInfo): string {
+  return String(request.id);
+}
+
+/**
+ * Show all the intercepted network requests over the InspectorPanel.
+ */
+class NetworkOverlay extends React.Component<Props, State> {
+  _requestsListView: ?React.ElementRef<Class<FlatList<NetworkRequestInfo>>>;
+  _detailScrollView: ?React.ElementRef<typeof ScrollView>;
+
+  // Metrics are used to decide when if the request list should be sticky, and
+  // scroll to the bottom as new network requests come in, or if the user has
+  // intentionally scrolled away from the bottom - to instead flash the scroll bar
+  // and keep the current position
+  _requestsListViewScrollMetrics: {
+    contentLength: number,
+    offset: number,
+    visibleLength: number,
+  } = {
+    offset: 0,
+    visibleLength: 0,
+    contentLength: 0,
+  };
+
+  // Map of `socketId` -> `index in `this.state.requests`.
+  _socketIdMap: {[string]: number} = {};
+  // Map of `xhr._index` -> `index in `this.state.requests`.
+  _xhrIdMap: {[key: number]: number, ...} = {};
+
+  state: State = {
+    detailRowId: null,
+    requests: [],
+  };
+
+  _enableXHRInterception(): void {
+    if (XHRInterceptor.isInterceptorEnabled()) {
+      return;
+    }
+    // Show the XHR request item in listView as soon as it was opened.
+    XHRInterceptor.setOpenCallback((method, url, xhr) => {
+      // Generate a global id for each intercepted xhr object, add this id
+      // to the xhr object as a private `_index` property to identify it,
+      // so that we can distinguish different xhr objects in callbacks.
+      xhr._index = nextXHRId++;
+      const xhrIndex = this.state.requests.length;
+      this._xhrIdMap[xhr._index] = xhrIndex;
+
+      const _xhr: NetworkRequestInfo = {
+        id: xhrIndex,
+        type: 'XMLHttpRequest',
+        method: method,
+        url: url,
+      };
+      this.setState(
+        {
+          requests: this.state.requests.concat(_xhr),
+        },
+        this._indicateAdditionalRequests,
+      );
+    });
+
+    XHRInterceptor.setRequestHeaderCallback((header, value, xhr) => {
+      const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
+      if (xhrIndex === -1) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[xhrIndex];
+        if (!networkRequestInfo.requestHeaders) {
+          networkRequestInfo.requestHeaders = ({}: {[any]: any});
+        }
+        networkRequestInfo.requestHeaders[header] = value;
+        return {requests};
+      });
+    });
+
+    XHRInterceptor.setSendCallback((data, xhr) => {
+      const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
+      if (xhrIndex === -1) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[xhrIndex];
+        networkRequestInfo.dataSent = data;
+        return {requests};
+      });
+    });
+
+    XHRInterceptor.setHeaderReceivedCallback(
+      (type, size, responseHeaders, xhr) => {
+        const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
+        if (xhrIndex === -1) {
+          return;
+        }
+
+        this.setState(({requests}) => {
+          const networkRequestInfo = requests[xhrIndex];
+          networkRequestInfo.responseContentType = type;
+          networkRequestInfo.responseSize = size;
+          networkRequestInfo.responseHeaders = responseHeaders;
+          return {requests};
+        });
+      },
+    );
+
+    XHRInterceptor.setResponseCallback(
+      (status, timeout, response, responseURL, responseType, xhr) => {
+        const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
+        if (xhrIndex === -1) {
+          return;
+        }
+
+        this.setState(({requests}) => {
+          const networkRequestInfo = requests[xhrIndex];
+          networkRequestInfo.status = status;
+          networkRequestInfo.timeout = timeout;
+          networkRequestInfo.response = response;
+          networkRequestInfo.responseURL = responseURL;
+          networkRequestInfo.responseType = responseType;
+
+          return {requests};
+        });
+      },
+    );
+
+    // Fire above callbacks.
+    XHRInterceptor.enableInterception();
+  }
+
+  _enableWebSocketInterception(): void {
+    if (WebSocketInterceptor.isInterceptorEnabled()) {
+      return;
+    }
+    // Show the WebSocket request item in listView when 'connect' is called.
+    WebSocketInterceptor.setConnectCallback(
+      (url, protocols, options, socketId) => {
+        const socketIndex = this.state.requests.length;
+        this._socketIdMap[socketId] = socketIndex;
+        const _webSocket: NetworkRequestInfo = {
+          id: socketIndex,
+          type: 'WebSocket',
+          url: url,
+          protocols: protocols,
+        };
+        this.setState(
+          {
+            requests: this.state.requests.concat(_webSocket),
+          },
+          this._indicateAdditionalRequests,
+        );
+      },
+    );
+
+    WebSocketInterceptor.setCloseCallback(
+      (statusCode, closeReason, socketId) => {
+        const socketIndex = this._socketIdMap[socketId];
+        if (socketIndex === undefined) {
+          return;
+        }
+        if (statusCode !== null && closeReason !== null) {
+          this.setState(({requests}) => {
+            const networkRequestInfo = requests[socketIndex];
+            networkRequestInfo.status = statusCode;
+            networkRequestInfo.closeReason = closeReason;
+            return {requests};
+          });
+        }
+      },
+    );
+
+    WebSocketInterceptor.setSendCallback((data, socketId) => {
+      const socketIndex = this._socketIdMap[socketId];
+      if (socketIndex === undefined) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[socketIndex];
+
+        if (!networkRequestInfo.messages) {
+          networkRequestInfo.messages = '';
+        }
+        networkRequestInfo.messages += 'Sent: ' + JSON.stringify(data) + '\n';
+
+        return {requests};
+      });
+    });
+
+    WebSocketInterceptor.setOnMessageCallback((socketId, message) => {
+      const socketIndex = this._socketIdMap[socketId];
+      if (socketIndex === undefined) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[socketIndex];
+
+        if (!networkRequestInfo.messages) {
+          networkRequestInfo.messages = '';
+        }
+        networkRequestInfo.messages +=
+          'Received: ' + JSON.stringify(message) + '\n';
+
+        return {requests};
+      });
+    });
+
+    WebSocketInterceptor.setOnCloseCallback((socketId, message) => {
+      const socketIndex = this._socketIdMap[socketId];
+      if (socketIndex === undefined) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[socketIndex];
+        networkRequestInfo.serverClose = message;
+
+        return {requests};
+      });
+    });
+
+    WebSocketInterceptor.setOnErrorCallback((socketId, message) => {
+      const socketIndex = this._socketIdMap[socketId];
+      if (socketIndex === undefined) {
+        return;
+      }
+
+      this.setState(({requests}) => {
+        const networkRequestInfo = requests[socketIndex];
+        networkRequestInfo.serverError = message;
+
+        return {requests};
+      });
+    });
+
+    // Fire above callbacks.
+    WebSocketInterceptor.enableInterception();
+  }
+
+  componentDidMount() {
+    this._enableXHRInterception();
+    this._enableWebSocketInterception();
+  }
+
+  componentWillUnmount() {
+    XHRInterceptor.disableInterception();
+    WebSocketInterceptor.disableInterception();
+  }
+
+  _renderItem = ({
+    item,
+    index,
+  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+    const tableRowViewStyle = [
+      styles.tableRow,
+      index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,
+      index === this.state.detailRowId && styles.tableRowPressed,
+    ];
+    const urlCellViewStyle = styles.urlCellView;
+    const methodCellViewStyle = styles.methodCellView;
+
+    return (
+      <TouchableHighlight
+        onPress={() => {
+          this._pressRow(index);
+        }}>
+        <View>
+          <View style={tableRowViewStyle}>
+            <View style={urlCellViewStyle}>
+              <Text style={styles.cellText} numberOfLines={1}>
+                {item.url}
+              </Text>
+            </View>
+            <View style={methodCellViewStyle}>
+              <Text style={styles.cellText} numberOfLines={1}>
+                {getTypeShortName(item.type)}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </TouchableHighlight>
+    );
+  };
+
+  _renderItemDetail(id: number): React.Node {
+    const requestItem = this.state.requests[id];
+    const details = Object.keys(requestItem).map(key => {
+      if (key === 'id') {
+        return;
+      }
+      return (
+        <View style={styles.detailViewRow} key={key}>
+          <Text style={[styles.detailViewText, styles.detailKeyCellView]}>
+            {key}
+          </Text>
+          <Text style={[styles.detailViewText, styles.detailValueCellView]}>
+            {getStringByValue(requestItem[key])}
+          </Text>
+        </View>
+      );
+    });
+
+    return (
+      <View>
+        <TouchableHighlight
+          style={styles.closeButton}
+          onPress={this._closeButtonClicked}>
+          <View>
+            <Text style={styles.closeButtonText}>v</Text>
+          </View>
+        </TouchableHighlight>
+        <ScrollView
+          style={styles.detailScrollView}
+          ref={scrollRef => (this._detailScrollView = scrollRef)}>
+          {details}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  _indicateAdditionalRequests = (): void => {
+    if (this._requestsListView) {
+      const distanceFromEndThreshold = LISTVIEW_CELL_HEIGHT * 2;
+      const {offset, visibleLength, contentLength} =
+        this._requestsListViewScrollMetrics;
+      const distanceFromEnd = contentLength - visibleLength - offset;
+      const isCloseToEnd = distanceFromEnd <= distanceFromEndThreshold;
+      if (isCloseToEnd) {
+        this._requestsListView.scrollToEnd();
+      } else {
+        this._requestsListView.flashScrollIndicators();
+      }
+    }
+  };
+
+  _captureRequestsListView = (listRef: ?FlatList<NetworkRequestInfo>): void => {
+    this._requestsListView = listRef;
+  };
+
+  _requestsListViewOnScroll = (e: Object): void => {
+    this._requestsListViewScrollMetrics.offset = e.nativeEvent.contentOffset.y;
+    this._requestsListViewScrollMetrics.visibleLength =
+      e.nativeEvent.layoutMeasurement.height;
+    this._requestsListViewScrollMetrics.contentLength =
+      e.nativeEvent.contentSize.height;
+  };
+
+  /**
+   * Popup a scrollView to dynamically show detailed information of
+   * the request, when pressing a row in the network flow listView.
+   */
+  _pressRow(rowId: number): void {
+    this.setState({detailRowId: rowId}, this._scrollDetailToTop);
+  }
+
+  _scrollDetailToTop = (): void => {
+    if (this._detailScrollView) {
+      this._detailScrollView.scrollTo({
+        y: 0,
+        animated: false,
+      });
+    }
+  };
+
+  _closeButtonClicked = () => {
+    this.setState({detailRowId: null});
+  };
+
+  _getRequestIndexByXHRID(index: number): number {
+    if (index === undefined) {
+      return -1;
+    }
+    const xhrIndex = this._xhrIdMap[index];
+    if (xhrIndex === undefined) {
+      return -1;
+    } else {
+      return xhrIndex;
+    }
+  }
+
+  render(): React.Node {
+    const {requests, detailRowId} = this.state;
+
+    return (
+      <View style={styles.container}>
+        {detailRowId != null && this._renderItemDetail(detailRowId)}
+        <View style={styles.listViewTitle}>
+          {requests.length > 0 && (
+            <View style={styles.tableRow}>
+              <View style={styles.urlTitleCellView}>
+                <Text style={styles.cellText} numberOfLines={1}>
+                  URL
+                </Text>
+              </View>
+              <View style={styles.methodTitleCellView}>
+                <Text style={styles.cellText} numberOfLines={1}>
+                  Type
+                </Text>
+              </View>
+            </View>
+          )}
+        </View>
+
+        <FlatList
+          ref={this._captureRequestsListView}
+          onScroll={this._requestsListViewOnScroll}
+          style={styles.listView}
+          data={requests}
+          renderItem={this._renderItem}
+          keyExtractor={keyExtractor}
+          extraData={this.state}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 5,
+    paddingRight: 5,
+  },
+  listViewTitle: {
+    height: 20,
+  },
+  listView: {
+    flex: 1,
+    height: 60,
+  },
+  tableRow: {
+    flexDirection: 'row',
+    flex: 1,
+    height: LISTVIEW_CELL_HEIGHT,
+  },
+  tableRowEven: {
+    backgroundColor: '#555',
+  },
+  tableRowOdd: {
+    backgroundColor: '#000',
+  },
+  tableRowPressed: {
+    backgroundColor: '#3B5998',
+  },
+  cellText: {
+    color: 'white',
+    fontSize: 12,
+  },
+  methodTitleCellView: {
+    height: 18,
+    borderColor: '#DCD7CD',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderRightWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#444',
+    flex: 1,
+  },
+  urlTitleCellView: {
+    height: 18,
+    borderColor: '#DCD7CD',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    justifyContent: 'center',
+    backgroundColor: '#444',
+    flex: 5,
+    paddingLeft: 3,
+  },
+  methodCellView: {
+    height: 15,
+    borderColor: '#DCD7CD',
+    borderRightWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
+  urlCellView: {
+    height: 15,
+    borderColor: '#DCD7CD',
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+    justifyContent: 'center',
+    flex: 5,
+    paddingLeft: 3,
+  },
+  detailScrollView: {
+    flex: 1,
+    height: 180,
+    marginTop: 5,
+    marginBottom: 5,
+  },
+  detailKeyCellView: {
+    flex: 1.3,
+  },
+  detailValueCellView: {
+    flex: 2,
+  },
+  detailViewRow: {
+    flexDirection: 'row',
+    paddingHorizontal: 3,
+  },
+  detailViewText: {
+    color: 'white',
+    fontSize: 11,
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 10,
+  },
+  closeButton: {
+    marginTop: 5,
+    backgroundColor: '#888',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+module.exports = NetworkOverlay;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/PerformanceOverlay.js

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
+const React = require('react');
+
+class PerformanceOverlay extends React.Component<{...}> {
+  render(): React.Node {
+    const perfLogs = PerformanceLogger.getTimespans();
+    const items = [];
+
+    for (const key in perfLogs) {
+      if (perfLogs[key]?.totalTime) {
+        const unit = key === 'BundleSize' ? 'b' : 'ms';
+        items.push(
+          <View style={styles.row} key={key}>
+            <Text style={[styles.text, styles.label]}>{key}</Text>
+            <Text style={[styles.text, styles.totalTime]}>
+              {perfLogs[key].totalTime + unit}
+            </Text>
+          </View>,
+        );
+      }
+    }
+
+    return <View style={styles.container}>{items}</View>;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 100,
+    paddingTop: 10,
+  },
+  label: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+  },
+  text: {
+    color: 'white',
+    fontSize: 12,
+  },
+  totalTime: {
+    paddingRight: 100,
+  },
+});
+
+module.exports = PerformanceOverlay;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {PointerEvent} from '../Types/CoreEventTypes';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import type {InspectedElement} from './Inspector';
+
+import View from '../Components/View/View';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import ElementBox from './ElementBox';
+import * as React from 'react';
+
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+
+const {useEffect, useState, useCallback} = React;
+
+type Props = {
+  inspectedViewRef: InspectedViewRef,
+  reactDevToolsAgent: ReactDevToolsAgent,
+};
+
+export default function ReactDevToolsOverlay({
+  inspectedViewRef,
+  reactDevToolsAgent,
+}: Props): React.Node {
+  const [inspected, setInspected] = useState<?InspectedElement>(null);
+  const [isInspecting, setIsInspecting] = useState(false);
+
+  useEffect(() => {
+    function cleanup() {
+      reactDevToolsAgent.removeListener('shutdown', cleanup);
+      reactDevToolsAgent.removeListener(
+        'startInspectingNative',
+        onStartInspectingNative,
+      );
+      reactDevToolsAgent.removeListener(
+        'stopInspectingNative',
+        onStopInspectingNative,
+      );
+    }
+
+    function onStartInspectingNative() {
+      setIsInspecting(true);
+    }
+
+    function onStopInspectingNative() {
+      setIsInspecting(false);
+    }
+
+    reactDevToolsAgent.addListener('shutdown', cleanup);
+    reactDevToolsAgent.addListener(
+      'startInspectingNative',
+      onStartInspectingNative,
+    );
+    reactDevToolsAgent.addListener(
+      'stopInspectingNative',
+      onStopInspectingNative,
+    );
+
+    return cleanup;
+  }, [reactDevToolsAgent]);
+
+  const findViewForLocation = useCallback(
+    (x: number, y: number) => {
+      getInspectorDataForViewAtPoint(
+        inspectedViewRef.current,
+        x,
+        y,
+        viewData => {
+          const {touchedViewTag, closestInstance, frame} = viewData;
+          if (closestInstance != null || touchedViewTag != null) {
+            // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+            // this makes sure it works for both architectures.
+            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
+            if (closestInstance != null) {
+              reactDevToolsAgent.selectNode(closestInstance);
+            }
+            setInspected({
+              frame,
+            });
+            return true;
+          }
+          return false;
+        },
+      );
+    },
+    [inspectedViewRef, reactDevToolsAgent],
+  );
+
+  const stopInspecting = useCallback(() => {
+    reactDevToolsAgent.stopInspectingNative(true);
+    setIsInspecting(false);
+    setInspected(null);
+  }, [reactDevToolsAgent]);
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
+    },
+    [findViewForLocation],
+  );
+
+  const onResponderMove = useCallback(
+    (e: PressEvent) => {
+      findViewForLocation(
+        e.nativeEvent.touches[0].locationX,
+        e.nativeEvent.touches[0].locationY,
+      );
+    },
+    [findViewForLocation],
+  );
+
+  const shouldSetResponder = useCallback(
+    (e: PressEvent): boolean => {
+      onResponderMove(e);
+      return true;
+    },
+    [onResponderMove],
+  );
+
+  const highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+
+  if (isInspecting) {
+    const events =
+      // Pointer events only work on fabric
+      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+        ? {
+            onPointerMove,
+            onPointerDown: onPointerMove,
+            onPointerUp: stopInspecting,
+          }
+        : {
+            onStartShouldSetResponder: shouldSetResponder,
+            onResponderMove: onResponderMove,
+            onResponderRelease: stopInspecting,
+          };
+
+    return (
+      <View
+        nativeID="devToolsInspectorOverlay"
+        style={styles.inspector}
+        {...events}>
+        {highlight}
+      </View>
+    );
+  }
+
+  return highlight;
+}
+
+const styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/StyleInspector.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
+const React = require('react');
+
+class StyleInspector extends React.Component<$FlowFixMeProps> {
+  render(): React.Node {
+    if (!this.props.style) {
+      return <Text style={styles.noStyle}>No style</Text>;
+    }
+    const names = Object.keys(this.props.style);
+    return (
+      <View style={styles.container}>
+        <View>
+          {names.map(name => (
+            <Text key={name} style={styles.attr}>
+              {name}:
+            </Text>
+          ))}
+        </View>
+
+        <View>
+          {names.map(name => {
+            const value = this.props.style[name];
+            return (
+              <Text key={name} style={styles.value}>
+                {typeof value !== 'string' && typeof value !== 'number'
+                  ? JSON.stringify(value)
+                  : value}
+              </Text>
+            );
+          })}
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  attr: {
+    fontSize: 10,
+    color: '#ccc',
+  },
+  value: {
+    fontSize: 10,
+    color: 'white',
+    marginLeft: 10,
+  },
+  noStyle: {
+    color: 'white',
+    fontSize: 10,
+  },
+});
+
+module.exports = StyleInspector;

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {
+  HostComponent,
+  TouchedViewDataAtPoint,
+} from '../Renderer/shims/ReactNativeTypes';
+
+const invariant = require('invariant');
+const React = require('react');
+
+export type HostRef = React.ElementRef<HostComponent<mixed>>;
+export type ReactRenderer = {
+  rendererConfig: {
+    getInspectorDataForViewAtPoint: (
+      inspectedView: ?HostRef,
+      locationX: number,
+      locationY: number,
+      callback: Function,
+    ) => void,
+    ...
+  },
+};
+type AttachedRendererEventPayload = {id: number, renderer: ReactRenderer};
+
+const reactDevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+invariant(
+  Boolean(reactDevToolsHook),
+  'getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected',
+);
+
+const renderers: Array<ReactRenderer> = Array.from(
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values(),
+);
+
+const appendRenderer = ({renderer}: AttachedRendererEventPayload) =>
+  renderers.push(renderer);
+reactDevToolsHook.on('renderer', appendRenderer);
+
+function validateRenderers(): void {
+  invariant(
+    renderers.length > 0,
+    'Expected to find at least one React Native renderer on DevTools hook.',
+  );
+}
+
+module.exports = function getInspectorDataForViewAtPoint(
+  inspectedView: ?HostRef,
+  locationX: number,
+  locationY: number,
+  callback: (viewData: TouchedViewDataAtPoint) => boolean,
+) {
+  validateRenderers();
+
+  let shouldBreak = false;
+  // Check all renderers for inspector data.
+  for (const renderer of renderers) {
+    if (shouldBreak) {
+      break;
+    }
+
+    if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
+      renderer.rendererConfig.getInspectorDataForViewAtPoint(
+        inspectedView,
+        locationX,
+        locationY,
+        viewData => {
+          // Only return with non-empty view data since only one renderer will have this view.
+          if (viewData && viewData.hierarchy.length > 0) {
+            shouldBreak = callback(viewData);
+          }
+        },
+      );
+    }
+  }
+};

smart-app-city/frontend/node_modules/react-native/Libraries/Inspector/resolveBoxStyle.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const I18nManager = require('../ReactNative/I18nManager');
+
+/**
+ * Resolve a style property into its component parts.
+ *
+ * For example:
+ *
+ *   > resolveProperties('margin', {margin: 5, marginBottom: 10})
+ *   {top: 5, left: 5, right: 5, bottom: 10}
+ *
+ * If no parts exist, this returns null.
+ */
+function resolveBoxStyle(
+  prefix: string,
+  style: Object,
+): ?$ReadOnly<{|
+  bottom: number,
+  left: number,
+  right: number,
+  top: number,
+|}> {
+  let hasParts = false;
+  const result = {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+  };
+
+  // TODO: Fix issues with multiple properties affecting the same side.
+
+  const styleForAll = style[prefix];
+  if (styleForAll != null) {
+    for (const key of Object.keys(result)) {
+      result[key] = styleForAll;
+    }
+    hasParts = true;
+  }
+
+  const styleForHorizontal = style[prefix + 'Horizontal'];
+  if (styleForHorizontal != null) {
+    result.left = styleForHorizontal;
+    result.right = styleForHorizontal;
+    hasParts = true;
+  } else {
+    const styleForLeft = style[prefix + 'Left'];
+    if (styleForLeft != null) {
+      result.left = styleForLeft;
+      hasParts = true;
+    }
+
+    const styleForRight = style[prefix + 'Right'];
+    if (styleForRight != null) {
+      result.right = styleForRight;
+      hasParts = true;
+    }
+
+    const styleForEnd = style[prefix + 'End'];
+    if (styleForEnd != null) {
+      const constants = I18nManager.getConstants();
+      if (constants.isRTL && constants.doLeftAndRightSwapInRTL) {
+        result.left = styleForEnd;
+      } else {
+        result.right = styleForEnd;
+      }
+      hasParts = true;
+    }
+    const styleForStart = style[prefix + 'Start'];
+    if (styleForStart != null) {
+      const constants = I18nManager.getConstants();
+      if (constants.isRTL && constants.doLeftAndRightSwapInRTL) {
+        result.right = styleForStart;
+      } else {
+        result.left = styleForStart;
+      }
+      hasParts = true;
+    }
+  }
+
+  const styleForVertical = style[prefix + 'Vertical'];
+  if (styleForVertical != null) {
+    result.bottom = styleForVertical;
+    result.top = styleForVertical;
+    hasParts = true;
+  } else {
+    const styleForBottom = style[prefix + 'Bottom'];
+    if (styleForBottom != null) {
+      result.bottom = styleForBottom;
+      hasParts = true;
+    }
+
+    const styleForTop = style[prefix + 'Top'];
+    if (styleForTop != null) {
+      result.top = styleForTop;
+      hasParts = true;
+    }
+  }
+
+  return hasParts ? result : null;
+}
+
+module.exports = resolveBoxStyle;