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,43 +46,41 @@ 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 }) => {
+const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => (
-  return (
+  <View>
-    <View>
+    <NowPlayingBar />
-      <NowPlayingBar />
+    <View style={styles.container}>
-      <View style={styles.container}>
+      {state.routes.map((route, index) => {
-        {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key] as any
-          const { options } = descriptors[route.key] as any
+        const label =
-          const label =
+          options.tabBarLabel !== undefined
-            options.tabBarLabel !== undefined
+            ? (options.tabBarLabel as string)
-              ? (options.tabBarLabel as string)
+            : options.title !== undefined
-              : options.title !== undefined
+            ? options.title
-              ? options.title
+            : route.name
-              : route.name
 
-          return (
+        return (
-            <BottomTabButton
+          <BottomTabButton
-              key={route.key}
+            key={route.key}
-              routeKey={route.key}
+            routeKey={route.key}
-              label={label}
+            label={label}
-              name={route.name}
+            name={route.name}
-              isFocused={state.index === index}
+            isFocused={state.index === index}
-              icon={bottomTabIcons[route.name]}
+            icon={bottomTabIcons[route.name]}
-              navigation={navigation}
+            navigation={navigation}
-            />
+          />
-          )
+        )
-        })}
+      })}
-      </View>
     </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,
+    height: 150,
-    width: 140,
+    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,