adjust library filter control styling, fix tabs showing blank on iOS

src/components/Library/tab-bar.tsx

@@ -22,19 +22,18 @@ function LibraryTabBar(props: MaterialTopTabBarProps) {
 
 			{[''].includes(props.state.routes[props.state.index].name) ? null : (
 				<XStack
-					paddingHorizontal={'$4'}
-					borderWidth={'$1'}
 					borderColor={'$borderColor'}
 					marginTop={'$2'}
-					marginHorizontal={'$2'}
-					borderRadius={'$4'}
 					backgroundColor={'$background'}
 					alignItems={'center'}
-					justifyContent='flex-end'
+					justifyContent='flex-start'
+					paddingHorizontal={'$4'}
+					paddingVertical={'$1'}
+					gap={'$4'}
+					maxWidth={'80%'}
 				>
 					{props.state.routes[props.state.index].name === 'Playlists' ? (
 						<XStack
-							flex={1}
 							onPress={() => {
 								trigger('impactLight')
 								props.navigation.navigate('AddPlaylist')
@@ -48,7 +47,6 @@ function LibraryTabBar(props: MaterialTopTabBarProps) {
 						</XStack>
 					) : (
 						<XStack
-							flex={1}
 							onPress={() => {
 								trigger('impactLight')
 								setIsFavorites(!isUndefined(isFavorites) ? undefined : true)
@@ -69,7 +67,6 @@ function LibraryTabBar(props: MaterialTopTabBarProps) {
 
 					{props.state.routes[props.state.index].name === 'Tracks' && (
 						<XStack
-							flex={1}
 							onPress={() => {
 								trigger('impactLight')
 								setIsDownloaded(!isDownloaded)

src/screens/Tabs/index.tsx

@@ -10,6 +10,7 @@ import LibraryScreen from '../Library'
 import TabParamList from './types'
 import { TabProps } from '../types'
 import TabBar from './tab-bar'
+import { Platform } from 'react-native'
 
 const Tab = createBottomTabNavigator<TabParamList>()
 
@@ -18,6 +19,10 @@ export default function Tabs({ route, navigation }: TabProps): React.JSX.Element
 
 	return (
 		<Tab.Navigator
+			/*
+			 * https://github.com/react-navigation/react-navigation/issues/12755
+			 */
+			detachInactiveScreens={Platform.OS !== 'ios'}
 			initialRouteName={route.params?.screen ?? 'HomeTab'}
 			screenOptions={{
 				animation: 'shift',