CU-868f1731u Adding badge back in, trying to fix ios interaction issue.

app.config.ts

@@ -1,9 +1,26 @@
 /* eslint-disable max-lines-per-function */
 import type { ConfigContext, ExpoConfig } from '@expo/config';
+import type { AppIconBadgeConfig } from 'app-icon-badge/types';
 
 import { ClientEnv, Env } from './env';
 const packageJSON = require('./package.json');
 
+const appIconBadgeConfig: AppIconBadgeConfig = {
+  enabled: Env.APP_ENV !== 'production',
+  badges: [
+    {
+      text: Env.APP_ENV,
+      type: 'banner',
+      color: 'white',
+    },
+    {
+      text: Env.VERSION.toString(),
+      type: 'ribbon',
+      color: 'white',
+    },
+  ],
+};
+
 export default ({ config }: ConfigContext): ExpoConfig => ({
   ...config,
   name: Env.NAME,
@@ -238,6 +255,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     '@config-plugins/react-native-webrtc',
     './customGradle.plugin.js',
     './customManifest.plugin.js',
+    ['app-icon-badge', appIconBadgeConfig],
   ],
   extra: {
     ...ClientEnv,

package.json

@@ -94,6 +94,7 @@
     "@sentry/react-native": "~6.10.0",
     "@shopify/flash-list": "1.7.3",
     "@tanstack/react-query": "~5.52.1",
+    "app-icon-badge": "^0.1.2",
     "axios": "~1.7.5",
     "babel-plugin-module-resolver": "^5.0.2",
     "buffer": "^6.0.3",

src/app/(app)/__tests__/_layout.test.tsx

@@ -9,21 +9,22 @@ describe('TabLayout Configuration', () => {
     const expectedTabBarStyle = {
       paddingBottom: 5,
       paddingTop: 5,
-      height: 60, // Default height for portrait mode
+      height: 60,
       elevation: 8, // Ensures tab bar is above other elements on Android
-      zIndex: 100, // Ensures tab bar is above other elements on iOS
+      zIndex: 10, // Ensures tab bar is above other elements on iOS
+      backgroundColor: undefined, // Let the tab bar use its default background
     };
 
     const expectedLandscapeTabBarStyle = {
       paddingBottom: 5,
       paddingTop: 5,
       height: 65, // Height for landscape mode
       elevation: 8,
-      zIndex: 100,
+      zIndex: 10,
     };
 
     // Verify that the configuration object has the required properties
-    expect(expectedTabBarStyle.zIndex).toBe(100);
+    expect(expectedTabBarStyle.zIndex).toBe(10);
     expect(expectedTabBarStyle.elevation).toBe(8);
     expect(expectedLandscapeTabBarStyle.height).toBe(65);
     expect(expectedTabBarStyle.height).toBe(60);
@@ -52,7 +53,7 @@ describe('TabLayout Configuration', () => {
     // Tab bar should have z-index 100
     // NotificationInbox should have lower z-index (999-1000) to not interfere
 
-    const tabBarZIndex = 100;
+    const tabBarZIndex = 10;
     const notificationBackdropZIndex = 999;
     const notificationSidebarZIndex = 1000;
 

src/app/(app)/_layout.tsx

@@ -6,7 +6,7 @@ import { size } from 'lodash';
 import { Contact, ListTree, Map, Megaphone, Menu, Notebook, Settings } from 'lucide-react-native';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { StyleSheet, useWindowDimensions } from 'react-native';
+import { Platform, StyleSheet, useWindowDimensions } from 'react-native';
 
 import { NotificationButton } from '@/components/notifications/NotificationButton';
 import { NotificationInbox } from '@/components/notifications/NotificationInbox';
@@ -224,7 +224,7 @@ export default function TabLayout() {
   }
 
   const content = (
-    <View style={styles.container} pointerEvents="box-none">
+    <View style={styles.container} pointerEvents="auto">
       <View className="flex-1 flex-row" ref={parentRef}>
         {/* Drawer - conditionally rendered as permanent in landscape */}
         {isLandscape ? (
@@ -266,8 +266,8 @@ export default function TabLayout() {
                 paddingTop: 5,
                 height: isLandscape ? 65 : 60,
                 elevation: 8, // Ensure tab bar is above other elements on Android
-                zIndex: 100, // Ensure tab bar is above other elements on iOS
-                backgroundColor: 'transparent', // Ensure proper touch event handling
+                zIndex: 10, // Reduced z-index to prevent stacking issues
+                backgroundColor: undefined, // Let the tab bar use its default background
               },
             }}
           >
@@ -406,5 +406,7 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     height: '100%',
+    // Ensure proper touch event handling in iOS production builds
+    ...(Platform.OS === 'ios' && { overflow: 'hidden' }),
   },
 });