only allow settings (to add server) on first run

app/navigation/BottomTabBar.tsx

@@ -1,5 +1,7 @@
 import NowPlayingBar from '@app/components/NowPlayingBar'
 import PressableOpacity from '@app/components/PressableOpacity'
+import { selectSettings } from '@app/state/settings'
+import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import dimensions from '@app/styles/dimensions'
 import font from '@app/styles/font'
@@ -18,6 +20,10 @@ const BottomTabButton = React.memo<{
   icon: OutlineFillIcon
   navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>
 }>(({ routeKey, label, name, isFocused, icon, navigation }) => {
+  const firstRun = useStore(selectSettings.firstRun)
+
+  const disabled = firstRun && name !== 'settings'
+
   const onPress = () => {
     const event = navigation.emit({
       type: 'tabPress',
@@ -40,15 +46,14 @@ const BottomTabButton = React.memo<{
   const textStyle = [styles.text, { color: focusColor }]
 
   return (
-    <PressableOpacity onPress={onPress} style={styles.button}>
+    <PressableOpacity onPress={onPress} style={styles.button} disabled={disabled}>
       <Image source={imgSource} style={imgStyle} fadeDuration={0} />
       <Text style={textStyle}>{label}</Text>
     </PressableOpacity>
   )
 })
 
-const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
-  return (
+const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => (
   <View>
     <NowPlayingBar />
     <View style={styles.container}>
@@ -75,8 +80,7 @@ const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigat
       })}
     </View>
   </View>
-  )
-}
+)
 
 const styles = StyleSheet.create({
   container: {

app/navigation/BottomTabNavigator.tsx

@@ -1,11 +1,14 @@
 import BottomTabBar from '@app/navigation/BottomTabBar'
 import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
-import SongListView from '@app/screens/SongListView'
 import ArtistView from '@app/screens/ArtistView'
 import Home from '@app/screens/Home'
 import Search from '@app/screens/Search'
+import SearchResultsView from '@app/screens/SearchResultsView'
 import ServerView from '@app/screens/ServerView'
 import SettingsView from '@app/screens/Settings'
+import SongListView from '@app/screens/SongListView'
+import { selectSettings } from '@app/state/settings'
+import { useStore } from '@app/state/store'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
@@ -13,7 +16,6 @@ import { RouteProp, StackActions } from '@react-navigation/native'
 import React, { useEffect } from 'react'
 import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
-import SearchResultsView from '@app/screens/SearchResultsView'
 
 type TabStackParamList = {
   main: undefined
@@ -155,8 +157,10 @@ const SettingsTab = () => {
 const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = () => {
+  const firstRun = useStore(selectSettings.firstRun)
+
   return (
-    <Tab.Navigator tabBar={BottomTabBar} initialRouteName="home">
+    <Tab.Navigator tabBar={BottomTabBar} initialRouteName={firstRun ? 'settings' : 'home'}>
       <Tab.Screen name="home" component={HomeTab} options={{ tabBarLabel: 'Home' }} />
       <Tab.Screen name="library" component={LibraryTab} options={{ tabBarLabel: 'Library' }} />
       <Tab.Screen name="search" component={SearchTab} options={{ tabBarLabel: 'Search' }} />

app/screens/SplashPage.tsx

@@ -82,14 +82,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   image: {
-    height: 140,
-    width: 140,
+    height: 150,
+    width: 150,
     marginBottom: -10,
     tintColor: colors.accent,
   },
   text: {
     fontFamily: font.bold,
-    fontSize: 50,
+    fontSize: 31,
     color: colors.text.primary,
   },
 })

app/state/settings.ts

@@ -30,6 +30,8 @@ export type SettingsSlice = {
 export const selectSettings = {
   client: (state: SettingsSlice) => state.client,
 
+  firstRun: (state: SettingsSlice) => state.settings.servers.length === 0,
+
   activeServer: (state: SettingsSlice) => state.settings.servers.find(s => s.id === state.settings.activeServer),
   setActiveServer: (state: SettingsSlice) => state.setActiveServer,