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-navigation/bottom-tabs/src/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * Navigators
+ */
+export { default as createBottomTabNavigator } from './navigators/createBottomTabNavigator';
+
+/**
+ * Views
+ */
+export { default as BottomTabBar } from './views/BottomTabBar';
+export { default as BottomTabView } from './views/BottomTabView';
+
+/**
+ * Utilities
+ */
+export { default as BottomTabBarHeightCallbackContext } from './utils/BottomTabBarHeightCallbackContext';
+export { default as BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+export { default as useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+
+/**
+ * Types
+ */
+export type {
+  BottomTabBarButtonProps,
+  BottomTabBarProps,
+  BottomTabHeaderProps,
+  BottomTabNavigationEventMap,
+  BottomTabNavigationOptions,
+  BottomTabNavigationProp,
+  BottomTabScreenProps,
+} from './types';

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/navigators/createBottomTabNavigator.tsx

@@ -0,0 +1,134 @@
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  ParamListBase,
+  TabActionHelpers,
+  TabNavigationState,
+  TabRouter,
+  TabRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
+import type {
+  BottomTabNavigationConfig,
+  BottomTabNavigationEventMap,
+  BottomTabNavigationOptions,
+} from '../types';
+import BottomTabView from '../views/BottomTabView';
+
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap
+> &
+  TabRouterOptions &
+  BottomTabNavigationConfig;
+
+function BottomTabNavigator({
+  id,
+  initialRouteName,
+  backBehavior,
+  children,
+  screenListeners,
+  screenOptions,
+  sceneContainerStyle,
+  ...restWithDeprecated
+}: Props) {
+  const {
+    // @ts-expect-error: lazy is deprecated
+    lazy,
+    // @ts-expect-error: tabBarOptions is deprecated
+    tabBarOptions,
+    ...rest
+  } = restWithDeprecated;
+
+  let defaultScreenOptions: BottomTabNavigationOptions = {};
+
+  if (tabBarOptions) {
+    Object.assign(defaultScreenOptions, {
+      tabBarHideOnKeyboard: tabBarOptions.keyboardHidesTabBar,
+      tabBarActiveTintColor: tabBarOptions.activeTintColor,
+      tabBarInactiveTintColor: tabBarOptions.inactiveTintColor,
+      tabBarActiveBackgroundColor: tabBarOptions.activeBackgroundColor,
+      tabBarInactiveBackgroundColor: tabBarOptions.inactiveBackgroundColor,
+      tabBarAllowFontScaling: tabBarOptions.allowFontScaling,
+      tabBarShowLabel: tabBarOptions.showLabel,
+      tabBarLabelStyle: tabBarOptions.labelStyle,
+      tabBarIconStyle: tabBarOptions.iconStyle,
+      tabBarItemStyle: tabBarOptions.tabStyle,
+      tabBarLabelPosition:
+        tabBarOptions.labelPosition ??
+        (tabBarOptions.adaptive === false ? 'below-icon' : undefined),
+      tabBarStyle: [
+        { display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
+        defaultScreenOptions.tabBarStyle,
+      ],
+    });
+
+    (
+      Object.keys(defaultScreenOptions) as (keyof BottomTabNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
+    warnOnce(
+      tabBarOptions,
+      `Bottom Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
+        defaultScreenOptions,
+        null,
+        2
+      )}\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator#options for more details.`
+    );
+  }
+
+  if (typeof lazy === 'boolean') {
+    defaultScreenOptions.lazy = lazy;
+
+    warnOnce(
+      true,
+      `Bottom Tab Navigator: 'lazy' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/bottom-tab-navigator/#lazy for more details.`
+    );
+  }
+
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      TabNavigationState<ParamListBase>,
+      TabRouterOptions,
+      TabActionHelpers<ParamListBase>,
+      BottomTabNavigationOptions,
+      BottomTabNavigationEventMap
+    >(TabRouter, {
+      id,
+      initialRouteName,
+      backBehavior,
+      children,
+      screenListeners,
+      screenOptions,
+      defaultScreenOptions,
+    });
+
+  return (
+    <NavigationContent>
+      <BottomTabView
+        {...rest}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+        sceneContainerStyle={sceneContainerStyle}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap,
+  typeof BottomTabNavigator
+>(BottomTabNavigator);

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/types.tsx

@@ -0,0 +1,329 @@
+import type { HeaderOptions } from '@react-navigation/elements';
+import type {
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+  RouteProp,
+  TabActionHelpers,
+  TabNavigationState,
+} from '@react-navigation/native';
+import type * as React from 'react';
+import type {
+  Animated,
+  GestureResponderEvent,
+  StyleProp,
+  TextStyle,
+  TouchableWithoutFeedbackProps,
+  ViewStyle,
+} from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+
+export type Layout = { width: number; height: number };
+
+export type BottomTabNavigationEventMap = {
+  /**
+   * Event which fires on tapping on the tab in the tab bar.
+   */
+  tabPress: { data: undefined; canPreventDefault: true };
+  /**
+   * Event which fires on long press on the tab in the tab bar.
+   */
+  tabLongPress: { data: undefined };
+};
+
+export type LabelPosition = 'beside-icon' | 'below-icon';
+
+export type BottomTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  BottomTabNavigationEventMap
+> &
+  TabActionHelpers<ParamListBase>;
+
+export type BottomTabNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  NavigatorID,
+  TabNavigationState<ParamList>,
+  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap
+> &
+  TabActionHelpers<ParamList>;
+
+export type BottomTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
+> = {
+  navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type TimingKeyboardAnimationConfig = {
+  animation: 'timing';
+  config?: Omit<
+    Partial<Animated.TimingAnimationConfig>,
+    'toValue' | 'useNativeDriver'
+  >;
+};
+
+export type SpringKeyboardAnimationConfig = {
+  animation: 'spring';
+  config?: Omit<
+    Partial<Animated.SpringAnimationConfig>,
+    'toValue' | 'useNativeDriver'
+  >;
+};
+
+export type TabBarVisibilityAnimationConfig =
+  | TimingKeyboardAnimationConfig
+  | SpringKeyboardAnimationConfig;
+
+export type BottomTabNavigationOptions = HeaderOptions & {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+
+  /**
+   * Title string of a tab displayed in the tab bar
+   * or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon', children: string } returns a React.Node to display in tab bar.
+   *
+   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   */
+  tabBarLabel?:
+    | string
+    | ((props: {
+        focused: boolean;
+        color: string;
+        position: LabelPosition;
+        children: string;
+      }) => React.ReactNode);
+
+  /**
+   * Whether the tab label should be visible. Defaults to `true`.
+   */
+  tabBarShowLabel?: boolean;
+
+  /**
+   * Whether the label is shown below the icon or beside the icon.
+   *
+   * - `below-icon`: the label is shown below the icon (typical for iPhones)
+   * - `beside-icon` the label is shown next to the icon (typical for iPad)
+   *
+   * By default, the position is chosen automatically based on device width.
+   */
+  tabBarLabelPosition?: LabelPosition;
+
+  /**
+   * Style object for the tab label.
+   */
+  tabBarLabelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  tabBarAllowFontScaling?: boolean;
+
+  /**
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   */
+  tabBarIcon?: (props: {
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+
+  /**
+   * Style object for the tab icon.
+   */
+  tabBarIconStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Text to show in a badge on the tab icon.
+   */
+  tabBarBadge?: number | string;
+
+  /**
+   * Custom style for the tab bar badge.
+   * You can specify a background color or text color here.
+   */
+  tabBarBadgeStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * It's recommended to set this if you don't have a label for the tab.
+   */
+  tabBarAccessibilityLabel?: string;
+
+  /**
+   * ID to locate this tab button in tests.
+   */
+  tabBarTestID?: string;
+
+  /**
+   * Function which returns a React element to render as the tab bar button.
+   * Renders `Pressable` by default.
+   */
+  tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
+
+  /**
+   * Color for the icon and label in the active tab.
+   */
+  tabBarActiveTintColor?: string;
+
+  /**
+   * Color for the icon and label in the inactive tabs.
+   */
+  tabBarInactiveTintColor?: string;
+
+  /**
+   * Background color for the active tab.
+   */
+  tabBarActiveBackgroundColor?: string;
+
+  /**
+   * Background color for the inactive tabs.
+   */
+  tabBarInactiveBackgroundColor?: string;
+
+  /**
+   * Style object for the tab item container.
+   */
+  tabBarItemStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+   */
+  tabBarHideOnKeyboard?: boolean;
+
+  /**
+   * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
+   */
+  tabBarVisibilityAnimationConfig?: {
+    show?: TabBarVisibilityAnimationConfig;
+    hide?: TabBarVisibilityAnimationConfig;
+  };
+
+  /**
+   * Style object for the tab bar container.
+   */
+  tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+
+  /**
+   * Function which returns a React Element to use as background for the tab bar.
+   * You could render an image, a gradient, blur view etc.
+   *
+   * When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
+   * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
+   */
+  tabBarBackground?: () => React.ReactNode;
+
+  /**
+   * Whether this screens should render the first time it's accessed. Defaults to `true`.
+   * Set it to `false` if you want to render the screen on initial render.
+   */
+  lazy?: boolean;
+
+  /**
+   * Function that given returns a React Element to display as a header.
+   */
+  header?: (props: BottomTabHeaderProps) => React.ReactNode;
+
+  /**
+   * Whether to show the header. Setting this to `false` hides the header.
+   * Defaults to `true`.
+   */
+  headerShown?: boolean;
+
+  /**
+   * Whether this screen should be unmounted when navigating away from it.
+   * Defaults to `false`.
+   */
+  unmountOnBlur?: boolean;
+
+  /**
+   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+   * Requires `react-native-screens` version >=3.16.0.
+   *
+   * Only supported on iOS and Android.
+   */
+  freezeOnBlur?: boolean;
+};
+
+export type BottomTabDescriptor = Descriptor<
+  BottomTabNavigationOptions,
+  BottomTabNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type BottomTabDescriptorMap = Record<string, BottomTabDescriptor>;
+
+export type BottomTabNavigationConfig = {
+  /**
+   * Function that returns a React element to display as the tab bar.
+   */
+  tabBar?: (props: BottomTabBarProps) => React.ReactNode;
+  /**
+   * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
+   * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+   */
+  safeAreaInsets?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
+  /**
+   * Whether inactive screens should be detached from the view hierarchy to save memory.
+   * Make sure to call `enableScreens` from `react-native-screens` to make it work.
+   * Defaults to `true` on Android.
+   */
+  detachInactiveScreens?: boolean;
+  /**
+   * Style object for the component wrapping the screen content.
+   */
+  sceneContainerStyle?: StyleProp<ViewStyle>;
+};
+
+export type BottomTabHeaderProps = {
+  /**
+   * Layout of the screen.
+   */
+  layout: Layout;
+  /**
+   * Options for the current screen.
+   */
+  options: BottomTabNavigationOptions;
+  /**
+   * Route object for the current screen.
+   */
+  route: RouteProp<ParamListBase>;
+  /**
+   * Navigation prop for the header.
+   */
+  navigation: BottomTabNavigationProp<ParamListBase>;
+};
+
+export type BottomTabBarProps = {
+  state: TabNavigationState<ParamListBase>;
+  descriptors: BottomTabDescriptorMap;
+  navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
+  insets: EdgeInsets;
+};
+
+export type BottomTabBarButtonProps = Omit<
+  TouchableWithoutFeedbackProps,
+  'onPress'
+> & {
+  to?: string;
+  children: React.ReactNode;
+  onPress?: (
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
+  ) => void;
+};

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/utils/BottomTabBarHeightCallbackContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export default React.createContext<((height: number) => void) | undefined>(
+  undefined
+);

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/utils/BottomTabBarHeightContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number | undefined>(undefined);

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/utils/useBottomTabBarHeight.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import BottomTabBarHeightContext from './BottomTabBarHeightContext';
+
+export default function useBottomTabBarHeight() {
+  const height = React.useContext(BottomTabBarHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the bottom tab bar height. Are you inside a screen in Bottom Tab Navigator?"
+    );
+  }
+
+  return height;
+}

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/utils/useIsKeyboardShown.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { EmitterSubscription, Keyboard, Platform } from 'react-native';
+
+export default function useIsKeyboardShown() {
+  const [isKeyboardShown, setIsKeyboardShown] = React.useState(false);
+
+  React.useEffect(() => {
+    const handleKeyboardShow = () => setIsKeyboardShown(true);
+    const handleKeyboardHide = () => setIsKeyboardShown(false);
+
+    let subscriptions: EmitterSubscription[];
+
+    if (Platform.OS === 'ios') {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', handleKeyboardShow),
+        Keyboard.addListener('keyboardWillHide', handleKeyboardHide),
+      ];
+    } else {
+      subscriptions = [
+        Keyboard.addListener('keyboardDidShow', handleKeyboardShow),
+        Keyboard.addListener('keyboardDidHide', handleKeyboardHide),
+      ];
+    }
+
+    return () => {
+      subscriptions.forEach((s) => s.remove());
+    };
+  }, []);
+
+  return isKeyboardShown;
+}

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/Badge.tsx

@@ -0,0 +1,110 @@
+import { useTheme } from '@react-navigation/native';
+import color from 'color';
+import * as React from 'react';
+import { Animated, StyleProp, StyleSheet, TextStyle } from 'react-native';
+
+type Props = {
+  /**
+   * Whether the badge is visible
+   */
+  visible: boolean;
+  /**
+   * Content of the `Badge`.
+   */
+  children?: string | number;
+  /**
+   * Size of the `Badge`.
+   */
+  size?: number;
+  /**
+   * Style object for the tab bar container.
+   */
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+};
+
+export default function Badge({
+  children,
+  style,
+  visible = true,
+  size = 18,
+  ...rest
+}: Props) {
+  const [opacity] = React.useState(() => new Animated.Value(visible ? 1 : 0));
+  const [rendered, setRendered] = React.useState(visible);
+
+  const theme = useTheme();
+
+  React.useEffect(() => {
+    if (!rendered) {
+      return;
+    }
+
+    Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished && !visible) {
+        setRendered(false);
+      }
+    });
+
+    return () => opacity.stopAnimation();
+  }, [opacity, rendered, visible]);
+
+  if (!rendered) {
+    if (visible) {
+      setRendered(true);
+    } else {
+      return null;
+    }
+  }
+
+  // @ts-expect-error: backgroundColor definitely exists
+  const { backgroundColor = theme.colors.notification, ...restStyle } =
+    StyleSheet.flatten(style) || {};
+  const textColor = color(backgroundColor).isLight() ? 'black' : 'white';
+
+  const borderRadius = size / 2;
+  const fontSize = Math.floor((size * 3) / 4);
+
+  return (
+    <Animated.Text
+      numberOfLines={1}
+      style={[
+        {
+          transform: [
+            {
+              scale: opacity.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              }),
+            },
+          ],
+          color: textColor,
+          lineHeight: size - 1,
+          height: size,
+          minWidth: size,
+          opacity,
+          backgroundColor,
+          fontSize,
+          borderRadius,
+        },
+        styles.container,
+        restStyle,
+      ]}
+      {...rest}
+    >
+      {children}
+    </Animated.Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-end',
+    textAlign: 'center',
+    paddingHorizontal: 4,
+    overflow: 'hidden',
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/BottomTabBar.tsx

@@ -0,0 +1,392 @@
+import { MissingIcon } from '@react-navigation/elements';
+import {
+  CommonActions,
+  NavigationContext,
+  NavigationRouteContext,
+  ParamListBase,
+  TabNavigationState,
+  useLinkBuilder,
+  useTheme,
+} from '@react-navigation/native';
+import React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { EdgeInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
+
+import type { BottomTabBarProps, BottomTabDescriptorMap } from '../types';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import useIsKeyboardShown from '../utils/useIsKeyboardShown';
+import BottomTabItem from './BottomTabItem';
+
+type Props = BottomTabBarProps & {
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+};
+
+const DEFAULT_TABBAR_HEIGHT = 49;
+const COMPACT_TABBAR_HEIGHT = 32;
+const DEFAULT_MAX_TAB_ITEM_WIDTH = 125;
+
+const useNativeDriver = Platform.OS !== 'web';
+
+type Options = {
+  state: TabNavigationState<ParamListBase>;
+  descriptors: BottomTabDescriptorMap;
+  layout: { height: number; width: number };
+  dimensions: { height: number; width: number };
+};
+
+const shouldUseHorizontalLabels = ({
+  state,
+  descriptors,
+  layout,
+  dimensions,
+}: Options) => {
+  const { tabBarLabelPosition } =
+    descriptors[state.routes[state.index].key].options;
+
+  if (tabBarLabelPosition) {
+    switch (tabBarLabelPosition) {
+      case 'beside-icon':
+        return true;
+      case 'below-icon':
+        return false;
+    }
+  }
+
+  if (layout.width >= 768) {
+    // Screen size matches a tablet
+    const maxTabWidth = state.routes.reduce((acc, route) => {
+      const { tabBarItemStyle } = descriptors[route.key].options;
+      const flattenedStyle = StyleSheet.flatten(tabBarItemStyle);
+
+      if (flattenedStyle) {
+        if (typeof flattenedStyle.width === 'number') {
+          return acc + flattenedStyle.width;
+        } else if (typeof flattenedStyle.maxWidth === 'number') {
+          return acc + flattenedStyle.maxWidth;
+        }
+      }
+
+      return acc + DEFAULT_MAX_TAB_ITEM_WIDTH;
+    }, 0);
+
+    return maxTabWidth <= layout.width;
+  } else {
+    return dimensions.width > dimensions.height;
+  }
+};
+
+const getPaddingBottom = (insets: EdgeInsets) =>
+  Math.max(insets.bottom - Platform.select({ ios: 4, default: 0 }), 0);
+
+export const getTabBarHeight = ({
+  state,
+  descriptors,
+  dimensions,
+  insets,
+  style,
+  ...rest
+}: Options & {
+  insets: EdgeInsets;
+  style: Animated.WithAnimatedValue<StyleProp<ViewStyle>> | undefined;
+}) => {
+  // @ts-ignore
+  const customHeight = StyleSheet.flatten(style)?.height;
+
+  if (typeof customHeight === 'number') {
+    return customHeight;
+  }
+
+  const isLandscape = dimensions.width > dimensions.height;
+  const horizontalLabels = shouldUseHorizontalLabels({
+    state,
+    descriptors,
+    dimensions,
+    ...rest,
+  });
+  const paddingBottom = getPaddingBottom(insets);
+
+  if (
+    Platform.OS === 'ios' &&
+    !Platform.isPad &&
+    isLandscape &&
+    horizontalLabels
+  ) {
+    return COMPACT_TABBAR_HEIGHT + paddingBottom;
+  }
+
+  return DEFAULT_TABBAR_HEIGHT + paddingBottom;
+};
+
+export default function BottomTabBar({
+  state,
+  navigation,
+  descriptors,
+  insets,
+  style,
+}: Props) {
+  const { colors } = useTheme();
+  const buildLink = useLinkBuilder();
+
+  const focusedRoute = state.routes[state.index];
+  const focusedDescriptor = descriptors[focusedRoute.key];
+  const focusedOptions = focusedDescriptor.options;
+
+  const {
+    tabBarShowLabel,
+    tabBarHideOnKeyboard = false,
+    tabBarVisibilityAnimationConfig,
+    tabBarStyle,
+    tabBarBackground,
+    tabBarActiveTintColor,
+    tabBarInactiveTintColor,
+    tabBarActiveBackgroundColor,
+    tabBarInactiveBackgroundColor,
+  } = focusedOptions;
+
+  const dimensions = useSafeAreaFrame();
+  const isKeyboardShown = useIsKeyboardShown();
+
+  const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
+
+  const shouldShowTabBar = !(tabBarHideOnKeyboard && isKeyboardShown);
+
+  const visibilityAnimationConfigRef = React.useRef(
+    tabBarVisibilityAnimationConfig
+  );
+
+  React.useEffect(() => {
+    visibilityAnimationConfigRef.current = tabBarVisibilityAnimationConfig;
+  });
+
+  const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
+
+  const [visible] = React.useState(
+    () => new Animated.Value(shouldShowTabBar ? 1 : 0)
+  );
+
+  React.useEffect(() => {
+    const visibilityAnimationConfig = visibilityAnimationConfigRef.current;
+
+    if (shouldShowTabBar) {
+      const animation =
+        visibilityAnimationConfig?.show?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
+        toValue: 1,
+        useNativeDriver,
+        duration: 250,
+        ...visibilityAnimationConfig?.show?.config,
+      }).start(({ finished }) => {
+        if (finished) {
+          setIsTabBarHidden(false);
+        }
+      });
+    } else {
+      setIsTabBarHidden(true);
+
+      const animation =
+        visibilityAnimationConfig?.hide?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
+        toValue: 0,
+        useNativeDriver,
+        duration: 200,
+        ...visibilityAnimationConfig?.hide?.config,
+      }).start();
+    }
+
+    return () => visible.stopAnimation();
+  }, [visible, shouldShowTabBar]);
+
+  const [layout, setLayout] = React.useState({
+    height: 0,
+    width: dimensions.width,
+  });
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    onHeightChange?.(height);
+
+    setLayout((layout) => {
+      if (height === layout.height && width === layout.width) {
+        return layout;
+      } else {
+        return {
+          height,
+          width,
+        };
+      }
+    });
+  };
+
+  const { routes } = state;
+
+  const paddingBottom = getPaddingBottom(insets);
+  const tabBarHeight = getTabBarHeight({
+    state,
+    descriptors,
+    insets,
+    dimensions,
+    layout,
+    style: [tabBarStyle, style],
+  });
+
+  const hasHorizontalLabels = shouldUseHorizontalLabels({
+    state,
+    descriptors,
+    dimensions,
+    layout,
+  });
+
+  const tabBarBackgroundElement = tabBarBackground?.();
+
+  return (
+    <Animated.View
+      style={[
+        styles.tabBar,
+        {
+          backgroundColor:
+            tabBarBackgroundElement != null ? 'transparent' : colors.card,
+          borderTopColor: colors.border,
+        },
+        {
+          transform: [
+            {
+              translateY: visible.interpolate({
+                inputRange: [0, 1],
+                outputRange: [
+                  layout.height + paddingBottom + StyleSheet.hairlineWidth,
+                  0,
+                ],
+              }),
+            },
+          ],
+          // Absolutely position the tab bar so that the content is below it
+          // This is needed to avoid gap at bottom when the tab bar is hidden
+          position: isTabBarHidden ? 'absolute' : (null as any),
+        },
+        {
+          height: tabBarHeight,
+          paddingBottom,
+          paddingHorizontal: Math.max(insets.left, insets.right),
+        },
+        tabBarStyle,
+      ]}
+      pointerEvents={isTabBarHidden ? 'none' : 'auto'}
+      onLayout={handleLayout}
+    >
+      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+        {tabBarBackgroundElement}
+      </View>
+      <View accessibilityRole="tablist" style={styles.content}>
+        {routes.map((route, index) => {
+          const focused = index === state.index;
+          const { options } = descriptors[route.key];
+
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });
+
+            if (!focused && !event.defaultPrevented) {
+              navigation.dispatch({
+                ...CommonActions.navigate({ name: route.name, merge: true }),
+                target: state.key,
+              });
+            }
+          };
+
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };
+
+          const label =
+            options.tabBarLabel !== undefined
+              ? options.tabBarLabel
+              : options.title !== undefined
+              ? options.title
+              : route.name;
+
+          const accessibilityLabel =
+            options.tabBarAccessibilityLabel !== undefined
+              ? options.tabBarAccessibilityLabel
+              : typeof label === 'string' && Platform.OS === 'ios'
+              ? `${label}, tab, ${index + 1} of ${routes.length}`
+              : undefined;
+
+          return (
+            <NavigationContext.Provider
+              key={route.key}
+              value={descriptors[route.key].navigation}
+            >
+              <NavigationRouteContext.Provider value={route}>
+                <BottomTabItem
+                  route={route}
+                  descriptor={descriptors[route.key]}
+                  focused={focused}
+                  horizontal={hasHorizontalLabels}
+                  onPress={onPress}
+                  onLongPress={onLongPress}
+                  accessibilityLabel={accessibilityLabel}
+                  to={buildLink(route.name, route.params)}
+                  testID={options.tabBarTestID}
+                  allowFontScaling={options.tabBarAllowFontScaling}
+                  activeTintColor={tabBarActiveTintColor}
+                  inactiveTintColor={tabBarInactiveTintColor}
+                  activeBackgroundColor={tabBarActiveBackgroundColor}
+                  inactiveBackgroundColor={tabBarInactiveBackgroundColor}
+                  button={options.tabBarButton}
+                  icon={
+                    options.tabBarIcon ??
+                    (({ color, size }) => (
+                      <MissingIcon color={color} size={size} />
+                    ))
+                  }
+                  badge={options.tabBarBadge}
+                  badgeStyle={options.tabBarBadgeStyle}
+                  label={label}
+                  showLabel={tabBarShowLabel}
+                  labelStyle={options.tabBarLabelStyle}
+                  iconStyle={options.tabBarIconStyle}
+                  style={options.tabBarItemStyle}
+                />
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
+          );
+        })}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    elevation: 8,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/BottomTabItem.tsx

