Fix automatically fixable lint errors

App.js

@@ -27,7 +27,7 @@ import StaticScriptLoader from './utils/StaticScriptLoader';
 import './i18n';
 
 const App = observer(({ skipLoadingScreen }) => {
-	const [isSplashReady, setIsSplashReady] = useState(false);
+	const [ isSplashReady, setIsSplashReady ] = useState(false);
 	const { rootStore } = useStores();
 	const { theme } = useContext(ThemeContext);
 
@@ -55,7 +55,7 @@ const App = observer(({ skipLoadingScreen }) => {
 		} else {
 			ScreenOrientation.unlockAsync();
 		}
-	}, [rootStore.settingStore.isRotationLockEnabled]);
+	}, [ rootStore.settingStore.isRotationLockEnabled ]);
 
 	const updateScreenOrientation = async () => {
 		if (rootStore.settingStore.isRotationLockEnabled) {
@@ -75,7 +75,7 @@ const App = observer(({ skipLoadingScreen }) => {
 	useEffect(() => {
 		// Update the screen orientation
 		updateScreenOrientation();
-	}, [rootStore.isFullscreen]);
+	}, [ rootStore.isFullscreen ]);
 
 	const loadImagesAsync = () => {
 		const images = [

assets/js/NativeShell.staticjs

@@ -70,7 +70,7 @@ window.NativeShell = {
 		},
 
 		getDeviceProfile: function(profileBuilder, profileBuilderVersion) {
-			const audioCodecs = ['opus'];
+			const audioCodecs = [ 'opus' ];
 			const versionNumber = profileBuilderVersion !== undefined && profileBuilderVersion.split('.').map(num => Number.parseInt(num, 10));
 			const isAc3Eac3Disabled = profileBuilderVersion === undefined || (versionNumber.length === 3 && versionNumber[0] === 10 && versionNumber[1] < 7);
 			if (!isAc3Eac3Disabled) {

babel.config.js

@@ -6,6 +6,6 @@
 module.exports = function(api) {
 	api.cache(true);
 	return {
-		presets: ['babel-preset-expo']
+		presets: [ 'babel-preset-expo' ]
 	};
 };

components/BrowserListItem.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import { openBrowser } from '../utils/WebBrowser';
 
-const BrowserListItem = ({item, index}) => (
+const BrowserListItem = ({ item, index }) => (
 	<ListItem
 		topDivider={index === 0}
 		bottomDivider

components/ButtonListItem.js

@@ -8,7 +8,7 @@ import { StyleSheet } from 'react-native';
 import { Button, ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 
-const ButtonListItem = ({item, index}) => (
+const ButtonListItem = ({ item, index }) => (
 	<ListItem
 		topDivider={index === 0}
 		bottomDivider

components/ErrorView.js

@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import React, { useContext } from 'react';
-import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import { Button, Icon, Text, ThemeContext } from 'react-native-elements';
 import PropTypes from 'prop-types';
 

components/NativeShellWebView.js

@@ -21,7 +21,7 @@ import RefreshWebView from './RefreshWebView';
 const NativeShellWebView = observer(React.forwardRef(
 	function NativeShellWebView(props, ref) {
 		const { rootStore } = useStores();
-		const [isRefreshing, setIsRefreshing] = useState(false);
+		const [ isRefreshing, setIsRefreshing ] = useState(false);
 
 		const server = rootStore.serverStore.servers[rootStore.settingStore.activeServer];
 		const isPluginSupported = compareVersions.compare(server.info?.Version, '10.7', '>=');
@@ -133,7 +133,7 @@ true;
 			<RefreshWebView
 				ref={ref}
 				// Allow any origin blocking can break various things like book playback
-				originWhitelist={['*']}
+				originWhitelist={[ '*' ]}
 				source={{ uri: server.urlString }}
 				// Inject javascript for NativeShell
 				// This method is preferred, but only supported on iOS currently

components/RefreshWebView.js

@@ -5,14 +5,14 @@
  */
 import React, { useState } from 'react';
 import { WebView } from 'react-native-webview';
-import { RefreshControl, Dimensions, StyleSheet } from 'react-native';
+import { Dimensions, RefreshControl, StyleSheet } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import PropTypes from 'prop-types';
 
 const RefreshWebView = React.forwardRef(
 	function RefreshWebView({ isRefreshing, onRefresh, refreshControlProps, ...webViewProps }, ref) {
-		const [height, setHeight] = useState(Dimensions.get('screen').height);
-		const [isEnabled, setEnabled] = useState(typeof onRefresh === 'function');
+		const [ height, setHeight ] = useState(Dimensions.get('screen').height);
+		const [ isEnabled, setEnabled ] = useState(typeof onRefresh === 'function');
 
 		return (
 			<ScrollView

components/ServerInput.js

@@ -56,7 +56,7 @@ const ServerInput = observer(({ onSuccess, ...props }) => {
 				const message = validation.message || 'invalid';
 				setIsValidating(false);
 				setIsValid(validation.isValid);
-				setValidationMessage(t([`addServer.validation.${message}`, 'addServer.validation.invalid']));
+				setValidationMessage(t([ `addServer.validation.${message}`, 'addServer.validation.invalid' ]));
 				return;
 			}
 

components/ServerListItem.js

@@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next';
 
 import { getIconName } from '../utils/Icons';
 
-const ServerListItem = ({item, index, activeServer, onDelete, onPress}) => {
+const ServerListItem = ({ item, index, activeServer, onDelete, onPress }) => {
 	const { t } = useTranslation();
 	const { theme } = useContext(ThemeContext);
 

components/SwitchListItem.js

@@ -8,7 +8,7 @@ import { Switch } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 
-const SwitchListItem = ({item, index}) => (
+const SwitchListItem = ({ item, index }) => (
 	<ListItem
 		topDivider={index === 0}
 		bottomDivider

components/ThemeSwitcher.js

@@ -21,7 +21,7 @@ const ThemeSwitcher = () => {
 	useEffect(() => {
 		console.info('theme changed!');
 		replaceTheme(rootStore.settingStore.theme.Elements);
-	}, [rootStore.settingStore.theme]);
+	}, [ rootStore.settingStore.theme ]);
 
 	return <></>;
 };

models/ServerModel.js

@@ -7,7 +7,7 @@ import { action, autorun, computed, decorate, observable } from 'mobx';
 import { ignore } from 'mobx-sync';
 import { task } from 'mobx-task';
 
-import { getServerUrl, fetchServerInfo } from '../utils/ServerValidator';
+import { fetchServerInfo, getServerUrl } from '../utils/ServerValidator';
 
 export default class ServerModel {
 	id

navigation/AppNavigator.js

@@ -7,8 +7,8 @@ import React, { useContext, useEffect } from 'react';
 import { ThemeContext } from 'react-native-elements';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
-	NavigationContainer,
 	getFocusedRouteNameFromRoute,
+	NavigationContainer,
 	useNavigation
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -52,7 +52,7 @@ const Home = observer(() => {
 		navigation.setOptions({
 			tabBarVisible: !rootStore.isFullscreen
 		});
-	}, [rootStore.isFullscreen]);
+	}, [ rootStore.isFullscreen ]);
 
 	return (
 		<HomeStack.Navigator

screens/AddServerScreen.js

@@ -27,7 +27,7 @@ const AddServerScreen = () => {
 		>
 			<SafeAreaView
 				style={styles.container}
-				edges={['right', 'bottom', 'left']}
+				edges={[ 'right', 'bottom', 'left' ]}
 			>
 				<View style={styles.logoContainer}>
 					<Image

screens/ErrorScreen.js

@@ -13,8 +13,8 @@ import { useNavigation, useRoute } from '@react-navigation/native';
 import ErrorView from '../components/ErrorView';
 import Screens from '../constants/Screens';
 
-const ErrorScreen = () =>{
-	const [isRefreshing, setIsRefreshing] = useState(false);
+const ErrorScreen = () => {
+	const [ isRefreshing, setIsRefreshing ] = useState(false);
 	const { theme } = useContext(ThemeContext);
 
 	const insets = useSafeAreaInsets();
@@ -23,7 +23,7 @@ const ErrorScreen = () =>{
 	const route = useRoute();
 	const { icon, heading, message, details, buttonIcon, buttonTitle } = route.params;
 
-	const safeAreaEdges = ['right', 'left'];
+	const safeAreaEdges = [ 'right', 'left' ];
 	if (Platform.OS !== 'ios') {
 		safeAreaEdges.push('top');
 	}
@@ -64,7 +64,7 @@ const ErrorScreen = () =>{
 						tintColor={theme.colors.grey1}
 						backgroundColor={theme.colors.grey0}
 						// Android colors
-						colors={[theme.colors.primary, theme.colors.secondary]}
+						colors={[ theme.colors.primary, theme.colors.secondary ]}
 						progressBackgroundColor={theme.colors.background}
 					/>
 				}

screens/HomeScreen.js

@@ -3,7 +3,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BackHandler, Platform, StyleSheet, View } from 'react-native';
 import { ThemeContext } from 'react-native-elements';
@@ -26,8 +26,8 @@ const HomeScreen = observer(() => {
 	const insets = useSafeAreaInsets();
 	const { theme } = useContext(ThemeContext);
 
-	const [isLoading, setIsLoading] = useState(true);
-	const [httpErrorStatus, setHttpErrorStatus] = useState(null);
+	const [ isLoading, setIsLoading ] = useState(true);
+	const [ httpErrorStatus, setHttpErrorStatus ] = useState(null);
 
 	const webview = useRef(null);
 
@@ -53,7 +53,7 @@ const HomeScreen = observer(() => {
 			BackHandler.addEventListener('hardwareBackPress', onBackPress);
 
 			return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
-		}, [webview])
+		}, [ webview ])
 	);
 
 	// Report media updates to the video plugin
@@ -70,14 +70,14 @@ const HomeScreen = observer(() => {
 	// Clear the error state when the active server changes
 	useEffect(() => {
 		setIsLoading(true);
-	}, [rootStore.settingStore.activeServer]);
+	}, [ rootStore.settingStore.activeServer ]);
 
 	useEffect(() => {
 		if (rootStore.isReloadRequired) {
 			webview.current?.reload();
 			rootStore.isReloadRequired = false;
 		}
-	}, [rootStore.isReloadRequired]);
+	}, [ rootStore.isReloadRequired ]);
 
 	useEffect(() => {
 		if (httpErrorStatus) {
@@ -87,8 +87,8 @@ const HomeScreen = observer(() => {
 					name: 'cloud-off',
 					type: 'material'
 				},
-				heading: t([`home.errors.${errorCode}.heading`, 'home.errors.http.heading']),
-				message: t([`home.errors.${errorCode}.description`, 'home.errors.http.description']),
+				heading: t([ `home.errors.${errorCode}.heading`, 'home.errors.http.heading' ]),
+				message: t([ `home.errors.${errorCode}.description`, 'home.errors.http.description' ]),
 				details: [
 					t('home.errorCode', { errorCode }),
 					t('home.errorUrl', { url: httpErrorStatus.url })
@@ -100,10 +100,10 @@ const HomeScreen = observer(() => {
 				buttonTitle: t('home.retry')
 			});
 		}
-	}, [httpErrorStatus]);
+	}, [ httpErrorStatus ]);
 
 	// When not in fullscreen, the top adjustment is handled by the spacer View for iOS
-	const safeAreaEdges = ['right', 'left'];
+	const safeAreaEdges = [ 'right', 'left' ];
 	if (Platform.OS !== 'ios' || rootStore.isFullscreen) {
 		safeAreaEdges.push('top');
 	}
@@ -144,7 +144,7 @@ const HomeScreen = observer(() => {
 							tintColor: theme.colors.grey1,
 							backgroundColor: theme.colors.grey0,
 							// Android colors
-							colors: [theme.colors.primary, theme.colors.secondary],
+							colors: [ theme.colors.primary, theme.colors.secondary ],
 							progressBackgroundColor: theme.colors.background
 						}}
 						// Error screen is displayed if loading fails
@@ -154,8 +154,8 @@ const HomeScreen = observer(() => {
 									name: 'cloud-off',
 									type: 'material'
 								}}
-								heading={t([`home.errors.${errorCode}.heading`, 'home.errors.offline.heading'])}
-								message={t([`home.errors.${errorCode}.description`, 'home.errors.offline.description'])}
+								heading={t([ `home.errors.${errorCode}.heading`, 'home.errors.offline.heading' ])}
+								message={t([ `home.errors.${errorCode}.description`, 'home.errors.offline.description' ])}
 								details={[
 									t('home.errorCode', { errorCode }),
 									t('home.errorUrl', { url: server.urlString })

screens/SettingsScreen.js

@@ -208,7 +208,7 @@ const SettingsScreen = observer(() => {
 				...styles.container,
 				backgroundColor: theme.colors.background
 			}}
-			edges={['right', 'left']}
+			edges={[ 'right', 'left' ]}
 		>
 			<SectionList
 				sections={getSections()}