Updated the bracketSpacing in .prettierrc and updated all files to reflect this. Also made some minor App style clean up.

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   printWidth: 120,
-  bracketSpacing: false,
+  bracketSpacing: true,
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',

App.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
-import {Image} from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Image } from 'react-native';
 
 import BrandSelector from './src/screens/BrandSelector';
 import SignIn from './src/screens/SignIn';
@@ -19,7 +19,7 @@ const DeviceStack = createNativeStackNavigator();
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{headerShown: false}}>
+      <Stack.Navigator screenOptions={{ headerShown: false }}>
         <Stack.Screen name="BrandSelector" component={BrandSelector} />
         <Stack.Screen name="SignIn" component={SignIn} />
         <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
@@ -38,10 +38,10 @@ function TabScreens() {
         component={DeviceStackScreens}
         options={{
           headerShown: false,
-          tabBarIcon: ({tintColor}) => (
+          tabBarIcon: ({ tintColor }) => (
             <Image
               source={require('./src/assets/server-solid.png')}
-              style={{width: 26, height: 26, tintColor: tintColor}}
+              style={{ width: 26, height: 26, tintColor: tintColor }}
             />
           ),
         }}
@@ -50,10 +50,10 @@ function TabScreens() {
         name="Settings"
         component={Settings}
         options={{
-          tabBarIcon: ({tintColor}) => (
+          tabBarIcon: ({ tintColor }) => (
             <Image
               source={require('./src/assets/cog-solid.png')}
-              style={{width: 26, height: 26, tintColor: tintColor}}
+              style={{ width: 26, height: 26, tintColor: tintColor }}
             />
           ),
         }}

src/AppStyle.js

@@ -1,5 +1,5 @@
-import {StyleSheet} from 'react-native';
-import {useStore} from './Store';
+import { StyleSheet } from 'react-native';
+import { useStore } from './Store';
 
 export function primaryColor() {
   let brandInfo = useStore.getState().brandInfo;
@@ -12,27 +12,27 @@ export function primaryColor() {
 }
 
 export function primaryColorStyle() {
-  return {
+  return StyleSheet.create({
     color: primaryColor(),
-  };
+  });
 }
 
 export const pageStyle = StyleSheet.create({
   container: {
+    // Layout
     flexDirection: 'column',
     flexWrap: 'nowrap',
+    flex: 1,
     justifyContent: 'flex-start',
     alignContent: 'flex-start',
     alignItems: 'center',
-    flex: 1,
+    // Content
     padding: 34,
-    color: '#101010',
-    fontWeight: 'bold',
     backgroundColor: '#eeeeee',
-  },
-  text: {
+    // Base Text
     fontSize: 14,
     fontWeight: 'bold',
+    color: '#101010',
   },
 });
 
@@ -53,19 +53,22 @@ export const pageItemStyle = StyleSheet.create({
   },
   containerButton: {
     height: 40,
-    marginBottom: 10,
     width: '100%',
+    marginBottom: 10,
   },
   inputText: {
+    // Layout
     height: 40,
-    marginBottom: 10,
     width: '100%',
-    borderColor: '#bbbbbb',
-    borderWidth: 1,
-    textAlign: 'left',
-    backgroundColor: '#ffffff',
+    marginBottom: 10,
     paddingLeft: 8,
     paddingRight: 8,
+    // Background and Border
+    backgroundColor: '#ffffff',
+    borderColor: '#bbbbbb',
+    borderWidth: 1,
+    // Text
+    textAlign: 'left',
   },
   buttonText: {
     textAlign: 'center',

src/Store.js

@@ -4,21 +4,21 @@ export const useStore = create(set => ({
   // Session information
   session: null,
   setSession: state => {
-    set({session: state});
+    set({ session: state });
   },
-  clearSession: () => set({session: null}),
+  clearSession: () => set({ session: null }),
 
   // Brand Info
   brandInfo: null,
   setBrandInfo: state => {
-    set({brandInfo: state});
+    set({ brandInfo: state });
   },
-  clearBrandInfo: () => set({brandInfo: null}),
+  clearBrandInfo: () => set({ brandInfo: null }),
 
   // System Info
   systemInfo: null,
   setSystemInfo: state => {
-    set({systemInfo: state});
+    set({ systemInfo: state });
   },
-  clearSystemInfo: () => set({systemInfo: null}),
+  clearSystemInfo: () => set({ systemInfo: null }),
 }));

src/Utils.js

@@ -1,6 +1,6 @@
-import {Alert} from 'react-native';
+import { Alert } from 'react-native';
 
 export function showGeneralError(title, message) {
   console.error(title + ' -> ' + message);
-  Alert.alert(title, message, null, {cancelable: true});
+  Alert.alert(title, message, null, { cancelable: true });
 }

src/components/BrandItem.js

@@ -1,12 +1,12 @@
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, View, Text, Image} from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, Image } from 'react-native';
 
 export class BrandItem extends Component {
   render() {
     return (
       <TouchableOpacity onPress={this.props.onPress}>
         <View style={brandItemStyle.container}>
-          <Image style={brandItemStyle.icon} source={{uri: this.getCompanyIconUri()}} />
+          <Image style={brandItemStyle.icon} source={{ uri: this.getCompanyIconUri() }} />
           <Text style={brandItemStyle.text}>{this.getCompanyName()}</Text>
         </View>
       </TouchableOpacity>

src/components/DeviceItem.js

@@ -1,5 +1,5 @@
-import React, {Component} from 'react';
-import {StyleSheet, TouchableOpacity, View, Text, Image} from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, Image } from 'react-native';
 
 export class DeviceItem extends Component {
   render() {

src/screens/BrandSelector.js

@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
-import {strings} from '../localization/LocalizationStrings';
-import {useStore} from '../Store';
-import {pageStyle, pageItemStyle, primaryColor} from '../AppStyle';
-import {StyleSheet, View, Text, FlatList, TextInput, ActivityIndicator} from 'react-native';
-import {BrandItem} from '../components/BrandItem';
+import React, { Component } from 'react';
+import { strings } from '../localization/LocalizationStrings';
+import { useStore } from '../Store';
+import { pageStyle, pageItemStyle, primaryColor } from '../AppStyle';
+import { StyleSheet, View, Text, FlatList, TextInput, ActivityIndicator } from 'react-native';
+import { BrandItem } from '../components/BrandItem';
 
 export default class BrandSelector extends Component {
   state = {
@@ -58,7 +58,7 @@ export default class BrandSelector extends Component {
               <FlatList
                 style={brandingSelectorStyle.containerList}
                 data={this.state.filtered ? this.state.filteredBrands : this.state.brands}
-                renderItem={({item}) => <BrandItem brand={item} onPress={this.onCompanySelect.bind(this, item)} />}
+                renderItem={({ item }) => <BrandItem brand={item} onPress={this.onCompanySelect.bind(this, item)} />}
               />
             </View>
           </View>
@@ -70,13 +70,13 @@ export default class BrandSelector extends Component {
   filterBrands = searchText => {
     if (searchText) {
       let searchTextLowerCase = searchText.toLowerCase();
-      this.setState({filtered: true});
+      this.setState({ filtered: true });
       this.setState({
         filteredBrands: this.state.brands.filter(b => b.name.toLowerCase().startsWith(searchTextLowerCase)),
       });
     } else {
-      this.setState({filtered: false});
-      this.setState({filteredBrands: []});
+      this.setState({ filtered: false });
+      this.setState({ filteredBrands: [] });
     }
   };
 
@@ -92,10 +92,10 @@ const brandingSelectorStyle = StyleSheet.create({
   containerBrands: {
     flexDirection: 'column',
     flexWrap: 'nowrap',
+    flex: 0,
     justifyContent: 'flex-start',
     alignContent: 'flex-start',
     alignItems: 'center',
-    flex: 0,
   },
   containerSearch: {
     marginBottom: 16,

src/screens/DeviceDetails.js

@@ -1,6 +1,6 @@
-import React, {Component} from 'react';
-import {pageStyle, pageItemStyle} from '../AppStyle';
-import {View, Text} from 'react-native';
+import React, { Component } from 'react';
+import { pageStyle, pageItemStyle } from '../AppStyle';
+import { View, Text } from 'react-native';
 
 export default class DeviceDetails extends Component {
   render() {

src/screens/DeviceList.js

@@ -1,23 +1,23 @@
-import React, {Component} from 'react';
-import {strings} from '../localization/LocalizationStrings';
-import {pageStyle, pageItemStyle} from '../AppStyle';
-import {View, Text, FlatList} from 'react-native';
-import {getDevicesApi, handleApiError} from '../api/apiHandler';
-import {DeviceItem} from '../components/DeviceItem';
+import React, { Component } from 'react';
+import { strings } from '../localization/LocalizationStrings';
+import { pageStyle, pageItemStyle } from '../AppStyle';
+import { View, Text, FlatList } from 'react-native';
+import { getDevicesApi, handleApiError } from '../api/apiHandler';
+import { DeviceItem } from '../components/DeviceItem';
 
 export default class DeviceList extends Component {
-  state = {devices: []};
+  state = { devices: [] };
 
   render() {
     return (
       <View style={pageStyle.container}>
         <View style={pageItemStyle.container}>
-          <Text style={{fontSize: 24, fontWeight: 'bold'}}>Devices</Text>
+          <Text style={{ fontSize: 24, fontWeight: 'bold' }}>Devices</Text>
         </View>
         <View style={pageItemStyle.container}>
           <FlatList
             data={this.state.devices}
-            renderItem={({item}) => <DeviceItem device={item} onPress={this.onDevicePress} />}
+            renderItem={({ item }) => <DeviceItem device={item} onPress={this.onDevicePress} />}
           />
         </View>
       </View>
@@ -35,7 +35,7 @@ export default class DeviceList extends Component {
   getDevices = async () => {
     try {
       const response = await getDevicesApi().getDeviceList();
-      this.setState({devices: response.data.devices});
+      this.setState({ devices: response.data.devices });
       console.log(response.data);
     } catch (error) {
       handleApiError(strings.errors.deviceListTitle, error);

src/screens/ForgotPassword.js

@@ -1,9 +1,9 @@
-import React, {Component} from 'react';
-import {pageStyle, pageItemStyle, primaryColor} from '../AppStyle';
-import {View, Text, TextInput, Button, ActivityIndicator, Alert} from 'react-native';
-import {strings} from '../localization/LocalizationStrings';
-import {authenticationApi, handleApiError} from '../api/apiHandler';
-import {useStore} from '../Store';
+import React, { Component } from 'react';
+import { pageStyle, pageItemStyle, primaryColor } from '../AppStyle';
+import { View, Text, TextInput, Button, ActivityIndicator, Alert } from 'react-native';
+import { strings } from '../localization/LocalizationStrings';
+import { authenticationApi, handleApiError } from '../api/apiHandler';
+import { useStore } from '../Store';
 
 export default class ForgotPassword extends Component {
   state = {
@@ -30,7 +30,7 @@ export default class ForgotPassword extends Component {
             keyboardType="email-address"
             textContentType="emailAddress"
             returnKeyType="go"
-            onChangeText={text => this.setState({email: text})}
+            onChangeText={text => this.setState({ email: text })}
             onSubmitEditing={() => {
               this.state.email && this.onSubmit;
             }}
@@ -57,7 +57,7 @@ export default class ForgotPassword extends Component {
   }
 
   onSubmit = async () => {
-    this.setState({loading: true});
+    this.setState({ loading: true });
     try {
       useStore.getState().clearSession();
 
@@ -73,7 +73,7 @@ export default class ForgotPassword extends Component {
     } catch (error) {
       handleApiError(strings.errors.forgotPasswordTitle, error);
     }
-    this.setState({loading: false});
+    this.setState({ loading: false });
   };
 
   backToSignin = () => {

src/screens/ResetPassword.js

@@ -1,11 +1,11 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {pageStyle, pageItemStyle} from '../AppStyle';
-import {View, Text, TextInput, Button, Alert, ActivityIndicator} from 'react-native';
-import {strings} from '../localization/LocalizationStrings';
-import {authenticationApi, handleApiError} from '../api/apiHandler';
+import React, { useEffect, useRef, useState } from 'react';
+import { pageStyle, pageItemStyle } from '../AppStyle';
+import { View, Text, TextInput, Button, Alert, ActivityIndicator } from 'react-native';
+import { strings } from '../localization/LocalizationStrings';
+import { authenticationApi, handleApiError } from '../api/apiHandler';
 
 export default function ResetPassword(props) {
-  const {userId, password} = props.route.params;
+  const { userId, password } = props.route.params;
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [loading, setLoading] = useState(false);

src/screens/Settings.js

@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
-import {strings} from '../localization/LocalizationStrings';
-import {useStore} from '../Store';
-import {pageStyle, pageItemStyle, primaryColor} from '../AppStyle';
-import {View, Button} from 'react-native';
+import React, { Component } from 'react';
+import { strings } from '../localization/LocalizationStrings';
+import { useStore } from '../Store';
+import { pageStyle, pageItemStyle, primaryColor } from '../AppStyle';
+import { View, Button } from 'react-native';
 
 export default class Settings extends Component {
   render() {