clean up round 1

remove fast-image, switched to all image
cleaned up icons
added fading splash page

app/components/ContextMenu.tsx

@@ -9,7 +9,6 @@ import { NavigationProp, useNavigation } from '@react-navigation/native'
 import { ReactComponentLike } from 'prop-types'
 import React from 'react'
 import { ScrollView, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import { Menu, MenuOption, MenuOptions, MenuTrigger, renderers } from 'react-native-popup-menu'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
@@ -121,15 +120,9 @@ const MenuHeader = React.memo<{
 }>(({ coverArt, artistId, title, subtitle }) => (
   <View style={styles.menuHeader}>
     {artistId ? (
-      <CoverArt
+      <CoverArt type="artist" artistId={artistId} style={styles.coverArt} resizeMode={'cover'} round={true} />
-        type="artist"
-        artistId={artistId}
-        style={styles.coverArt}
-        resizeMode={FastImage.resizeMode.cover}
-        round={true}
-      />
     ) : (
-      <CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={FastImage.resizeMode.cover} />
+      <CoverArt type="cover" coverArt={coverArt} style={styles.coverArt} resizeMode={'cover'} />
     )}
     <View style={styles.menuHeaderText}>
       <Text numberOfLines={1} style={styles.menuTitle}>

app/components/CoverArt.tsx

@@ -2,13 +2,21 @@ import { useArtistArtFile, useCoverArtFile } from '@app/hooks/cache'
 import { CacheFile, CacheImageSize, CacheRequest } from '@app/models/cache'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
-import { ActivityIndicator, StyleSheet, View, ViewStyle, Image, ImageStyle, ImageSourcePropType } from 'react-native'
+import {
-import FastImage from 'react-native-fast-image'
+  ActivityIndicator,
+  Image,
+  ImageResizeMode,
+  ImageSourcePropType,
+  ImageStyle,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
 
 type BaseProps = {
   style?: ViewStyle
   imageStyle?: ImageStyle
-  resizeMode?: keyof typeof FastImage.resizeMode
+  resizeMode?: ImageResizeMode
   round?: boolean
   size?: CacheImageSize
 }
@@ -39,7 +47,7 @@ const ImageSource = React.memo<{ cache?: { file?: CacheFile; request?: CacheRequ
         <Image
           source={source}
           fadeDuration={150}
-          resizeMode={resizeMode || FastImage.resizeMode.contain}
+          resizeMode={resizeMode || 'contain'}
           style={[{ height: style?.height, width: style?.width }, imageStyle]}
           onError={() => setError(true)}
         />

app/components/FilterButton.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     maxWidth: 145,
   },
   optionsContainer: {
-    backgroundColor: 'rgba(45, 45, 45, 0.95)',
+    backgroundColor: colors.gradient.high,
     maxWidth: 145,
   },
   option: {

app/components/ListItem.tsx

@@ -8,7 +8,6 @@ import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
 import { AlbumContextPressable, ArtistContextPressable, SongContextPressable } from './ContextMenu'
@@ -148,7 +147,7 @@ const ListItem: React.FC<{
   }
 
   const artStyle = { ...styles.art, ...sizeStyle.art }
-  const resizeMode = FastImage.resizeMode.cover
+  const resizeMode = 'cover'
   let coverArt = <></>
   if (item.itemType === 'artist') {
     coverArt = <CoverArt type="artist" artistId={item.id} round={true} style={artStyle} resizeMode={resizeMode} />

app/navigation/BottomTabBar.tsx

@@ -3,45 +3,21 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
+import { bottomTabIcons, OutlineFillIcon } from '@app/styles/icons'
 import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
 import { BottomTabNavigationEventMap } from '@react-navigation/bottom-tabs/lib/typescript/src/types'
 import { NavigationHelpers, ParamListBase } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import { StyleSheet, Text, View, Image, ImageStyle } from 'react-native'
-import FastImage from 'react-native-fast-image'
-
-type TabButtonImage = {
-  regular: number
-  fill: number
-}
-
-const icons: { [key: string]: TabButtonImage } = {
-  home: {
-    regular: require('@res/icons/home.png'),
-    fill: require('@res/icons/home-fill.png'),
-  },
-  library: {
-    regular: require('@res/icons/library.png'),
-    fill: require('@res/icons/library-fill.png'),
-  },
-  search: {
-    regular: require('@res/icons/search.png'),
-    fill: require('@res/icons/search-fill.png'),
-  },
-  settings: {
-    regular: require('@res/icons/settings.png'),
-    fill: require('@res/icons/settings-fill.png'),
-  },
-}
 
 const BottomTabButton = React.memo<{
   routeKey: string
   label: string
   name: string
   isFocused: boolean
-  img: TabButtonImage
+  icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
-}>(({ routeKey, label, name, isFocused, img, navigation }) => {
+}>(({ routeKey, label, name, isFocused, icon, navigation }) => {
   const onPress = () => {
     const event = navigation.emit({
       type: 'tabPress',
@@ -54,20 +30,19 @@ const BottomTabButton = React.memo<{
     }
   }
 
+  const focusColor = isFocused ? colors.text.primary : colors.text.secondary
+  const imgSource = isFocused ? icon.fill : icon.outline
+  const imgFocusStyle: ImageStyle = {
+    tintColor: focusColor,
+    opacity: isFocused ? 1 : 0.6,
+  }
+  const imgStyle = [styles.image, imgFocusStyle]
+  const textStyle = [styles.text, { color: focusColor }]
+
   return (
     <PressableOpacity onPress={onPress} style={styles.button}>
-      <FastImage
+      <Image source={imgSource} style={imgStyle} fadeDuration={0} />
-        source={isFocused ? img.fill : img.regular}
+      <Text style={textStyle}>{label}</Text>
-        style={styles.image}
-        tintColor={isFocused ? colors.text.primary : colors.text.secondary}
-      />
-      <Text
-        style={{
-          ...styles.text,
-          color: isFocused ? colors.text.primary : colors.text.secondary,
-        }}>
-        {label}
-      </Text>
     </PressableOpacity>
   )
 })
@@ -93,7 +68,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
               label={label}
               name={route.name}
               isFocused={state.index === index}
-              img={icons[route.name]}
+              icon={bottomTabIcons[route.name]}
               navigation={navigation}
             />
           )

app/screens/ArtistView.tsx

@@ -16,7 +16,6 @@ import { useLayout } from '@react-native-community/hooks'
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ActivityIndicator, StyleSheet, Text, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 import { useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
 
 const AlbumItem = React.memo<{
@@ -36,12 +35,7 @@ const AlbumItem = React.memo<{
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}
       menuStyle={[styles.albumItem, { width }]}
       triggerOuterWrapperStyle={{ width }}>
-      <CoverArt
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height, width }} resizeMode={'cover'} />
-        type="cover"
-        coverArt={album.coverArt}
-        style={{ height, width }}
-        resizeMode={FastImage.resizeMode.cover}
-      />
       <Text style={styles.albumTitle}>{album.name}</Text>
       <Text style={styles.albumYear}> {album.year ? album.year : ''}</Text>
     </AlbumContextPressable>
@@ -116,13 +110,7 @@ const ArtistView = React.memo<{ id: string; title: string }>(({ id, title }) =>
         style={styles.scroll}
         contentContainerStyle={styles.scrollContent}
         onScroll={onScroll}>
-        <CoverArt
+        <CoverArt type="artist" size="original" artistId={artist.id} style={styles.artistCover} resizeMode={'cover'} />
-          type="artist"
-          size="original"
-          artistId={artist.id}
-          style={styles.artistCover}
-          resizeMode={FastImage.resizeMode.cover}
-        />
         <View style={styles.titleContainer}>
           <Text style={styles.title}>{artist.name}</Text>
         </View>

app/screens/Home.tsx

@@ -14,7 +14,6 @@ import { GetAlbumListType } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { RefreshControl, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 
 const titles: { [key in GetAlbumListType]?: string } = {
   recent: 'Recent Albums',
@@ -37,7 +36,7 @@ const AlbumItem = React.memo<{
         type="cover"
         coverArt={album.coverArt}
         style={{ height: styles.item.width, width: styles.item.width }}
-        resizeMode={FastImage.resizeMode.cover}
+        resizeMode={'cover'}
       />
       <Text style={styles.title} numberOfLines={1}>
         {album.name}

app/screens/LibraryAlbums.tsx

@@ -13,7 +13,6 @@ import { GetAlbumList2Type } from '@app/subsonic/params'
 import { useNavigation } from '@react-navigation/native'
 import React, { useEffect } from 'react'
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
-import FastImage from 'react-native-fast-image'
 
 const AlbumItem = React.memo<{
   album: AlbumListItem
@@ -28,12 +27,7 @@ const AlbumItem = React.memo<{
       menuStyle={[styles.itemMenu, { width: size }]}
       triggerWrapperStyle={[styles.itemWrapper, { height }]}
       onPress={() => navigation.navigate('album', { id: album.id, title: album.name })}>
-      <CoverArt
+      <CoverArt type="cover" coverArt={album.coverArt} style={{ height: size, width: size }} resizeMode={'cover'} />
-        type="cover"
-        coverArt={album.coverArt}
-        style={{ height: size, width: size }}
-        resizeMode={FastImage.resizeMode.cover}
-      />
       <View style={styles.itemDetails}>
         <Text style={styles.title} numberOfLines={1}>
           {album.name}

app/screens/SplashPage.tsx

@@ -1,14 +1,25 @@
 import React, { useEffect, useState } from 'react'
-import { Text, View } from 'react-native'
+import { Image, View, StyleSheet, Text } from 'react-native'
 import { Store, useStore } from '@app/state/store'
+import colors from '@app/styles/colors'
+import GradientBackground from '@app/components/GradientBackground'
+import font from '@app/styles/font'
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated'
 
 const selectHydrated = (store: Store) => store.hydrated
 
 const SplashPage: React.FC<{}> = ({ children }) => {
   const [ready, setReady] = useState(false)
   const hydrated = useStore(selectHydrated)
+  const opacity = useSharedValue(0)
 
-  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1))
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    }
+  })
+
+  const minSplashTime = new Promise(resolve => setTimeout(resolve, 1000))
 
   const prepare = async () => {
     return
@@ -17,16 +28,70 @@ const SplashPage: React.FC<{}> = ({ children }) => {
   const promise = Promise.all([prepare(), minSplashTime])
 
   useEffect(() => {
-    promise.then(() => {
+    opacity.value = withTiming(1, {
-      setReady(true)
+      duration: 200,
     })
-  })
+    promise
+      .then(() => {
+        setReady(true)
+      })
+      .then(() => {
+        opacity.value = withTiming(0, {
+          duration: 500,
+        })
+      })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
-  if (ready && hydrated) {
+  const splash = (
-    return <View style={{ flex: 1 }}>{children}</View>
+    <Animated.View style={[styles.splashContainer, animatedStyles]} pointerEvents="none">
-  } else {
+      <GradientBackground style={styles.background}>
-    return <Text>Loading THE GOOD SHIT...</Text>
+        <View style={styles.logoContainer}>
-  }
+          <Image style={styles.image} source={require('@res/casette.png')} fadeDuration={0} />
+          <Text style={styles.text}>subtracks</Text>
+        </View>
+      </GradientBackground>
+    </Animated.View>
+  )
+
+  return (
+    <View style={styles.container}>
+      {ready && hydrated && children}
+      {splash}
+    </View>
+  )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  splashContainer: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+  },
+  background: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoContainer: {
+    elevation: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  image: {
+    height: 140,
+    width: 140,
+    marginBottom: -10,
+    tintColor: colors.accent,
+  },
+  text: {
+    fontFamily: font.bold,
+    fontSize: 50,
+    color: colors.text.primary,
+  },
+})
+
 export default SplashPage

app/styles/icons.ts

@@ -0,0 +1,23 @@
+export type OutlineFillIcon = {
+  outline: number
+  fill: number
+}
+
+export const bottomTabIcons: Record<string, OutlineFillIcon> = {
+  home: {
+    outline: require('@res/icons/home.png'),
+    fill: require('@res/icons/home-fill.png'),
+  },
+  library: {
+    outline: require('@res/icons/library.png'),
+    fill: require('@res/icons/library-fill.png'),
+  },
+  search: {
+    outline: require('@res/icons/search.png'),
+    fill: require('@res/icons/search-fill.png'),
+  },
+  settings: {
+    outline: require('@res/icons/settings.png'),
+    fill: require('@res/icons/settings-fill.png'),
+  },
+}

package.json

@@ -24,7 +24,6 @@
     "md5": "^2.3.0",
     "react": "17.0.1",
     "react-native": "0.64.1",
-    "react-native-fast-image": "https://github.com/austinried/react-native-fast-image",
     "react-native-fs": "^2.18.0",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-get-random-values": "^1.7.0",

yarn.lock

@@ -5514,10 +5514,6 @@ react-native-codegen@^0.0.6:
     jscodeshift "^0.11.0"
     nullthrows "^1.1.1"
 
-"react-native-fast-image@https://github.com/austinried/react-native-fast-image":
-  version "8.3.4"
-  resolved "https://github.com/austinried/react-native-fast-image#2aa1ec7425e70927e179640fc8eb2a7c268357a3"
-
 react-native-fs@^2.18.0:
   version "2.18.0"
   resolved "https://registry.yarnpkg.com/react-native-fs/-/react-native-fs-2.18.0.tgz#987b99cc90518ef26663a8d60e62104694b41c21"