Mobile changes (#1784)

* privacy link

* remove spacedrop screens, add browse

* icon

* changes and network screen

* bump react native

apps/mobile/package.json

@@ -44,7 +44,7 @@
     "phosphor-react-native": "^1.1.2",
     "react": "^18.2.0",
     "react-hook-form": "^7.47.0",
-    "react-native": "0.72.5",
+    "react-native": "0.72.6",
     "react-native-document-picker": "^9.0.1",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.12.1",

apps/mobile/src/App.tsx

@@ -54,9 +54,6 @@ function AppNavigation() {
 
 	initPlausible({ platformType: 'mobile', buildInfo: buildInfo?.data });
 
-	// TODO: Make sure library has actually been loaded by this point - precache with useCachedLibraries?
-	// if (library === undefined) throw new Error("Tried to render AppNavigation before libraries fetched!")
-
 	const navRef = useNavigationContainerRef();
 	const routeNameRef = useRef<string>();
 

apps/mobile/src/components/icons/Icon.tsx

@@ -0,0 +1,23 @@
+import { getIcon, iconNames } from '@sd/assets/util';
+import { Image, ImageProps } from 'react-native';
+import { isDarkTheme } from '@sd/client';
+
+export type IconName = keyof typeof iconNames;
+
+interface IconProps extends Omit<ImageProps, 'source'> {
+	name: IconName;
+	size?: number;
+	theme?: 'dark' | 'light';
+}
+
+export const Icon = ({ name, size, theme, ...props }: IconProps) => {
+	const isDark = isDarkTheme();
+
+	return (
+		<Image
+			{...props}
+			style={{ width: size, height: size }}
+			source={getIcon(name, theme ? theme === 'dark' : isDark)}
+		/>
+	);
+};

apps/mobile/src/navigation/TabNavigator.tsx

@@ -1,12 +1,12 @@
 import { BottomTabScreenProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native';
-import { Broadcast, CirclesFour, Planet } from 'phosphor-react-native';
+import { CirclesFour, FolderOpen, Planet } from 'phosphor-react-native';
 import { tw } from '~/lib/tailwind';
 
 import type { HomeDrawerScreenProps } from './DrawerNavigator';
+import BrowseStack, { BrowseStackParamList } from './tabs/BrowseStack';
+import NetworkStack, { NetworkStackParamList } from './tabs/NetworkStack';
 import OverviewStack, { OverviewStackParamList } from './tabs/OverviewStack';
-import SpacedropStack, { SpacedropStackParamList } from './tabs/SpacedropStack';
-import SpacesStack, { SpacesStackParamList } from './tabs/SpacesStack';
 
 const Tab = createBottomTabNavigator<TabParamList>();
 
@@ -41,8 +41,8 @@ export default function TabNavigator() {
 				}}
 			/>
 			<Tab.Screen
-				name="SpacesStack"
-				component={SpacesStack}
+				name="NetworkStack"
+				component={NetworkStack}
 				options={{
 					tabBarIcon: ({ focused }) => (
 						<CirclesFour
@@ -51,22 +51,22 @@ export default function TabNavigator() {
 							color={focused ? tw.color('accent') : tw.color('ink')}
 						/>
 					),
-					tabBarLabel: 'Spaces',
+					tabBarLabel: 'Network',
 					tabBarLabelStyle: tw`text-[10px] font-semibold`
 				}}
 			/>
 			<Tab.Screen
-				name="SpacedropStack"
-				component={SpacedropStack}
+				name="BrowseStack"
+				component={BrowseStack}
 				options={{
 					tabBarIcon: ({ focused }) => (
-						<Broadcast
+						<FolderOpen
 							size={22}
 							weight={focused ? 'bold' : 'regular'}
 							color={focused ? tw.color('accent') : tw.color('ink')}
 						/>
 					),
-					tabBarLabel: 'Spacedrop',
+					tabBarLabel: 'Browse',
 					tabBarLabelStyle: tw`text-[10px] font-semibold`
 				}}
 			/>
@@ -76,8 +76,8 @@ export default function TabNavigator() {
 
 export type TabParamList = {
 	OverviewStack: NavigatorScreenParams<OverviewStackParamList>;
-	SpacedropStack: NavigatorScreenParams<SpacedropStackParamList>;
-	SpacesStack: NavigatorScreenParams<SpacesStackParamList>;
+	NetworkStack: NavigatorScreenParams<NetworkStackParamList>;
+	BrowseStack: NavigatorScreenParams<BrowseStackParamList>;
 };
 
 export type TabScreenProps<Screen extends keyof TabParamList> = CompositeScreenProps<

apps/mobile/src/navigation/tabs/SpacesStack.tsx → apps/mobile/src/navigation/tabs/BrowseStack.tsx

@@ -2,36 +2,36 @@ import { CompositeScreenProps } from '@react-navigation/native';
 import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
 import Header from '~/components/header/Header';
 import { tw } from '~/lib/tailwind';
+import BrowseScreen from '~/screens/Browse';
 
-import SpacesScreen from '../../screens/Spaces';
 import { SharedScreens, SharedScreensParamList } from '../SharedScreens';
 import { TabScreenProps } from '../TabNavigator';
 
-const Stack = createStackNavigator<SpacesStackParamList>();
+const Stack = createStackNavigator<BrowseStackParamList>();
 
-export default function SpacesStack() {
+export default function BrowseStack() {
 	return (
 		<Stack.Navigator
-			initialRouteName="Spaces"
+			initialRouteName="Browse"
 			screenOptions={{
 				headerStyle: { backgroundColor: tw.color('app-box') },
 				headerTintColor: tw.color('ink'),
 				headerTitleStyle: tw`text-base`,
 				headerBackTitleStyle: tw`text-base`
 			}}
 		>
-			<Stack.Screen name="Spaces" component={SpacesScreen} options={{ header: Header }} />
+			<Stack.Screen name="Browse" component={BrowseScreen} options={{ header: Header }} />
 			{SharedScreens(Stack as any)}
 		</Stack.Navigator>
 	);
 }
 
-export type SpacesStackParamList = {
-	Spaces: undefined;
+export type BrowseStackParamList = {
+	Browse: undefined;
 } & SharedScreensParamList;
 
-export type SpacesStackScreenProps<Screen extends keyof SpacesStackParamList> =
+export type BrowseStackScreenProps<Screen extends keyof BrowseStackParamList> =
 	CompositeScreenProps<
-		StackScreenProps<SpacesStackParamList, Screen>,
-		TabScreenProps<'SpacesStack'>
+		StackScreenProps<BrowseStackParamList, Screen>,
+		TabScreenProps<'BrowseStack'>
 	>;

apps/mobile/src/navigation/tabs/SpacedropStack.tsx → apps/mobile/src/navigation/tabs/NetworkStack.tsx

@@ -2,40 +2,36 @@ import { CompositeScreenProps } from '@react-navigation/native';
 import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
 import Header from '~/components/header/Header';
 import { tw } from '~/lib/tailwind';
-import SpacedropScreen from '~/screens/Spacedrop';
 
+import NetworkScreen from '../../screens/Network';
 import { SharedScreens, SharedScreensParamList } from '../SharedScreens';
 import { TabScreenProps } from '../TabNavigator';
 
-const Stack = createStackNavigator<SpacedropStackParamList>();
+const Stack = createStackNavigator<NetworkStackParamList>();
 
-export default function SpacedropStack() {
+export default function NetworkStack() {
 	return (
 		<Stack.Navigator
-			initialRouteName="Spacedrop"
+			initialRouteName="Network"
 			screenOptions={{
 				headerStyle: { backgroundColor: tw.color('app-box') },
 				headerTintColor: tw.color('ink'),
 				headerTitleStyle: tw`text-base`,
 				headerBackTitleStyle: tw`text-base`
 			}}
 		>
-			<Stack.Screen
-				name="Spacedrop"
-				component={SpacedropScreen}
-				options={{ header: Header }}
-			/>
+			<Stack.Screen name="Network" component={NetworkScreen} options={{ header: Header }} />
 			{SharedScreens(Stack as any)}
 		</Stack.Navigator>
 	);
 }
 
-export type SpacedropStackParamList = {
-	Spacedrop: undefined;
+export type NetworkStackParamList = {
+	Network: undefined;
 } & SharedScreensParamList;
 
-export type SpacedropStackScreenProps<Screen extends keyof SpacedropStackParamList> =
+export type NetworkStackScreenProps<Screen extends keyof NetworkStackParamList> =
 	CompositeScreenProps<
-		StackScreenProps<SpacedropStackParamList, Screen>,
-		TabScreenProps<'SpacedropStack'>
+		StackScreenProps<NetworkStackParamList, Screen>,
+		TabScreenProps<'NetworkStack'>
 	>;

apps/mobile/src/screens/Browse.tsx

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack';
+
+export default function BrowseScreen({ navigation, route }: BrowseStackScreenProps<'Browse'>) {
+	return <View></View>;
+}

apps/mobile/src/screens/Network.tsx

@@ -0,0 +1,17 @@
+import { Text, View } from 'react-native';
+import { Icon } from '~/components/icons/Icon';
+import { tw } from '~/lib/tailwind';
+import { NetworkStackScreenProps } from '~/navigation/tabs/NetworkStack';
+
+export default function NetworkScreen({ navigation }: NetworkStackScreenProps<'Network'>) {
+	return (
+		<View style={tw`flex-1 items-center justify-center`}>
+			<Icon name="Globe" size={128} />
+			<Text style={tw`mt-4 text-lg font-bold text-white`}>Your Local Network</Text>
+			<Text style={tw`mt-1 max-w-sm text-center text-sm text-ink-dull`}>
+				Other Spacedrive nodes on your LAN will appear here, along with your default OS
+				network mounts.
+			</Text>
+		</View>
+	);
+}