remove all inline styles

app/screens/ArtistView.tsx

@@ -91,7 +91,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     }
   })
 
-  const albumSize = albumsLayout.width / 2 - styles.container.paddingHorizontal / 2
+  const albumSize = albumsLayout.width / 2 - styles.contentContainer.paddingHorizontal / 2
 
   if (!artist) {
     return <ArtistViewFallback />
@@ -102,7 +102,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
     .sort((a, b) => (b.year || 0) - (a.year || 0))
 
   return (
-    <View style={{ flex: 1 }}>
+    <View style={styles.container}>
       <HeaderBar title={title} headerStyle={[styles.header, animatedOpacity]} />
       <GradientScrollView
         onLayout={coverLayout.onLayout}
@@ -114,7 +114,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>
-        <View style={styles.container}>
+        <View style={styles.contentContainer}>
           {artist.topSongs.length > 0 ? (
             <TopSongs songs={artist.topSongs} name={artist.name} artistId={artist.id} />
           ) : (
@@ -135,6 +135,9 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
 const artistCoverHeight = 350
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
   header: {
     position: 'absolute',
     zIndex: 1,
@@ -149,7 +152,7 @@ const styles = StyleSheet.create({
   scrollContent: {
     alignItems: 'center',
   },
-  container: {
+  contentContainer: {
     minHeight: artistCoverHeight * 2,
     width: '100%',
     paddingHorizontal: 20,

app/screens/NowPlayingView.tsx

@@ -15,7 +15,7 @@ import formatDuration from '@app/util/formatDuration'
 import Slider from '@react-native-community/slider'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback, useEffect, useState } from 'react'
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, StyleSheet, Text, TextStyle, View } from 'react-native'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { RepeatMode, State } from 'react-native-track-player'
 import IconFA from 'react-native-vector-icons/FontAwesome'
@@ -53,7 +53,7 @@ const NowPlayingHeader = React.memo<{
 
   return (
     <HeaderBar
-      headerStyle={{ backgroundColor: 'transparent' }}
+      headerStyle={headerStyles.bar}
       contextItem={mapTrackExtToSong(track)}
       HeaderCenter={() => (
         <View style={headerStyles.center}>
@@ -72,6 +72,9 @@ const NowPlayingHeader = React.memo<{
 })
 
 const headerStyles = StyleSheet.create({
+  bar: {
+    backgroundColor: 'transparent',
+  },
   center: {
     flex: 1,
     justifyContent: 'center',
@@ -292,13 +295,17 @@ const PlayerControls = () => {
       break
   }
 
+  const repeatExtOpacity: TextStyle = {
+    opacity: repeatMode === RepeatMode.Track ? 1 : 0,
+  }
+
   return (
     <View style={controlsStyles.container}>
       <View style={controlsStyles.top}>
         <View style={controlsStyles.center}>
           <PressableOpacity onPress={() => toggleRepeat()} disabled={disabled} hitSlop={16}>
             <Icon name="repeat" size={26} color={repeatMode === RepeatMode.Off ? 'white' : colors.accent} />
-            <Text style={[controlsStyles.repeatExt, repeatMode === RepeatMode.Track ? { opacity: 1 } : {}]}>1</Text>
+            <Text style={[controlsStyles.repeatExt, repeatExtOpacity]}>1</Text>
           </PressableOpacity>
         </View>
 
@@ -372,7 +379,6 @@ const controlsStyles = StyleSheet.create({
     fontSize: 14,
     position: 'absolute',
     top: 26,
-    opacity: 0,
   },
   buffering: {
     position: 'absolute',

app/screens/ServerView.tsx

@@ -9,7 +9,7 @@ import toast from '@app/util/toast'
 import { useNavigation } from '@react-navigation/native'
 import md5 from 'md5'
 import React, { useCallback, useState } from 'react'
-import { StyleSheet, Text, TextInput, View } from 'react-native'
+import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
 import { v4 as uuidv4 } from 'uuid'
 
 const ServerView: React.FC<{
@@ -139,6 +139,10 @@ const ServerView: React.FC<{
     setAddress(addressFormatted)
   }, [address])
 
+  const deleteStyle: ViewStyle = {
+    display: canRemove() ? 'flex' : 'none',
+  }
+
   return (
     <GradientScrollView style={styles.scroll} contentContainerStyle={styles.scrollContentContainer}>
       <View style={styles.content}>
@@ -185,7 +189,7 @@ const ServerView: React.FC<{
         />
         <Button
           disabled={disableControls()}
-          style={[styles.button, styles.delete, { display: canRemove() ? 'flex' : 'none' }]}
+          style={[styles.button, styles.delete, deleteStyle]}
           title="Delete"
           onPress={remove}
         />