Feature/bump sdk 52

hackathon/spacecraft/App.tsx

@@ -1,12 +1,11 @@
+import { AuthenticationProvider } from "@/context/Authentication";
+import { NetworkProvider } from "@/context/Network";
+import { useAppearanceTheme } from "@/hooks/useAppearanceTheme";
+import { Navigator } from "@/navigation/Navigator";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Constants from "expo-constants";
 import { Provider as PaperProvider } from "react-native-paper";
 
-import { AuthenticationProvider } from "~/context/Authentication";
-import { NetworkProvider } from "~/context/Network";
-import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
-import { Navigator } from "~/navigation/Navigator";
-
 const queryClient = new QueryClient();
 
 const App = () => {

hackathon/spacecraft/app.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   android: {
     adaptiveIcon: {
-      backgroundColor: "#FFFFFF",
+      backgroundColor: "#ffffff",
       foregroundImage: "./assets/adaptive-icon.png",
     },
     package: "weshipit.today.spacecraft",
@@ -24,6 +24,7 @@ module.exports = {
     supportsTablet: true,
   },
   name: "spacecraft",
+  newArchEnabled: true,
   orientation: "portrait",
   owner: "weshipit",
   plugins: [

hackathon/spacecraft/jest.setup.js

@@ -14,8 +14,5 @@ jest.mock("react-native-reanimated", () => {
   return Reanimated;
 });
 
-// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
-jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
-
 // fixing `ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.`
 jest.useFakeTimers();

hackathon/spacecraft/package.json

@@ -26,11 +26,11 @@
   },
   "dependencies": {
     "@dev-plugins/react-navigation": "^0.0.6",
-    "@expo/metro-runtime": "~3.2.1",
+    "@expo/metro-runtime": "~4.0.1",
     "@expo/vector-icons": "^14.0.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/masked-view": "0.1.11",
-    "@react-native-community/netinfo": "11.3.1",
+    "@react-native-community/netinfo": "11.4.1",
     "@react-navigation/bottom-tabs": "^6.5.5",
     "@react-navigation/native": "^6.1.1",
     "@react-navigation/native-stack": "^6.9.7",
@@ -39,34 +39,34 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.5.0",
     "deepmerge": "^4.3.1",
-    "expo": "^51.0.0",
-    "expo-application": "~5.9.1",
-    "expo-constants": "~16.0.1",
-    "expo-image": "~1.12.9",
-    "expo-linking": "~6.3.1",
-    "expo-status-bar": "~1.12.1",
-    "expo-store-review": "~7.0.2",
-    "expo-updates": "~0.25.14",
-    "expo-web-browser": "~13.0.3",
-    "react": "18.2.0",
+    "expo": "^52.0.27",
+    "expo-application": "~6.0.2",
+    "expo-constants": "~17.0.4",
+    "expo-image": "~2.0.4",
+    "expo-linking": "~7.0.4",
+    "expo-status-bar": "~2.0.1",
+    "expo-store-review": "~8.0.1",
+    "expo-updates": "~0.26.13",
+    "expo-web-browser": "~14.0.2",
+    "react": "18.3.1",
     "react-currency-format": "^1.1.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-offline": "^6.0.0",
     "react-native-paper": "^5.12.2",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
     "react-native-vector-icons": "^10.0.3",
     "react-native-web": "~0.19.10",
     "rn-placeholder": "^3.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-typescript": "^7.18.6",
-    "@react-native-community/datetimepicker": "8.0.1",
-    "@react-native-community/slider": "4.5.2",
+    "@react-native-community/datetimepicker": "8.2.0",
+    "@react-native-community/slider": "4.5.5",
     "@storybook/addon-controls": "^7.6.10",
     "@storybook/addon-ondevice-actions": "^7.6.15",
     "@storybook/addon-ondevice-backgrounds": "^7.6.15",
@@ -80,16 +80,16 @@
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.4.3",
     "@types/jest": "^29.5.4",
-    "@types/react": "~18.2.79",
-    "@types/react-dom": "~18.2.25",
+    "@types/react": "~18.3.12",
+    "@types/react-dom": "~18.3.1",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
-    "app-icon-badge": "^0.0.15",
+    "app-icon-badge": "^0.1.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^8.56.0",
-    "eslint-config-expo": "^7.0.0",
+    "eslint-config-expo": "~8.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-native-wcandillon": "^3.9.0",
     "eslint-plugin-perfectionist": "^3.3.0",
@@ -99,7 +99,7 @@
     "eslint-plugin-react-native": "^4.1.0",
     "eslint-plugin-testing-library": "^6.3.0",
     "jest": "^29.6.4",
-    "jest-expo": "~51.0.2",
+    "jest-expo": "~52.0.3",
     "prettier": "^3.2.5",
     "typescript": "~5.3.3"
   }

hackathon/spacecraft/src/components/Card.stories.tsx

@@ -1,9 +1,8 @@
 import type { StarshipProps } from "api/types";
 
+import { StarshipCard } from "@/components/StarshipCard";
 import { NavigationContainer } from "@react-navigation/native";
 
-import { StarshipCard } from "~/components/StarshipCard";
-
 const shipFixture = {
   model: "YT-1300 light freighter",
   name: "Millennium Falcon",

hackathon/spacecraft/src/components/FromInput.test.tsx

@@ -1,7 +1,6 @@
+import { FormInput } from "@/components/FromInput";
 import { fireEvent, render, screen } from "@testing-library/react-native";
 
-import { FormInput } from "~/components/FromInput";
-
 describe("FormInput", () => {
   const mock = jest.fn();
   it("renders correctly", () => {

hackathon/spacecraft/src/components/Offline.tsx

@@ -1,8 +1,8 @@
+import { useNetwork } from "@/context/Network";
+import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { ActivityIndicator, useTheme } from "react-native-paper";
 
-import { useNetwork } from "~/context/Network";
-
 export const Offline = () => {
   const { isConnected } = useNetwork();
   const { colors } = useTheme();

hackathon/spacecraft/src/components/PeopleItem.tsx

@@ -1,10 +1,9 @@
 import type { PeopleProps } from "api/types";
 
+import { Routes } from "@/navigation/Routes";
 import { useNavigation } from "@react-navigation/native";
 import { List } from "react-native-paper";
 
-import { Routes } from "~/navigation/Routes";
-
 interface PeopleItemProps {
   people: PeopleProps;
 }

hackathon/spacecraft/src/components/ScreenContainer.tsx

@@ -1,11 +1,10 @@
 import type { ReactNode } from "react";
 
+import { Offline } from "@/components/Offline";
 import { useNavigation } from "@react-navigation/native";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { IconButton, Text, useTheme } from "react-native-paper";
 
-import { Offline } from "~/components/Offline";
-
 interface ScreenContainerProps {
   accessoryFooter?: ReactNode;
   children?: ReactNode;

hackathon/spacecraft/src/components/SkeletonList.stories.tsx

@@ -1,4 +1,4 @@
-import { SkeletonList } from "~/components/SkeletonList";
+import { SkeletonList } from "@/components/SkeletonList";
 
 export default {
   title: "SkeletonList",

hackathon/spacecraft/src/components/StarshipCard.test.tsx

@@ -1,8 +1,7 @@
+import { StarshipCard } from "@/components/StarshipCard";
 import { NavigationContainer } from "@react-navigation/native";
 import { render, screen } from "@testing-library/react-native";
 
-import { StarshipCard } from "~/components/StarshipCard";
-
 const shipFixture = {
   model: "YT-1300 light freighter",
   name: "Millennium Falcon",

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -1,11 +1,10 @@
+import { Image } from "@/components/Image";
 import { useNavigation } from "@react-navigation/native";
 import CurrencyFormat from "react-currency-format";
 import { Alert, StyleSheet } from "react-native";
 import { Button, Card, Text } from "react-native-paper";
 import { FadeInDown, FadeOut } from "react-native-reanimated";
 
-import { Image } from "~/components/Image";
-
 import type { StarshipProps } from "../../api/types";
 
 import { Routes } from "../navigation/Routes";

hackathon/spacecraft/src/components/StarshipLoadableList.tsx

@@ -1,14 +1,35 @@
+import { useStarships } from "@/hooks/useStarships";
+import { UseQueryResult } from "@tanstack/react-query";
 import { StyleSheet, View } from "react-native";
 import { Text } from "react-native-paper";
 
-import { useStarships } from "~/hooks/useStarships";
-
 interface StarshipLoadableListProps {
   starships: string[];
 }
 
-function getRandom(max: number) {
-  return Math.floor(Math.random() * max);
+function randomId() {
+  return Math.random().toString(36).substring(7);
+}
+
+function StarshipLoadableListItem({
+  result,
+}: {
+  result: UseQueryResult<any, Error>;
+}) {
+  if (result.isLoading) {
+    return <Text variant="bodyMedium">Loading…</Text>;
+  }
+
+  if (result.isError) {
+    return <Text variant="bodyMedium">Error 😕</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text variant="titleMedium">{result.data.name}</Text>
+      <Text variant="bodyMedium">{result.data.model}</Text>
+    </View>
+  );
 }
 
 export const StarshipLoadableList = ({
@@ -17,22 +38,12 @@ export const StarshipLoadableList = ({
   const queryResult = useStarships(starships);
 
   return queryResult.map((result) => {
-    if (result.isInitialLoading || result.isLoading) {
-      return <Text variant="bodyMedium">Loading…</Text>;
-    }
-
-    if (result.isError) {
-      return <Text variant="bodyMedium">Error 😕</Text>;
-    }
-
+    const id = randomId();
     return (
-      <View
-        key={getRandom(1000)}
-        style={styles.container}
-      >
-        <Text variant="titleMedium">{result.data.name}</Text>
-        <Text variant="bodyMedium">{result.data.model}</Text>
-      </View>
+      <StarshipLoadableListItem
+        key={id}
+        result={result}
+      />
     );
   });
 };

hackathon/spacecraft/src/hooks/useAppearanceTheme.ts

@@ -1,10 +1,9 @@
 import type { AppStateStatus } from "react-native";
 
+import { CombinedDarkTheme, CombinedDefaultTheme } from "@/theme/theme";
 import { useEffect, useState } from "react";
 import { Appearance, AppState } from "react-native";
 
-import { CombinedDarkTheme, CombinedDefaultTheme } from "~/theme/theme";
-
 export const useAppearanceTheme = () => {
   const [theme, setTheme] = useState(
     Appearance.getColorScheme() === "dark"

hackathon/spacecraft/src/navigation/AuthNavigator.tsx

@@ -1,9 +1,8 @@
+import { Routes } from "@/navigation/Routes";
+import { LoginScreen } from "@/screens/LoginScreen";
+import { TermsScreen } from "@/screens/TermsScreen";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { Routes } from "~/navigation/Routes";
-import { LoginScreen } from "~/screens/LoginScreen";
-import { TermsScreen } from "~/screens/TermsScreen";
-
 const Stack = createNativeStackNavigator();
 
 export const AuthNavigator = () => {

hackathon/spacecraft/src/navigation/BottomTabNavigator.tsx

@@ -1,15 +1,14 @@
+import { PilotNavigator } from "@/navigation/PilotNavigator";
+import { PlanetNavigator } from "@/navigation/PlanetNavigator";
+import { PlusNavigator } from "@/navigation/PlusNavigator";
+import { Routes } from "@/navigation/Routes";
+import { StarshipNavigator } from "@/navigation/StarshipNavigator";
 /* eslint-disable react/no-unstable-nested-components */
 import { FontAwesome5, Ionicons } from "@expo/vector-icons";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
 import { useTheme } from "react-native-paper";
 
-import { PilotNavigator } from "~/navigation/PilotNavigator";
-import { PlanetNavigator } from "~/navigation/PlanetNavigator";
-import { PlusNavigator } from "~/navigation/PlusNavigator";
-import { Routes } from "~/navigation/Routes";
-import { StarshipNavigator } from "~/navigation/StarshipNavigator";
-
 const Tab = createBottomTabNavigator();
 
 export const BottomTabNavigator = () => {

hackathon/spacecraft/src/navigation/Navigator.tsx

@@ -1,13 +1,12 @@
+import { useAuthentication } from "@/context/Authentication";
+import { useAppearanceTheme } from "@/hooks/useAppearanceTheme";
 import { useReactNavigationDevTools } from "@dev-plugins/react-navigation";
 import {
   NavigationContainer,
   useNavigationContainerRef,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { useAuthentication } from "~/context/Authentication";
-import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
-
 import { AuthNavigator } from "./AuthNavigator";
 import { BottomTabNavigator } from "./BottomTabNavigator";
 

hackathon/spacecraft/src/navigation/PilotNavigator.tsx

@@ -1,10 +1,9 @@
+import { Routes } from "@/navigation/Routes";
+import { PilotDetailsScreen } from "@/screens/PilotDetailsScreen";
+import { PilotScreen } from "@/screens/PilotScreen";
+import { StarshipDetailsScreen } from "@/screens/StarshipDetailsScreen";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { Routes } from "~/navigation/Routes";
-import { PilotDetailsScreen } from "~/screens/PilotDetailsScreen";
-import { PilotScreen } from "~/screens/PilotScreen";
-import { StarshipDetailsScreen } from "~/screens/StarshipDetailsScreen";
-
 const Stack = createNativeStackNavigator();
 
 export const PilotNavigator = () => {

hackathon/spacecraft/src/navigation/PlanetNavigator.tsx

@@ -1,8 +1,7 @@
+import { PlanetDetailsScreen } from "@/screens/PlanetDetailsScreen";
+import { PlanetsScreen } from "@/screens/PlanetsScreen";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { PlanetDetailsScreen } from "~/screens/PlanetDetailsScreen";
-import { PlanetsScreen } from "~/screens/PlanetsScreen";
-
 import { Routes } from "./Routes";
 
 const Stack = createNativeStackNavigator();

hackathon/spacecraft/src/navigation/PlusNavigator.tsx

@@ -1,11 +1,10 @@
+import { Routes } from "@/navigation/Routes";
+import { DisappointedScreen } from "@/screens/DisappointedScreen";
+import { DoYouLikeScreen } from "@/screens/DoYouLikeScreen";
+import { LoveScreen } from "@/screens/LoveScreen";
+import { PlusScreen } from "@/screens/PlusScreen";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
-import { Routes } from "~/navigation/Routes";
-import { DisappointedScreen } from "~/screens/DisappointedScreen";
-import { DoYouLikeScreen } from "~/screens/DoYouLikeScreen";
-import { LoveScreen } from "~/screens/LoveScreen";
-import { PlusScreen } from "~/screens/PlusScreen";
-
 const Stack = createNativeStackNavigator();
 
 export const PlusNavigator = () => {