docs: fix all jsdocs warnings from linter

.eslintrc.json

@@ -40,7 +40,11 @@
 		"es2021": true
 	},
 	"plugins": ["react", "react-native", "react-hooks"],
-	"extends": ["eslint:recommended", "plugin:react/recommended"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"plugin:jsdoc/recommended"
+	],
 	"rules": {
 		"react-native/no-unused-styles": 2,
 		"react-native/split-platform-components": 2,
@@ -54,6 +58,13 @@
 				"ignoreClassNames": false,
 				"ignoreStyleProperties": false
 			}
-		]
+		],
+		"react/no-multi-comp": [2, { "ignoreStateless": true }],
+		"react/jsx-pascal-case": 2,
+		"jsx-quotes": ["error", "prefer-double"],
+		"no-multi-spaces": "error"
+	},
+	"globals": {
+		"JSX": "readonly"
 	}
 }

App.js

@@ -4,6 +4,12 @@ import { NavigationContainer } from '@react-navigation/native';
 import BottomTabBar from './src/components/BottomTabBar';
 import StoreProvider from './src/context/Context';
 
+/**
+ * Function as the starting point of the App.
+ *
+ * @returns {JSX.Element} App components with Store, Navigation,
+ * and Bottom Tab Bar.
+ */
 export default function App() {
 	return (
 		<StoreProvider>

package.json

@@ -7,7 +7,8 @@
 		"ios": "react-native run-ios",
 		"start": "react-native start",
 		"test": "jest",
-		"lint": "eslint ."
+		"lint": "eslint src",
+		"lint-fix": "eslint src --fix"
 	},
 	"dependencies": {
 		"@react-native-community/geolocation": "^3.0.2",
@@ -35,6 +36,7 @@
 		"eslint": "^8.26.0",
 		"eslint-config-standard": "^17.0.0",
 		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsdoc": "^39.6.2",
 		"eslint-plugin-n": "^15.4.0",
 		"eslint-plugin-promise": "^6.1.1",
 		"eslint-plugin-react": "^7.31.10",

src/components/BottomTabBar.js

@@ -16,8 +16,13 @@ import LinearGradient from 'react-native-linear-gradient';
 const Tab = createBottomTabNavigator();
 const { height } = Dimensions.get('screen');
 
-/** This is main component for Bottom Tab Bar */
-function BottomTabBar({ navigation }) {
+/**
+ * This is main component for Bottom Tab Bar
+ *
+ * @returns {JSX.Element} - React Component for Bottom Tab Bar
+ * and Screens for this app.
+ */
+function BottomTabBar() {
 	return (
 		<Tab.Navigator
 			screenOptions={{
@@ -38,17 +43,17 @@ function BottomTabBar({ navigation }) {
 		>
 			<Tab.Screen
 				name="Map"
-				children={() => <Map navigation={navigation} />}
+				children={() => <Map />}
 				options={tabOptions(icons.tabMapPurple)}
 			/>
 			<Tab.Screen
 				name="Now Playing"
-				children={() => <NowPlaying navigation={navigation} />}
+				children={() => <NowPlaying />}
 				options={tabOptions(icons.logoWhite, true)}
 			/>
 			<Tab.Screen
 				name="Profile"
-				children={() => <Profile navigation={navigation} />}
+				children={() => <Profile />}
 				options={tabOptions(icons.tabProfilePurple)}
 			/>
 		</Tab.Navigator>
@@ -59,7 +64,13 @@ BottomTabBar.propTypes = {
 	navigation: PropTypes.object,
 };
 
-/** This function specify the tab options for each distinct tab */
+/**
+ * This function specify the tab options for each distinct tab
+ *
+ * @param {number} icon - Icon for each Tab to show.
+ * @param {boolean} isLogo - Flag to indicate if a Tab is for the Logo.
+ * @returns {object} - Options for Tab Screen options prop.
+ */
 function tabOptions(icon, isLogo) {
 	return {
 		tabBarIcon: ({ focused, size }) => (
@@ -75,7 +86,16 @@ function tabOptions(icon, isLogo) {
 	};
 }
 
-/** This is a Tab Icon component to be passed to tabBarIcon. */
+/**
+ * This is a Tab Icon component to be passed to tabBarIcon.
+ *
+ * @param {object} props - Object containing props for this component.
+ * @param {boolean} props.focused — Flag to indicate which Tab is focused.
+ * @param {number} props.icon - Icon for each Tab to show.
+ * @param {boolean} props.isLogo - Flag to indicate if a Tab is for the Logo.
+ * @param {number} props.size — Size of the Tab.
+ * @returns {JSX.Element} - React Component for each Tab.
+ */
 function TabIcon({ focused, icon, isLogo, size }) {
 	/** Retrieve live locations from Context. */
 	const { liveLocations } = useLocation();
@@ -123,29 +143,28 @@ function TabIcon({ focused, icon, isLogo, size }) {
 			</View>
 		);
 	}
-	if (isLogo) {
-		return (
-			<View style={[styles.tabLogoContainer, dynamicStyles.tabIconContainer]}>
-				<View
-					style={[
-						styles.tabLogoImageContainer,
-						dynamicStyles.tabLogoImageContainer,
-					]}
-				>
-					<Image
-						source={icon}
-						resizeMode="contain"
-						style={dynamicStyles.tabLogoImage}
-					/>
-				</View>
-				{isNearAndHasRecordingData && (
-					<View style={dynamicStyles.tabLogoTextContainer}>
-						<Text style={styles.tabLogoText}>There&apos;s Music Nearby</Text>
-					</View>
-				)}
+
+	return (
+		<View style={[styles.tabLogoContainer, dynamicStyles.tabIconContainer]}>
+			<View
+				style={[
+					styles.tabLogoImageContainer,
+					dynamicStyles.tabLogoImageContainer,
+				]}
+			>
+				<Image
+					source={icon}
+					resizeMode="contain"
+					style={dynamicStyles.tabLogoImage}
+				/>
 			</View>
-		);
-	}
+			{isNearAndHasRecordingData && (
+				<View style={dynamicStyles.tabLogoTextContainer}>
+					<Text style={styles.tabLogoText}>There&apos;s Music Nearby</Text>
+				</View>
+			)}
+		</View>
+	);
 }
 
 TabIcon.propTypes = {