library styling for filter bar and separators

src/components/Albums/component.tsx

@@ -1,6 +1,6 @@
 import { ActivityIndicator, RefreshControl } from 'react-native'
 import { Separator, useTheme, XStack, YStack } from 'tamagui'
-import React, { RefObject, useEffect, useRef } from 'react'
+import React, { RefObject, useCallback, useEffect, useRef } from 'react'
 import { Text } from '../Global/helpers/text'
 import { FlashList, FlashListRef } from '@shopify/flash-list'
 import { UseInfiniteQueryResult } from '@tanstack/react-query'
@@ -45,6 +45,14 @@ export default function Albums({
 		(letter) => (pendingLetterRef.current = letter.toUpperCase()),
 	)
 
+	const ItemSeparatorComponent = useCallback(
+		({ leadingItem, trailingItem }: { leadingItem: unknown; trailingItem: unknown }) =>
+			typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : (
+				<Separator />
+			),
+		[],
+	)
+
 	// Effect for handling the pending alphabet selector letter
 	useEffect(() => {
 		if (isString(pendingLetterRef.current) && albumsInfiniteQuery.data) {
@@ -115,7 +123,7 @@ export default function Albums({
 				ListFooterComponent={
 					albumsInfiniteQuery.isFetchingNextPage ? <ActivityIndicator /> : null
 				}
-				ItemSeparatorComponent={() => <Separator borderColor={'$neutral'} />}
+				ItemSeparatorComponent={ItemSeparatorComponent}
 				refreshControl={
 					<RefreshControl
 						refreshing={albumsInfiniteQuery.isFetching}

src/components/Artists/component.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, useMemo, useRef } from 'react'
+import React, { RefObject, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Separator, useTheme, XStack, YStack } from 'tamagui'
 import { Text } from '../Global/helpers/text'
 import { RefreshControl } from 'react-native'
@@ -57,6 +57,14 @@ export default function Artists({
 			.filter((value, index, indices) => indices.indexOf(value) === index)
 	}, [showAlphabeticalSelector, artists])
 
+	const ItemSeparatorComponent = useCallback(
+		({ leadingItem, trailingItem }: { leadingItem: unknown; trailingItem: unknown }) =>
+			typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : (
+				<Separator />
+			),
+		[],
+	)
+
 	// Effect for handling the pending alphabet selector letter
 	useEffect(() => {
 		if (isString(pendingLetterRef.current) && artists) {
@@ -107,7 +115,7 @@ export default function Artists({
 							? item.toString()
 							: item.Id!
 				}
-				ItemSeparatorComponent={() => <Separator />}
+				ItemSeparatorComponent={ItemSeparatorComponent}
 				ListEmptyComponent={
 					<YStack flex={1} justify='center' alignItems='center'>
 						<Text marginVertical='auto' color={'$borderColor'}>

src/components/Library/tab-bar.tsx

@@ -26,18 +26,12 @@ function LibraryTabBar(props: MaterialTopTabBarProps) {
 			{[''].includes(props.state.routes[props.state.index].name) ? null : (
 				<XStack
 					borderColor={'$borderColor'}
-					marginTop={'$2'}
-					alignItems={'center'}
+					alignContent={'flex-start'}
 					justifyContent='flex-start'
-					paddingHorizontal={'$4'}
-					paddingVertical={'$1'}
+					paddingHorizontal={'$2'}
+					paddingVertical={'$2'}
 					gap={'$4'}
 					maxWidth={'80%'}
-					shadowOffset={{
-						width: 0,
-						height: getTokenValue('$2'),
-					}}
-					shadowColor={'$background25'}
 				>
 					{props.state.routes[props.state.index].name === 'Playlists' ? (
 						<XStack

src/components/Tracks/component.tsx

@@ -90,6 +90,14 @@ export default function Tracks({
 		[tracksToDisplay, queue],
 	)
 
+	const ItemSeparatorComponent = useCallback(
+		({ leadingItem, trailingItem }: { leadingItem: unknown; trailingItem: unknown }) =>
+			typeof leadingItem === 'string' || typeof trailingItem === 'string' ? null : (
+				<Separator />
+			),
+		[],
+	)
+
 	// Effect for handling the pending alphabet selector letter
 	useEffect(() => {
 		if (isString(pendingLetterRef.current) && tracksInfiniteQuery.data) {
@@ -136,7 +144,7 @@ export default function Tracks({
 			<FlashList
 				ref={sectionListRef}
 				contentInsetAdjustmentBehavior='automatic'
-				ItemSeparatorComponent={() => <Separator />}
+				ItemSeparatorComponent={ItemSeparatorComponent}
 				numColumns={1}
 				data={tracksInfiniteQuery.data}
 				keyExtractor={keyExtractor}