migrating to react-native-vector-icons

android/app/src/main/java/com/subsonify/MainApplication.java

@@ -4,6 +4,7 @@ import android.app.Application;
 import android.content.Context;
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.oblador.vectoricons.VectorIconsPackage;
 import com.rnfs.RNFSPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'SubSonify'
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

ios/Podfile

@@ -14,6 +14,8 @@ target 'SubSonify' do
 
   pod 'RNFS', :path => '../node_modules/react-native-fs'
 
+  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+
   target 'SubSonifyTests' do
     inherit! :complete
     # Pods for testing

ios/SubSonify.xcodeproj/project.pbxproj

@@ -30,6 +30,22 @@
 		1C2DD90415D147FB94C8D10B /* Metropolis-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */; };
 		AAC8571827CB4AFFBD337043 /* Metropolis-Thin.otf in Resources */ = {isa = PBXBuildFile; fileRef = 55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */; };
 		3698E9E7AE4446818C4E5DAB /* Metropolis-ThinItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */; };
+		EE744D04506647E5853398C5 /* AntDesign.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B34C2644DECE40A2899AD6AF /* AntDesign.ttf */; };
+		3698494B9C5C49D9A2E5A325 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FC19790F54E545F9ADE056C3 /* Entypo.ttf */; };
+		B24D71B1E6AE45DCAE09CF49 /* EvilIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = CAABB21861B04490930EB938 /* EvilIcons.ttf */; };
+		CA05C73F64124A5BA13B7652 /* Feather.ttf in Resources */ = {isa = PBXBuildFile; fileRef = D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */; };
+		8D6ED2E54A8F4CBCAD2D164B /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1A8527EE22F446E4B067E564 /* FontAwesome.ttf */; };
+		5D58E34F18864C4BB68B9EB9 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */; };
+		300E37B9E29F48088865888A /* FontAwesome5_Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */; };
+		04670ECA3CE8486DBA07E762 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */; };
+		F78303F27C674A489E05D99C /* Fontisto.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */; };
+		F98666B871D349669346343E /* Foundation.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B979343B0506407192CB4398 /* Foundation.ttf */; };
+		DF33D5F42A5341CAA0094D2C /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8690DE43639E494AA0E0C44D /* Ionicons.ttf */; };
+		B0EF26A9FF99462E830121F8 /* MaterialCommunityIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */; };
+		2D9C331806954E5093015065 /* MaterialIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */; };
+		82B69B2602364752AB31CC61 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 436737B827214D6183FCA76D /* Octicons.ttf */; };
+		C4CC5DA88DF0438BA4D157CD /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */; };
+		AB230364459D49B2A063B309 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -148,6 +164,22 @@
 		FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */ = {isa = PBXFileReference; name = "Metropolis-SemiBoldItalic.otf"; path = "../assets/fonts/Metropolis-SemiBoldItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */ = {isa = PBXFileReference; name = "Metropolis-Thin.otf"; path = "../assets/fonts/Metropolis-Thin.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */ = {isa = PBXFileReference; name = "Metropolis-ThinItalic.otf"; path = "../assets/fonts/Metropolis-ThinItalic.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B34C2644DECE40A2899AD6AF /* AntDesign.ttf */ = {isa = PBXFileReference; name = "AntDesign.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		FC19790F54E545F9ADE056C3 /* Entypo.ttf */ = {isa = PBXFileReference; name = "Entypo.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Entypo.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		CAABB21861B04490930EB938 /* EvilIcons.ttf */ = {isa = PBXFileReference; name = "EvilIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */ = {isa = PBXFileReference; name = "Feather.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Feather.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		1A8527EE22F446E4B067E564 /* FontAwesome.ttf */ = {isa = PBXFileReference; name = "FontAwesome.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Brands.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Brands.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Regular.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */ = {isa = PBXFileReference; name = "FontAwesome5_Solid.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome5_Solid.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */ = {isa = PBXFileReference; name = "Fontisto.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Fontisto.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		B979343B0506407192CB4398 /* Foundation.ttf */ = {isa = PBXFileReference; name = "Foundation.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		8690DE43639E494AA0E0C44D /* Ionicons.ttf */ = {isa = PBXFileReference; name = "Ionicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; name = "MaterialCommunityIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */ = {isa = PBXFileReference; name = "MaterialIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		436737B827214D6183FCA76D /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -334,6 +366,22 @@
 				FBDA54C202524518896BC94A /* Metropolis-SemiBoldItalic.otf */,
 				55F76E87376B41A6819E5049 /* Metropolis-Thin.otf */,
 				0A742EE66CEC48B5984D1DAB /* Metropolis-ThinItalic.otf */,
+				B34C2644DECE40A2899AD6AF /* AntDesign.ttf */,
+				FC19790F54E545F9ADE056C3 /* Entypo.ttf */,
+				CAABB21861B04490930EB938 /* EvilIcons.ttf */,
+				D4F0C60E3AAB41919FBFA2B0 /* Feather.ttf */,
+				1A8527EE22F446E4B067E564 /* FontAwesome.ttf */,
+				4FC78144CBEB4B5992BCE269 /* FontAwesome5_Brands.ttf */,
+				FCB88C9A03214E3C8618FE89 /* FontAwesome5_Regular.ttf */,
+				7749962EF1324DF68ED71F6E /* FontAwesome5_Solid.ttf */,
+				E2833DB2351F4EE0A9F11E3E /* Fontisto.ttf */,
+				B979343B0506407192CB4398 /* Foundation.ttf */,
+				8690DE43639E494AA0E0C44D /* Ionicons.ttf */,
+				152A0811821D4402AD65A88F /* MaterialCommunityIcons.ttf */,
+				79E0530BB912468EA6B53B9B /* MaterialIcons.ttf */,
+				436737B827214D6183FCA76D /* Octicons.ttf */,
+				A260BE9A793A4032B82A29DF /* SimpleLineIcons.ttf */,
+				13D610D8ECEF4A5BAA028AA0 /* Zocial.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -523,6 +571,22 @@
 				1C2DD90415D147FB94C8D10B /* Metropolis-SemiBoldItalic.otf in Resources */,
 				AAC8571827CB4AFFBD337043 /* Metropolis-Thin.otf in Resources */,
 				3698E9E7AE4446818C4E5DAB /* Metropolis-ThinItalic.otf in Resources */,
+				EE744D04506647E5853398C5 /* AntDesign.ttf in Resources */,
+				3698494B9C5C49D9A2E5A325 /* Entypo.ttf in Resources */,
+				B24D71B1E6AE45DCAE09CF49 /* EvilIcons.ttf in Resources */,
+				CA05C73F64124A5BA13B7652 /* Feather.ttf in Resources */,
+				8D6ED2E54A8F4CBCAD2D164B /* FontAwesome.ttf in Resources */,
+				5D58E34F18864C4BB68B9EB9 /* FontAwesome5_Brands.ttf in Resources */,
+				300E37B9E29F48088865888A /* FontAwesome5_Regular.ttf in Resources */,
+				04670ECA3CE8486DBA07E762 /* FontAwesome5_Solid.ttf in Resources */,
+				F78303F27C674A489E05D99C /* Fontisto.ttf in Resources */,
+				F98666B871D349669346343E /* Foundation.ttf in Resources */,
+				DF33D5F42A5341CAA0094D2C /* Ionicons.ttf in Resources */,
+				B0EF26A9FF99462E830121F8 /* MaterialCommunityIcons.ttf in Resources */,
+				2D9C331806954E5093015065 /* MaterialIcons.ttf in Resources */,
+				82B69B2602364752AB31CC61 /* Octicons.ttf in Resources */,
+				C4CC5DA88DF0438BA4D157CD /* SimpleLineIcons.ttf in Resources */,
+				AB230364459D49B2A063B309 /* Zocial.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/SubSonify/Info.plist

@@ -71,6 +71,22 @@
 		<string>Metropolis-SemiBoldItalic.otf</string>
 		<string>Metropolis-Thin.otf</string>
 		<string>Metropolis-ThinItalic.otf</string>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
 	</array>
 </dict>
 </plist>

package.json

@@ -32,6 +32,7 @@
     "react-native-screens": "^3.4.0",
     "react-native-tab-view": "^2.16.0",
     "react-native-track-player": "https://github.com/austinried/react-native-track-player",
+    "react-native-vector-icons": "^8.1.0",
     "uuid": "^8.3.2",
     "xmldom": "^0.5.0"
   },
@@ -42,6 +43,7 @@
     "@types/jest": "^26.0.23",
     "@types/md5": "^2.3.0",
     "@types/react-native": "^0.64.5",
+    "@types/react-native-vector-icons": "^6.4.7",
     "@types/react-test-renderer": "^16.9.2",
     "@types/uuid": "^8.3.0",
     "@types/xmldom": "^0.1.30",

src/components/NowPlayingLayout.tsx

@@ -3,6 +3,11 @@ import { useAtomValue } from 'jotai/utils'
 import React from 'react'
 import { StatusBar, StyleSheet, Text, View } from 'react-native'
 import { State } from 'react-native-track-player'
+import IconFA from 'react-native-vector-icons/FontAwesome'
+import IconFA5 from 'react-native-vector-icons/FontAwesome5'
+import Icon from 'react-native-vector-icons/Ionicons'
+import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons'
+import IconMat from 'react-native-vector-icons/MaterialIcons'
 import {
   currentTrackAtom,
   playerStateAtom,
@@ -14,11 +19,11 @@ import {
   useProgress,
 } from '../state/trackplayer'
 import colors from '../styles/colors'
-import text, { Font } from '../styles/text'
+import { Font } from '../styles/text'
 import { formatDuration } from '../util'
 import CoverArt from './common/CoverArt'
 import ImageGradientBackground from './common/ImageGradientBackground'
-import PressableImage from './common/PressableImage'
+import PressableOpacity from './common/PressableOpacity'
 
 const NowPlayingHeader = () => {
   const queueName = useAtomValue(queueNameAtom)
@@ -26,27 +31,15 @@ const NowPlayingHeader = () => {
 
   return (
     <View style={headerStyles.container}>
-      <PressableImage
+      <PressableOpacity onPress={() => navigation.goBack()} style={headerStyles.icons} ripple={true}>
-        onPress={() => navigation.goBack()}
+        <IconMat name="arrow-back" color="white" size={25} />
-        source={require('../../res/arrow_left-fill.png')}
+      </PressableOpacity>
-        style={headerStyles.icons}
+      <Text numberOfLines={1} style={headerStyles.queueName}>
-        tintColor="white"
-        hitSlop={12}
-        ripple={true}
-        padding={18}
-      />
-      <Text numberOfLines={2} style={headerStyles.queueName}>
         {queueName || 'Nothing playing...'}
       </Text>
-      <PressableImage
+      <PressableOpacity onPress={undefined} style={headerStyles.icons} ripple={true}>
-        onPress={() => {}}
+        <IconMat name="more-vert" color="white" size={25} />
-        source={require('../../res/more_vertical.png')}
+      </PressableOpacity>
-        style={headerStyles.icons}
-        tintColor="white"
-        hitSlop={12}
-        ripple={true}
-        padding={18}
-      />
     </View>
   )
 }
@@ -54,6 +47,7 @@ const NowPlayingHeader = () => {
 const headerStyles = StyleSheet.create({
   container: {
     height: 58,
+    width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -64,7 +58,11 @@ const headerStyles = StyleSheet.create({
     marginHorizontal: 8,
   },
   queueName: {
-    ...text.paragraph,
+    fontFamily: Font.bold,
+    fontSize: 16,
+    color: colors.text.primary,
+    flex: 1,
+    textAlign: 'center',
   },
 })
 
@@ -87,7 +85,7 @@ const coverArtStyles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    padding: 20,
+    paddingBottom: 20,
   },
 })
 
@@ -96,6 +94,7 @@ const SongInfo = () => {
 
   return (
     <View style={infoStyles.container}>
+      <View style={infoStyles.details}>
         <Text numberOfLines={1} style={infoStyles.title}>
           {track?.title}
         </Text>
@@ -103,24 +102,38 @@ const SongInfo = () => {
           {track?.artist}
         </Text>
       </View>
+      <View style={infoStyles.controls}>
+        <PressableOpacity onPress={undefined}>
+          <IconFA name="star-o" size={32} color={colors.text.secondary} />
+        </PressableOpacity>
+      </View>
+    </View>
   )
 }
 
 const infoStyles = StyleSheet.create({
   container: {
     width: '100%',
-    alignItems: 'center',
+    flexDirection: 'row',
-    paddingHorizontal: 20,
+  },
+  details: {
+    flex: 1,
+    marginRight: 20,
+  },
+  controls: {
+    justifyContent: 'center',
   },
   title: {
-    ...text.songListTitle,
+    height: 28,
+    fontFamily: Font.bold,
     fontSize: 22,
-    textAlign: 'center',
+    color: colors.text.primary,
   },
   artist: {
-    ...text.songListSubtitle,
+    height: 20,
-    fontSize: 14,
+    fontFamily: Font.regular,
-    textAlign: 'center',
+    fontSize: 16,
+    color: colors.text.secondary,
   },
 })
 
@@ -151,7 +164,6 @@ const seekStyles = StyleSheet.create({
   container: {
     width: '100%',
     marginTop: 26,
-    paddingHorizontal: 20,
   },
   barContainer: {
     flexDirection: 'row',
@@ -194,7 +206,7 @@ const PlayerControls = () => {
   const next = useNext()
   const previous = usePrevious()
 
-  let playPauseIcon: number
+  let playPauseIcon: string
   let playPauseAction: undefined | (() => void)
   let disabled: boolean
 
@@ -203,41 +215,56 @@ const PlayerControls = () => {
     case State.Buffering:
     case State.Connecting:
       disabled = false
-      playPauseIcon = require('../../res/pause_circle-fill.png')
+      playPauseIcon = 'pause-circle'
       playPauseAction = pause
       break
     case State.Paused:
       disabled = false
-      playPauseIcon = require('../../res/play_circle-fill.png')
+      playPauseIcon = 'play-circle'
       playPauseAction = play
       break
     default:
       disabled = true
-      playPauseIcon = require('../../res/play_circle-fill.png')
+      playPauseIcon = 'play-circle'
       playPauseAction = undefined
       break
   }
 
   return (
     <View style={controlsStyles.container}>
-      <PressableImage
+      <View style={controlsStyles.top}>
-        onPress={disabled ? undefined : previous}
+        <View style={controlsStyles.center}>
-        source={require('../../res/previous-fill.png')}
+          <PressableOpacity onPress={undefined} disabled={disabled}>
-        style={controlsStyles.skip}
+            <Icon name="repeat" size={26} color="white" />
-        disabled={disabled}
+          </PressableOpacity>
-      />
+        </View>
-      <PressableImage
+
-        onPress={playPauseAction}
+        <View style={controlsStyles.center}>
-        source={playPauseIcon}
+          <PressableOpacity onPress={previous} disabled={disabled}>
-        style={controlsStyles.play}
+            <IconFA5 name="step-backward" size={36} color="white" />
-        disabled={disabled}
+          </PressableOpacity>
-      />
+          <PressableOpacity onPress={playPauseAction} disabled={disabled} style={controlsStyles.play}>
-      <PressableImage
+            <IconFA name={playPauseIcon} size={82} color="white" />
-        onPress={disabled ? undefined : next}
+          </PressableOpacity>
-        source={require('../../res/next-fill.png')}
+          <PressableOpacity onPress={next} disabled={disabled}>
-        style={controlsStyles.skip}
+            <IconFA5 name="step-forward" size={36} color="white" />
-        disabled={disabled}
+          </PressableOpacity>
-      />
+        </View>
+
+        <View style={controlsStyles.center}>
+          <PressableOpacity onPress={undefined} disabled={disabled}>
+            <Icon name="shuffle" size={26} color="white" />
+          </PressableOpacity>
+        </View>
+      </View>
+      <View style={controlsStyles.bottom}>
+        <PressableOpacity onPress={undefined} disabled={disabled}>
+          <IconMatCom name="cast-audio" size={20} color="white" />
+        </PressableOpacity>
+        <PressableOpacity onPress={undefined} disabled={disabled}>
+          <IconMatCom name="playlist-play" size={24} color="white" />
+        </PressableOpacity>
+      </View>
     </View>
   )
 }
@@ -245,19 +272,27 @@ const PlayerControls = () => {
 const controlsStyles = StyleSheet.create({
   container: {
     width: '100%',
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingBottom: 8,
+  },
+  bottom: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: 10,
+    paddingBottom: 34,
+  },
+  play: {
+    marginHorizontal: 30,
+  },
+  center: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: 75,
-  },
-  skip: {
-    height: 40,
-    width: 40,
-    marginHorizontal: 18,
-  },
-  play: {
-    height: 90,
-    width: 90,
   },
 })
 
@@ -265,19 +300,28 @@ const NowPlayingLayout = () => {
   const track = useAtomValue(currentTrackAtom)
 
   return (
-    <View
+    <View style={styles.container}>
-      style={{
-        flex: 1,
-        paddingTop: StatusBar.currentHeight,
-      }}>
       <ImageGradientBackground imageUri={track?.artworkThumb as string} imageKey={`${track?.album}${track?.artist}`} />
       <NowPlayingHeader />
+      <View style={styles.content}>
         <SongCoverArt />
         <SongInfo />
         <SeekBar />
         <PlayerControls />
       </View>
+    </View>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: StatusBar.currentHeight,
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 30,
+  },
+})
+
 export default NowPlayingLayout

src/components/common/PressableOpacity.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react'
+import { LayoutRectangle, Pressable, PressableProps } from 'react-native'
+
+type PressableOpacityProps = PressableProps & {
+  ripple?: boolean
+}
+
+const PressableOpacity: React.FC<PressableOpacityProps> = props => {
+  const [opacity, setOpacity] = useState(1)
+  const [dimensions, setDimensions] = useState<LayoutRectangle | undefined>(undefined)
+
+  useEffect(() => {
+    props.disabled === true ? setOpacity(0.3) : setOpacity(1)
+  }, [props.disabled])
+
+  return (
+    <Pressable
+      {...props}
+      style={[{ justifyContent: 'center', alignItems: 'center' }, props.style as any, { opacity }]}
+      android_ripple={
+        props.ripple
+          ? {
+              color: 'rgba(255,255,255,0.26)',
+              radius: dimensions ? dimensions.width / 2 : undefined,
+            }
+          : undefined
+      }
+      onLayout={event => setDimensions(event.nativeEvent.layout)}
+      onPressIn={() => {
+        if (!props.disabled) {
+          setOpacity(0.4)
+        }
+      }}
+      onPressOut={() => {
+        if (!props.disabled) {
+          setOpacity(1)
+        }
+      }}>
+      {props.children}
+    </Pressable>
+  )
+}
+
+export default PressableOpacity

yarn.lock

@@ -1320,7 +1320,15 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-native@^0.64.5":
+"@types/react-native-vector-icons@^6.4.7":
+  version "6.4.7"
+  resolved "https://registry.yarnpkg.com/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.7.tgz#862039d668afcff42690b179b2a61dc762b84f73"
+  integrity sha512-srU4IWO5ghzm96dwyiKRYJCGD+Q0Lcu8NsWOXLi4pRPH24mb68XhrqW5Gb63AeiXlAOFsaOl2Irlsg79BNYt4A==
+  dependencies:
+    "@types/react" "*"
+    "@types/react-native" "*"
+
+"@types/react-native@*", "@types/react-native@^0.64.5":
   version "0.64.10"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.10.tgz#5eb6a72c77ce0f7e6e14b19c61a6bc585975eef5"
   integrity sha512-3Kb9QM5/WZ6p58yZ7VPbvjvi6Wc/ZkESgJhKso1gKkNuHBe/4WL6586R2JRDiz9Tsxal9lMnbj3fligBVGl8PA==
@@ -2101,6 +2109,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -3118,7 +3135,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -4335,6 +4352,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash._reinterpolate@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+
 lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -4345,11 +4367,51 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.frompairs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.frompairs/-/lodash.frompairs-4.0.1.tgz#bc4e5207fa2757c136e573614e9664506b2b1bd2"
+  integrity sha1-vE5SB/onV8E25XNhTpZkUGsrG9I=
+
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+  integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
+
+lodash.pick@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
+  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
+
+lodash.template@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+    lodash.templatesettings "^4.0.0"
+
+lodash.templatesettings@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
+  dependencies:
+    lodash._reinterpolate "^3.0.0"
+
 lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
@@ -5475,6 +5537,20 @@ react-native-tab-view@^2.16.0:
   version "2.0.0-rc16"
   resolved "https://github.com/austinried/react-native-track-player#358fd07b817575a494688dca5b093eebc0865a5d"
 
+react-native-vector-icons@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-vector-icons/-/react-native-vector-icons-8.1.0.tgz#e8ee2b17bc4d9f636da1c6f67feee8e2a850c3d8"
+  integrity sha512-sHIdBB6Y0dHaot2fMXgy5J/hhCn5YuyN7SKDNFgPzL8KA1oF2/v7mgYMavnK7LIIs2dJoGnDANKf61dsU+TZlg==
+  dependencies:
+    lodash.frompairs "^4.0.1"
+    lodash.isequal "^4.5.0"
+    lodash.isstring "^4.0.1"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+    lodash.template "^4.5.0"
+    prop-types "^15.7.2"
+    yargs "^16.1.1"
+
 react-native@0.64.1:
   version "0.64.1"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.64.1.tgz#cd38f5b47b085549686f34eb0c9dcd466f307635"
@@ -6780,6 +6856,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -6869,6 +6954,11 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
   integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
@@ -6882,6 +6972,11 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
+
 yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
@@ -6898,3 +6993,16 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
+
+yargs@^16.1.1:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"