[MOB-54] UI Fixes (#2059)

* UI fixes - rive animation - SD version in settings - and more

* twStyle

apps/mobile/src/components/header/Header.tsx

@@ -2,7 +2,7 @@ import { useNavigation } from '@react-navigation/native';
 import { StackHeaderProps } from '@react-navigation/stack';
 import { ArrowLeft, DotsThreeOutline, MagnifyingGlass } from 'phosphor-react-native';
 import { lazy } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Platform, Pressable, Text, View } from 'react-native';
 import { tw, twStyle } from '~/lib/tailwind';
 import { getExplorerStore, useExplorerStore } from '~/stores/explorerStore';
 
@@ -71,7 +71,12 @@ export default function Header({
 	};
 
 	return (
-		<View style={tw`relative h-auto w-full border-b border-app-line/50 bg-mobile-header pt-10`}>
+		<View
+			style={twStyle(
+				'relative h-auto w-full border-b border-app-line/50 bg-mobile-header',
+				Platform.OS === 'android' ? 'pt-5' : 'pt-10'
+			)}
+		>
 			<View style={tw`mx-auto mt-5 h-auto w-full justify-center px-7 pb-5`}>
 				<View style={tw`w-full flex-row items-center justify-between`}>
 					<View style={tw`flex-row items-center gap-5`}>

apps/mobile/src/navigation/TabNavigator.tsx

@@ -3,7 +3,7 @@ import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/n
 import { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import { useEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Rive, { RiveRef } from 'rive-react-native';
 import { Style } from 'twrnc/dist/esm/types';
@@ -106,7 +106,12 @@ export default function TabNavigator() {
 					position: 'absolute',
 					backgroundColor: tw.color('mobile-navtab'),
 					borderTopWidth: 1,
-					borderTopColor: tw.color('app-line/50')
+					borderTopColor: tw.color('app-line/50'),
+					height: Platform.OS === 'android' ? 60 : 80,
+					paddingVertical: 5
+				},
+				tabBarItemStyle: {
+					marginBottom: Platform.OS === 'android' ? 10 : 0
 				},
 				tabBarBackground: () => (
 					<BlurView tint="dark" intensity={50} style={StyleSheet.absoluteFill} />
@@ -121,14 +126,21 @@ export default function TabNavigator() {
 					key={screen.name + index}
 					name={screen.name}
 					component={screen.component}
-					options={{
+					options={({ navigation }) => ({
 						tabBarLabel: screen.label,
 						tabBarLabelStyle: screen.labelStyle,
 						tabBarIcon: () => (
-							<TouchableWithoutFeedback>{screen.icon}</TouchableWithoutFeedback>
+							<TouchableWithoutFeedback
+								onPress={() => {
+									navigation.navigate(screen.name);
+									setActiveIndex(index);
+								}}
+							>
+								{screen.icon}
+							</TouchableWithoutFeedback>
 						),
 						tabBarTestID: screen.testID
-					}}
+					})}
 					listeners={() => ({
 						tabPress: () => {
 							setActiveIndex(index);
@@ -158,8 +170,10 @@ const TabBarButton = ({
 	const ref = useRef<RiveRef>(null);
 	useEffect(() => {
 		if (active && ref.current) {
-			ref.current?.play();
-		} else ref.current?.stop();
+			ref.current?.play('animate');
+		} else {
+			ref.current?.stop();
+		}
 	}, [active]);
 	return (
 		<Rive

apps/mobile/src/screens/settings/Settings.tsx

@@ -13,7 +13,7 @@ import {
 	TagSimple
 } from 'phosphor-react-native';
 import React from 'react';
-import { SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
+import { Platform, SectionList, Text, TouchableWithoutFeedback, View } from 'react-native';
 import { DebugState, useDebugState, useDebugStateEnabler } from '@sd/client';
 import { SettingsItem } from '~/components/settings/SettingsItem';
 import { tw, twStyle } from '~/lib/tailwind';
@@ -143,7 +143,7 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 		<View style={tw`flex-1 bg-mobile-screen px-7`}>
 			<SectionList
 				sections={sections(debugState)}
-				contentContainerStyle={tw`py-5`}
+				contentContainerStyle={tw`h-auto pb-5 pt-3`}
 				renderItem={({ item }) => (
 					<SettingsItem
 						title={item.title}
@@ -164,9 +164,10 @@ export default function SettingsScreen({ navigation }: SettingsStackScreenProps<
 
 function FooterComponent() {
 	const onClick = useDebugStateEnabler();
-
 	return (
-		<View style={tw`mb-4 mt-6 items-center`}>
+		<View
+			style={twStyle(Platform.OS === 'android' ? 'mb-14 mt-4' : 'mb-20 mt-5', 'items-center')}
+		>
 			<TouchableWithoutFeedback onPress={onClick}>
 				<Text style={tw`text-base font-bold text-ink`}>Spacedrive</Text>
 			</TouchableWithoutFeedback>