[home][Android] Exclude diagnostic screen code on Android (#19495)

# Why Currently, the code related to the diagnostic screen is always included in the Android bundle. That leads to problems because not all modules used by this code were added to the Home app. So, I've decided to remove all references to the diagnostic screen on Android. # How - Moved all related components to a separate directory. - Moved the navigation part responsible for adding this screen to the main stack. - Made a noop mock of the navigation part on Android. # Test Plan - run the local home app on iOS and Android ✅
expo · Oct 11, 2022 · c722928 · c722928
1 parent e826e7a
commit c722928
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 58 deletions.
diff --git a/home/navigation/Navigation.tsx b/home/navigation/Navigation.tsx
@@ -8,19 +8,16 @@ import {
 import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
 import * as React from 'react';
 import { Platform, StyleSheet, Linking } from 'react-native';
+import { DiagnosticsStackScreen } from 'screens/DiagnosticsScreen';
 
 import DiagnosticsIcon from '../components/Icons';
 import { ColorTheme } from '../constants/Colors';
 import Themes from '../constants/Themes';
 import { AccountModal } from '../screens/AccountModal';
-import AudioDiagnosticsScreen from '../screens/AudioDiagnosticsScreen';
 import { BranchDetailsScreen } from '../screens/BranchDetailsScreen';
 import { BranchListScreen } from '../screens/BranchListScreen';
 import { DeleteAccountScreen } from '../screens/DeleteAccountScreen';
-import { DiagnosticsScreen } from '../screens/DiagnosticsScreen';
-import GeofencingScreen from '../screens/GeofencingScreen';
 import { HomeScreen } from '../screens/HomeScreen';
-import LocationDiagnosticsScreen from '../screens/LocationDiagnosticsScreen';
 import { ProjectScreen } from '../screens/ProjectScreen';
 import { ProjectsListScreen } from '../screens/ProjectsListScreen';
 import QRCodeScreen from '../screens/QRCodeScreen';
@@ -31,12 +28,7 @@ import {
   requestCameraPermissionsAsync,
 } from '../utils/PermissionUtils';
 import BottomTab, { getNavigatorProps } from './BottomTabNavigator';
-import {
-  DiagnosticsStackRoutes,
-  HomeStackRoutes,
-  SettingsStackRoutes,
-  ModalStackRoutes,
-} from './Navigation.types';
+import { HomeStackRoutes, SettingsStackRoutes, ModalStackRoutes } from './Navigation.types';
 import defaultNavigationOptions from './defaultNavigationOptions';
 
 // TODO(Bacon): Do we need to create a new one each time?
@@ -126,41 +118,6 @@ function SettingsStackScreen() {
   );
 }
 
-const DiagnosticsStack = createStackNavigator<DiagnosticsStackRoutes>();
-
-function DiagnosticsStackScreen() {
-  const theme = useThemeName();
-  return (
-    <DiagnosticsStack.Navigator
-      initialRouteName="Diagnostics"
-      detachInactiveScreens={shouldDetachInactiveScreens}
-      screenOptions={defaultNavigationOptions(theme)}>
-      <DiagnosticsStack.Screen
-        name="Diagnostics"
-        component={DiagnosticsScreen}
-        options={{
-          title: 'Diagnostics',
-        }}
-      />
-      <DiagnosticsStack.Screen
-        name="Audio"
-        component={AudioDiagnosticsScreen}
-        options={{ title: 'Audio Diagnostics' }}
-      />
-      <DiagnosticsStack.Screen
-        name="Location"
-        component={LocationDiagnosticsScreen}
-        options={{ title: 'Location Diagnostics' }}
-      />
-      <DiagnosticsStack.Screen
-        name="Geofencing"
-        component={GeofencingScreen}
-        options={{ title: 'Geofencing' }}
-      />
-    </DiagnosticsStack.Navigator>
-  );
-}
-
 const RootStack = createStackNavigator();
 
 function TabNavigator(props: { theme: string }) {

diff --git a/home/screens/AudioDiagnosticsScreen.tsx → ...gnosticsScreen/AudioDiagnosticsScreen.tsx b/home/screens/AudioDiagnosticsScreen.tsx → ...gnosticsScreen/AudioDiagnosticsScreen.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 import { StyleSheet, Switch, View } from 'react-native';
 import { BorderlessButton } from 'react-native-gesture-handler';
 
-import AudioPlayer from '../components/AudioPlayer';
-import { StyledText } from '../components/Text';
-import { StyledScrollView } from '../components/Views';
-import Colors from '../constants/Colors';
-import Environment from '../utils/Environment';
-import { useAudio, useAudioMode } from '../utils/useAudio';
+import AudioPlayer from '../../components/AudioPlayer';
+import { StyledText } from '../../components/Text';
+import { StyledScrollView } from '../../components/Views';
+import Colors from '../../constants/Colors';
+import Environment from '../../utils/Environment';
+import { useAudio, useAudioMode } from '../../utils/useAudio';
 
 const initialAudioMode = {
   interruptionModeIOS: InterruptionModeIOS.MixWithOthers,

diff --git a/home/screens/GeofencingScreen.tsx → ...icsScreen/GeofencingDiagnosticsScreen.tsx b/home/screens/GeofencingScreen.tsx → ...icsScreen/GeofencingDiagnosticsScreen.tsx
@@ -15,8 +15,8 @@ import {
 } from 'react-native';
 import MapView, { Circle, MapPressEvent } from 'react-native-maps';
 
-import NavigationEvents from '../components/NavigationEvents';
-import Button from '../components/PrimaryButton';
+import NavigationEvents from '../../components/NavigationEvents';
+import Button from '../../components/PrimaryButton';
 
 const GEOFENCING_TASK = 'geofencing';
 const REGION_RADIUSES = [30, 50, 75, 100, 150, 200];

diff --git a/home/screens/LocationDiagnosticsScreen.tsx → ...sticsScreen/LocationDiagnosticsScreen.tsx b/home/screens/LocationDiagnosticsScreen.tsx → ...sticsScreen/LocationDiagnosticsScreen.tsx
@@ -17,9 +17,9 @@ import {
 } from 'react-native';
 import MapView, { Polyline } from 'react-native-maps';
 
-import NavigationEvents from '../components/NavigationEvents';
-import Button from '../components/PrimaryButton';
-import Colors from '../constants/Colors';
+import NavigationEvents from '../../components/NavigationEvents';
+import Button from '../../components/PrimaryButton';
+import Colors from '../../constants/Colors';
 
 const STORAGE_KEY = 'expo-home-locations';
 const LOCATION_UPDATES_TASK = 'location-updates';

diff --git a/home/screens/DiagnosticsScreen/index.android.tsx b/home/screens/DiagnosticsScreen/index.android.tsx
@@ -0,0 +1,3 @@
+export function DiagnosticsStackScreen() {
+  return null;
+}
diff --git a/home/screens/DiagnosticsScreen/index.tsx b/home/screens/DiagnosticsScreen/index.tsx
@@ -1,14 +1,63 @@
 import { spacing } from '@expo/styleguide-native';
-import { StackNavigationProp, StackScreenProps } from '@react-navigation/stack';
+import { useTheme } from '@react-navigation/native';
+import {
+  createStackNavigator,
+  StackNavigationProp,
+  StackScreenProps,
+} from '@react-navigation/stack';
+import { ColorTheme } from 'constants/Colors';
 import { Spacer } from 'expo-dev-client-components';
+import defaultNavigationOptions from 'navigation/defaultNavigationOptions';
 import * as React from 'react';
 
 import ScrollView from '../../components/NavigationScrollView';
 import { DiagnosticsStackRoutes } from '../../navigation/Navigation.types';
 import Environment from '../../utils/Environment';
+import AudioDiagnosticsScreen from './AudioDiagnosticsScreen';
 import { DiagnosticButton } from './DiagnosticsButton';
+import GeofencingScreen from './GeofencingDiagnosticsScreen';
+import LocationDiagnosticsScreen from './LocationDiagnosticsScreen';
 
-export function DiagnosticsScreen({
+function useThemeName() {
+  const theme = useTheme();
+  return theme.dark ? ColorTheme.DARK : ColorTheme.LIGHT;
+}
+
+const DiagnosticsStack = createStackNavigator<DiagnosticsStackRoutes>();
+
+export function DiagnosticsStackScreen() {
+  const theme = useThemeName();
+  return (
+    <DiagnosticsStack.Navigator
+      initialRouteName="Diagnostics"
+      screenOptions={defaultNavigationOptions(theme)}>
+      <DiagnosticsStack.Screen
+        name="Diagnostics"
+        component={DiagnosticsScreen}
+        options={{
+          title: 'Diagnostics',
+        }}
+      />
+      <DiagnosticsStack.Screen
+        name="Audio"
+        component={AudioDiagnosticsScreen}
+        options={{ title: 'Audio Diagnostics' }}
+      />
+      <DiagnosticsStack.Screen
+        name="Location"
+        component={LocationDiagnosticsScreen}
+        options={{ title: 'Location Diagnostics' }}
+      />
+      <DiagnosticsStack.Screen
+        name="Geofencing"
+        component={GeofencingScreen}
+        options={{ title: 'Geofencing' }}
+      />
+    </DiagnosticsStack.Navigator>
+  );
+}
+
+function DiagnosticsScreen({
   navigation,
 }: StackScreenProps<DiagnosticsStackRoutes, 'Diagnostics'>) {
   return (