@@ -0,0 +1,333 @@
+import { Link, Route, useTheme } from '@react-navigation/native';
+import Color from 'color';
+import React from 'react';
+import {
+  GestureResponderEvent,
+  Platform,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type {
+  BottomTabBarButtonProps,
+  BottomTabDescriptor,
+  LabelPosition,
+} from '../types';
+import TabBarIcon from './TabBarIcon';
+
+type Props = {
+  /**
+   * Whether the tab is focused.
+   */
+  focused: boolean;
+  /**
+   * The route object which should be specified by the tab.
+   */
+  route: Route<string>;
+  /**
+   * The descriptor object for the route.
+   */
+  descriptor: BottomTabDescriptor;
+  /**
+   * The label text of the tab.
+   */
+  label:
+    | string
+    | ((props: {
+        focused: boolean;
+        color: string;
+        position: LabelPosition;
+        children: string;
+      }) => React.ReactNode);
+  /**
+   * Icon to display for the tab.
+   */
+  icon: (props: {
+    focused: boolean;
+    size: number;
+    color: string;
+  }) => React.ReactNode;
+  /**
+   * Text to show in a badge on the tab icon.
+   */
+  badge?: number | string;
+  /**
+   * Custom style for the badge.
+   */
+  badgeStyle?: StyleProp<TextStyle>;
+  /**
+   * URL to use for the link to the tab.
+   */
+  to?: string;
+  /**
+   * The button for the tab. Uses a `TouchableWithoutFeedback` by default.
+   */
+  button?: (props: BottomTabBarButtonProps) => React.ReactNode;
+  /**
+   * The accessibility label for the tab.
+   */
+  accessibilityLabel?: string;
+  /**
+   * An unique ID for testing for the tab.
+   */
+  testID?: string;
+  /**
+   * Function to execute on press in React Native.
+   * On the web, this will use onClick.
+   */
+  onPress: (
+    e: React.MouseEvent<HTMLElement, MouseEvent> | GestureResponderEvent
+  ) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress: (e: GestureResponderEvent) => void;
+  /**
+   * Whether the label should be aligned with the icon horizontally.
+   */
+  horizontal: boolean;
+  /**
+   * Color for the icon and label when the item is active.
+   */
+  activeTintColor?: string;
+  /**
+   * Color for the icon and label when the item is inactive.
+   */
+  inactiveTintColor?: string;
+  /**
+   * Background color for item when its active.
+   */
+  activeBackgroundColor?: string;
+  /**
+   * Background color for item when its inactive.
+   */
+  inactiveBackgroundColor?: string;
+  /**
+   * Whether to show the label text for the tab.
+   */
+  showLabel?: boolean;
+  /**
+   * Whether to allow scaling the font for the label for accessibility purposes.
+   */
+  allowFontScaling?: boolean;
+  /**
+   * Style object for the label element.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the icon element.
+   */
+  iconStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style object for the wrapper element.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function BottomTabBarItem({
+  focused,
+  route,
+  descriptor,
+  label,
+  icon,
+  badge,
+  badgeStyle,
+  to,
+  button = ({
+    children,
+    style,
+    onPress,
+    to,
+    accessibilityRole,
+    ...rest
+  }: BottomTabBarButtonProps) => {
+    if (Platform.OS === 'web' && to) {
+      // React Native Web doesn't forward `onClick` if we use `TouchableWithoutFeedback`.
+      // We need to use `onClick` to be able to prevent default browser handling of links.
+      return (
+        <Link
+          {...rest}
+          to={to}
+          style={[styles.button, style]}
+          onPress={(e: any) => {
+            if (
+              !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+              (e.button == null || e.button === 0) // ignore everything but left clicks
+            ) {
+              e.preventDefault();
+              onPress?.(e);
+            }
+          }}
+        >
+          {children}
+        </Link>
+      );
+    } else {
+      return (
+        <Pressable
+          {...rest}
+          accessibilityRole={accessibilityRole}
+          onPress={onPress}
+          style={style}
+        >
+          {children}
+        </Pressable>
+      );
+    }
+  },
+  accessibilityLabel,
+  testID,
+  onPress,
+  onLongPress,
+  horizontal,
+  activeTintColor: customActiveTintColor,
+  inactiveTintColor: customInactiveTintColor,
+  activeBackgroundColor = 'transparent',
+  inactiveBackgroundColor = 'transparent',
+  showLabel = true,
+  allowFontScaling,
+  labelStyle,
+  iconStyle,
+  style,
+}: Props) {
+  const { colors } = useTheme();
+
+  const activeTintColor =
+    customActiveTintColor === undefined
+      ? colors.primary
+      : customActiveTintColor;
+
+  const inactiveTintColor =
+    customInactiveTintColor === undefined
+      ? Color(colors.text).mix(Color(colors.card), 0.5).hex()
+      : customInactiveTintColor;
+
+  const renderLabel = ({ focused }: { focused: boolean }) => {
+    if (showLabel === false) {
+      return null;
+    }
+
+    const color = focused ? activeTintColor : inactiveTintColor;
+
+    if (typeof label === 'string') {
+      return (
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.label,
+            { color },
+            horizontal ? styles.labelBeside : styles.labelBeneath,
+            labelStyle,
+          ]}
+          allowFontScaling={allowFontScaling}
+        >
+          {label}
+        </Text>
+      );
+    }
+
+    const { options } = descriptor;
+    const children =
+      typeof options.tabBarLabel === 'string'
+        ? options.tabBarLabel
+        : options.title !== undefined
+        ? options.title
+        : route.name;
+
+    return label({
+      focused,
+      color,
+      position: horizontal ? 'beside-icon' : 'below-icon',
+      children,
+    });
+  };
+
+  const renderIcon = ({ focused }: { focused: boolean }) => {
+    if (icon === undefined) {
+      return null;
+    }
+
+    const activeOpacity = focused ? 1 : 0;
+    const inactiveOpacity = focused ? 0 : 1;
+
+    return (
+      <TabBarIcon
+        route={route}
+        horizontal={horizontal}
+        badge={badge}
+        badgeStyle={badgeStyle}
+        activeOpacity={activeOpacity}
+        inactiveOpacity={inactiveOpacity}
+        activeTintColor={activeTintColor}
+        inactiveTintColor={inactiveTintColor}
+        renderIcon={icon}
+        style={iconStyle}
+      />
+    );
+  };
+
+  const scene = { route, focused };
+
+  const backgroundColor = focused
+    ? activeBackgroundColor
+    : inactiveBackgroundColor;
+
+  return button({
+    to,
+    onPress,
+    onLongPress,
+    testID,
+    accessibilityLabel,
+    // FIXME: accessibilityRole: 'tab' doesn't seem to work as expected on iOS
+    accessibilityRole: Platform.select({ ios: 'button', default: 'tab' }),
+    accessibilityState: { selected: focused },
+    // @ts-expect-error: keep for compatibility with older React Native versions
+    accessibilityStates: focused ? ['selected'] : [],
+    style: [
+      styles.tab,
+      { backgroundColor },
+      horizontal ? styles.tabLandscape : styles.tabPortrait,
+      style,
+    ],
+    children: (
+      <React.Fragment>
+        {renderIcon(scene)}
+        {renderLabel(scene)}
+      </React.Fragment>
+    ),
+  }) as React.ReactElement;
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  tabPortrait: {
+    justifyContent: 'flex-end',
+    flexDirection: 'column',
+  },
+  tabLandscape: {
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
+  label: {
+    textAlign: 'center',
+    backgroundColor: 'transparent',
+  },
+  labelBeneath: {
+    fontSize: 10,
+  },
+  labelBeside: {
+    fontSize: 13,
+    marginLeft: 20,
+    marginTop: 3,
+  },
+  button: {
+    display: 'flex',
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/BottomTabView.tsx

@@ -0,0 +1,170 @@
+import {
+  getHeaderTitle,
+  Header,
+  SafeAreaProviderCompat,
+  Screen,
+} from '@react-navigation/elements';
+import type {
+  ParamListBase,
+  TabNavigationState,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+
+import type {
+  BottomTabBarProps,
+  BottomTabDescriptorMap,
+  BottomTabHeaderProps,
+  BottomTabNavigationConfig,
+  BottomTabNavigationHelpers,
+  BottomTabNavigationProp,
+} from '../types';
+import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
+import BottomTabBarHeightContext from '../utils/BottomTabBarHeightContext';
+import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
+import { MaybeScreen, MaybeScreenContainer } from './ScreenFallback';
+
+type Props = BottomTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: BottomTabNavigationHelpers;
+  descriptors: BottomTabDescriptorMap;
+};
+
+export default function BottomTabView(props: Props) {
+  const {
+    tabBar = (props: BottomTabBarProps) => <BottomTabBar {...props} />,
+    state,
+    navigation,
+    descriptors,
+    safeAreaInsets,
+    detachInactiveScreens = Platform.OS === 'web' ||
+      Platform.OS === 'android' ||
+      Platform.OS === 'ios',
+    sceneContainerStyle,
+  } = props;
+
+  const focusedRouteKey = state.routes[state.index].key;
+  const [loaded, setLoaded] = React.useState([focusedRouteKey]);
+
+  if (!loaded.includes(focusedRouteKey)) {
+    setLoaded([...loaded, focusedRouteKey]);
+  }
+
+  const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
+  const [tabBarHeight, setTabBarHeight] = React.useState(() =>
+    getTabBarHeight({
+      state,
+      descriptors,
+      dimensions,
+      layout: { width: dimensions.width, height: 0 },
+      insets: {
+        ...SafeAreaProviderCompat.initialMetrics.insets,
+        ...props.safeAreaInsets,
+      },
+      style: descriptors[state.routes[state.index].key].options.tabBarStyle,
+    })
+  );
+
+  const renderTabBar = () => {
+    return (
+      <SafeAreaInsetsContext.Consumer>
+        {(insets) =>
+          tabBar({
+            state: state,
+            descriptors: descriptors,
+            navigation: navigation,
+            insets: {
+              top: safeAreaInsets?.top ?? insets?.top ?? 0,
+              right: safeAreaInsets?.right ?? insets?.right ?? 0,
+              bottom: safeAreaInsets?.bottom ?? insets?.bottom ?? 0,
+              left: safeAreaInsets?.left ?? insets?.left ?? 0,
+            },
+          })
+        }
+      </SafeAreaInsetsContext.Consumer>
+    );
+  };
+
+  const { routes } = state;
+
+  return (
+    <SafeAreaProviderCompat>
+      <MaybeScreenContainer
+        enabled={detachInactiveScreens}
+        hasTwoStates
+        style={styles.container}
+      >
+        {routes.map((route, index) => {
+          const descriptor = descriptors[route.key];
+          const { lazy = true, unmountOnBlur } = descriptor.options;
+          const isFocused = state.index === index;
+
+          if (unmountOnBlur && !isFocused) {
+            return null;
+          }
+
+          if (lazy && !loaded.includes(route.key) && !isFocused) {
+            // Don't render a lazy screen if we've never navigated to it
+            return null;
+          }
+
+          const {
+            freezeOnBlur,
+            header = ({ layout, options }: BottomTabHeaderProps) => (
+              <Header
+                {...options}
+                layout={layout}
+                title={getHeaderTitle(options, route.name)}
+              />
+            ),
+            headerShown,
+            headerStatusBarHeight,
+            headerTransparent,
+          } = descriptor.options;
+
+          return (
+            <MaybeScreen
+              key={route.key}
+              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
+              visible={isFocused}
+              enabled={detachInactiveScreens}
+              freezeOnBlur={freezeOnBlur}
+            >
+              <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+                <Screen
+                  focused={isFocused}
+                  route={descriptor.route}
+                  navigation={descriptor.navigation}
+                  headerShown={headerShown}
+                  headerStatusBarHeight={headerStatusBarHeight}
+                  headerTransparent={headerTransparent}
+                  header={header({
+                    layout: dimensions,
+                    route: descriptor.route,
+                    navigation:
+                      descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+                    options: descriptor.options,
+                  })}
+                  style={sceneContainerStyle}
+                >
+                  {descriptor.render()}
+                </Screen>
+              </BottomTabBarHeightContext.Provider>
+            </MaybeScreen>
+          );
+        })}
+      </MaybeScreenContainer>
+      <BottomTabBarHeightCallbackContext.Provider value={setTabBarHeight}>
+        {renderTabBar()}
+      </BottomTabBarHeightCallbackContext.Provider>
+    </SafeAreaProviderCompat>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+});

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/ScreenFallback.tsx

@@ -0,0 +1,50 @@
+import { ResourceSavingView } from '@react-navigation/elements';
+import * as React from 'react';
+import { StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+
+type Props = {
+  visible: boolean;
+  children: React.ReactNode;
+  enabled: boolean;
+  freezeOnBlur?: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+
+let Screens: typeof import('react-native-screens') | undefined;
+
+try {
+  Screens = require('react-native-screens');
+} catch (e) {
+  // Ignore
+}
+
+export const MaybeScreenContainer = ({
+  enabled,
+  ...rest
+}: ViewProps & {
+  enabled: boolean;
+  hasTwoStates: boolean;
+  children: React.ReactNode;
+}) => {
+  if (Screens?.screensEnabled?.()) {
+    return <Screens.ScreenContainer enabled={enabled} {...rest} />;
+  }
+
+  return <View {...rest} />;
+};
+
+export function MaybeScreen({ visible, children, ...rest }: Props) {
+  if (Screens?.screensEnabled?.()) {
+    return (
+      <Screens.Screen activityState={visible ? 2 : 0} {...rest}>
+        {children}
+      </Screens.Screen>
+    );
+  }
+
+  return (
+    <ResourceSavingView visible={visible} {...rest}>
+      {children}
+    </ResourceSavingView>
+  );
+}

smart-app-city/frontend/node_modules/@react-navigation/bottom-tabs/src/views/TabBarIcon.tsx

@@ -0,0 +1,110 @@
+import type { Route } from '@react-navigation/native';
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import Badge from './Badge';
+
+type Props = {
+  route: Route<string>;
+  horizontal: boolean;
+  badge?: string | number;
+  badgeStyle?: StyleProp<TextStyle>;
+  activeOpacity: number;
+  inactiveOpacity: number;
+  activeTintColor: string;
+  inactiveTintColor: string;
+  renderIcon: (props: {
+    focused: boolean;
+    color: string;
+    size: number;
+  }) => React.ReactNode;
+  style: StyleProp<ViewStyle>;
+};
+
+export default function TabBarIcon({
+  route: _,
+  horizontal,
+  badge,
+  badgeStyle,
+  activeOpacity,
+  inactiveOpacity,
+  activeTintColor,
+  inactiveTintColor,
+  renderIcon,
+  style,
+}: Props) {
+  const size = 25;
+
+  // We render the icon twice at the same position on top of each other:
+  // active and inactive one, so we can fade between them.
+  return (
+    <View
+      style={[horizontal ? styles.iconHorizontal : styles.iconVertical, style]}
+    >
+      <View style={[styles.icon, { opacity: activeOpacity }]}>
+        {renderIcon({
+          focused: true,
+          size,
+          color: activeTintColor,
+        })}
+      </View>
+      <View style={[styles.icon, { opacity: inactiveOpacity }]}>
+        {renderIcon({
+          focused: false,
+          size,
+          color: inactiveTintColor,
+        })}
+      </View>
+      <Badge
+        visible={badge != null}
+        style={[
+          styles.badge,
+          horizontal ? styles.badgeHorizontal : styles.badgeVertical,
+          badgeStyle,
+        ]}
+        size={(size * 3) / 4}
+      >
+        {badge}
+      </Badge>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    // We render the icon twice at the same position on top of each other:
+    // active and inactive one, so we can fade between them:
+    // Cover the whole iconContainer:
+    position: 'absolute',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    // Workaround for react-native >= 0.54 layout bug
+    minWidth: 25,
+  },
+  iconVertical: {
+    flex: 1,
+  },
+  iconHorizontal: {
+    height: '100%',
+    marginTop: 3,
+  },
+  badge: {
+    position: 'absolute',
+    left: 3,
+  },
+  badgeVertical: {
+    top: 3,
+  },
+  badgeHorizontal: {
+    top: 7,
+  },
+});