added comments for clarity

Author: felixkoczan

ADPCMobileApp_v2.0/App.js

@@ -1,13 +1,17 @@
+// App.js, entry point into the app
 // Import necessary hooks and modules from React, React Native, and other dependencies.
 import React, { useEffect, useContext, useState } from 'react';
 import { PermissionsAndroid, Platform, StatusBar, StyleSheet, ActivityIndicator, View, Text } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native'; // For managing navigation.
-import AppNavigation from './AppNavigation'; // Custom navigation setup.
-import ThemeProvider from './ThemeProvider'; // Provides theming capabilities.
+import { NavigationContainer } from '@react-navigation/native'; 
+import AppNavigation from './AppNavigation';
+import ThemeProvider from './ThemeProvider'; 
 import { BLEProvider} from './BLEContext';
 import ThemeContext from './ThemeContext';
 
-
+/**
+ * ThemeAwareStatusBar is a functional component that adjusts the status bar
+ * appearance based on the current theme (dark or light).
+ */
 const ThemeAwareStatusBar = () => {
   const { theme } = useContext(ThemeContext);
 
@@ -23,13 +27,13 @@ const App = () => {
   const [loading, setLoading] = useState(true);
   const { theme } = useContext(ThemeContext);
 
-
-  // Use the useEffect hook to request necessary permissions upon app initialization.
+  // useEffect hook to request necessary permissions upon app initialization.
   useEffect(() => {
-
     const requestBluetoothPermissions = async () => {
       try {
         // Check the platform and version to request appropriate permissions.
+        // Android permissions defined in AndroidManifest.xml
+        // iOS permissions defined in Info.plist
         if (Platform.OS === 'android' && Platform.Version >= 31) {
           // For Android 12 (API level 31) and above, request multiple permissions including
           // location access, Bluetooth scan, and Bluetooth connect.
@@ -39,22 +43,21 @@ const App = () => {
             PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,
           ]);
           console.log('Permissions status:', permissionsStatus);
+          // Check if all permissions are granted
           permissionsGranted = Object.values(permissionsStatus).every(status => status === PermissionsAndroid.RESULTS.GRANTED);
         } else if (Platform.OS === 'android' && Platform.Version >= 23) {
           // For Android 6 (Marshmallow, API level 23) to Android 11, request location permission.
           // This is necessary for Bluetooth scanning due to the need to access location information.
           const locationPermissionStatus = await PermissionsAndroid.request(
             PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
           );
-          // Log the outcome of the permission request.
           if (locationPermissionStatus === PermissionsAndroid.RESULTS.GRANTED) {
             console.log('Location permission granted');
           } else {
             console.log('Location permission denied');
           }
         }
       } catch (err) {
-        // Catch and log any errors that occur during the permission request process.
         console.warn(err);
       }
       setLoading(!permissionsGranted);
@@ -63,6 +66,7 @@ const App = () => {
     requestBluetoothPermissions();
   }, []);
 
+  // Render a loading indicator while waiting for permissions
   if (loading) {
     return (
       <View style={[styles.container, { backgroundColor: theme?.backgroundColor || '#FFF' }]}>
@@ -73,6 +77,7 @@ const App = () => {
     );
   }
 
+  // Main app content, wrapped with providers for BLE, theming, and navigation
   return (
     <BLEProvider>
       <ThemeProvider>

ADPCMobileApp_v2.0/AppNavigation.js

@@ -1,6 +1,7 @@
 // Importing necessary React and React Navigation components and contexts.
 import React, { useContext } from 'react';
 import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
+// Importing screens that will be used in navigation.
 import AboutScreen from './screens/AboutScreen';
 import HomeScreen from './screens/HomeScreen';
 import ThemeContext from './ThemeContext';
@@ -10,41 +11,40 @@ import DiscoverDevicesScreen from './screens/DiscoverDevicesScreen';
 import ManageConsentsScreen from './screens/ManageConsentsScreen';
 import HiddenStack from './HiddenStackNavigator';
 
-
-// Create a Drawer navigator instance.
+// DrawerNavigator resembles a "Burger Menu (Three horizontal bars)" in the UI
 const Drawer = createDrawerNavigator();
 
 const AppNavigation = () => {
-    // Access the current theme from ThemeContext to apply dynamic theming.
-    const { theme } = useContext(ThemeContext);
 
+    const { theme } = useContext(ThemeContext);
     // Define a custom drawer content component to customize the appearance of the drawer.
     const CustomDrawerContent = (props) => {
         return (
             <DrawerContentScrollView {...props} style={{ backgroundColor: theme.backgroundColor }}>
                 <DrawerItemList {...props} 
-                    labelStyle={{ color: theme.textColor }} // Assuming you have a textColor in your theme
-                    activeTintColor={theme.textColor} // Use theme colors for active item label
-                    inactiveTintColor={theme.textColor} // Use theme colors for inactive item label
-                    activeBackgroundColor={theme.backgroundColor} // Use theme color for active item background
-                    itemStyle={{ backgroundColor: theme.backgroundColor }} // Use theme color for item background
+                    labelStyle={{ color: theme.textColor }} 
+                    activeTintColor={theme.textColor} 
+                    inactiveTintColor={theme.textColor} 
+                    activeBackgroundColor={theme.backgroundColor} 
+                    itemStyle={{ backgroundColor: theme.backgroundColor }} 
                 />
             </DrawerContentScrollView>
         );
     };
 
     return (
+        // Drawer.Navigator setup with custom configurations for theming and the custom drawer content.
         <Drawer.Navigator
             screenOptions={{
                 drawerLabelStyle: {
                     color: theme.textColor,
                 },
                 headerStyle: {
-                    backgroundColor: theme.backgroundColor, // Apply background color from the theme for header
+                    backgroundColor: theme.backgroundColor, 
                 },
-                headerTintColor: theme.textColor, // Apply text color from the theme for header text
+                headerTintColor: theme.textColor, 
                 drawerStyle: {
-                    backgroundColor: theme.backgroundColor, // Apply background color from the theme for drawer
+                    backgroundColor: theme.backgroundColor, 
                 },
 
 
@@ -122,10 +122,11 @@ const AppNavigation = () => {
                     },
                 }}
             />
+            {/* HiddenStack is used for navigating to the device detail screen but is hidden from the drawer. */}
             <Drawer.Screen 
                 name="Device Details" 
                 component={HiddenStack} 
-                options={{ drawerItemStyle: { height: 0 } }}
+                options={{ drawerItemStyle: { height: 0 } }} // Makes this navigation item not visible in the drawer.
             />
         </Drawer.Navigator>
     );