remove all inline styles

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   root: true,
   extends: '@react-native-community',
   rules: {
-    'react-native/no-inline-styles': 0,
+    // 'react-native/no-inline-styles': 0,
     radix: 0,
     '@typescript-eslint/no-unused-vars': ['warn'],
     semi: 0,

app/App.tsx

@@ -2,7 +2,7 @@ import RootNavigator from '@app/navigation/RootNavigator'
 import SplashPage from '@app/screens/SplashPage'
 import colors from '@app/styles/colors'
 import React from 'react'
-import { StatusBar, View } from 'react-native'
+import { StatusBar, View, StyleSheet } from 'react-native'
 import ProgressHook from './components/ProgressHook'
 import { useStore } from './state/store'
 import { selectTrackPlayer } from './state/trackplayer'
@@ -16,7 +16,7 @@ const Debug = () => {
 
 const App = () => (
   <MenuProvider backHandler={true}>
-    <View style={{ flex: 1, backgroundColor: colors.gradient.high }}>
+    <View style={styles.appContainer}>
       <StatusBar animated={true} backgroundColor={'rgba(0, 0, 0, 0.3)'} barStyle={'light-content'} translucent={true} />
       <SplashPage>
         <ProgressHook />
@@ -27,4 +27,11 @@ const App = () => (
   </MenuProvider>
 )
 
+const styles = StyleSheet.create({
+  appContainer: {
+    flex: 1,
+    backgroundColor: colors.gradient.high,
+  },
+})
+
 export default App

app/components/NowPlayingBar.tsx

@@ -7,7 +7,7 @@ import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
-import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, Pressable, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import { State } from 'react-native-track-player'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
@@ -80,10 +80,10 @@ const NowPlayingBar = React.memo(() => {
   const navigation = useNavigation()
   const track = useStore(selectTrackPlayer.currentTrack)
 
+  const displayStyle: ViewStyle = { display: track ? 'flex' : 'none' }
+
   return (
-    <Pressable
+    <Pressable onPress={() => navigation.navigate('now-playing')} style={[styles.container, displayStyle]}>
-      onPress={() => navigation.navigate('now-playing')}
-      style={{ ...styles.container, display: track ? 'flex' : 'none' }}>
       <ProgressBar />
       <View style={styles.subContainer}>
         <CoverArt

app/components/PressableOpacity.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react'
-import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle } from 'react-native'
+import { GestureResponderEvent, LayoutRectangle, Pressable, PressableProps, ViewStyle, StyleSheet } from 'react-native'
 
 type PressableOpacityProps = PressableProps & {
   ripple?: boolean
@@ -55,7 +55,7 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
   return (
     <Pressable
       {...props}
-      style={[{ justifyContent: 'center', alignItems: 'center' }, props.style as any, { opacity }, disabledStyle]}
+      style={[styles.pressable, props.style as any, { opacity }, disabledStyle]}
       android_ripple={
         props.ripple
           ? {
@@ -74,4 +74,11 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
   )
 }
 
+const styles = StyleSheet.create({
+  pressable: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
 export default React.memo(PressableOpacity)

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}
         />