chore: upgrade to expo 52

app.json

@@ -9,9 +9,7 @@
       "playStoreUrl": "https://play.google.com/store/apps/details?id=com.theomesnil.WhatToWatch",
       "versionCode": 9
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "description": "Looking for a movie or series idea for tonight? WhatToWatch is the simplest and fastest way to discover movies, series, and where to watch them. This app is powered by the themoviedb (TMDb) database.",
     "extra": {
       "eas": {
@@ -26,21 +24,11 @@
     },
     "name": "WhatToWatch",
     "orientation": "portrait",
+    "newArchEnabled": true,
     "plugins": [
       "expo-font",
       "expo-localization",
       "expo-router",
-      [
-        "expo-build-properties",
-        {
-          "ios": {
-            "newArchEnabled": true
-          },
-          "android": {
-            "newArchEnabled": true
-          }
-        }
-      ],
       "expo-secure-store"
     ],
     "scheme": "whattowatch",

package.json

@@ -30,57 +30,52 @@
   "dependencies": {
     "@expo-google-fonts/poppins": "^0.2.3",
     "@react-native-masked-view/masked-view": "0.3.1",
-    "@react-navigation/bottom-tabs": "^6.5.20",
-    "@react-navigation/elements": "^1.3.30",
-    "@react-navigation/native": "^6.1.17",
-    "@react-navigation/stack": "^6.3.29",
     "@tanstack/react-query": "^5.59.16",
     "axios": "^1.7.7",
     "date-fns": "^4.1.0",
-    "expo": "~51.0.39",
-    "expo-blur": "~13.0.2",
-    "expo-build-properties": "~0.12.5",
-    "expo-constants": "~16.0.2",
-    "expo-dev-client": "~4.0.29",
-    "expo-font": "~12.0.10",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-localization": "~15.0.3",
-    "expo-router": "~3.5.24",
-    "expo-secure-store": "~13.0.2",
-    "expo-status-bar": "~1.12.1",
-    "expo-updates": "~0.25.27",
+    "expo": "^52.0.3",
+    "expo-blur": "~14.0.1",
+    "expo-constants": "~17.0.2",
+    "expo-dev-client": "~5.0.1",
+    "expo-font": "~13.0.1",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-linking": "~7.0.2",
+    "expo-localization": "~16.0.0",
+    "expo-router": "~4.0.2",
+    "expo-secure-store": "~14.0.0",
+    "expo-status-bar": "~2.0.0",
+    "expo-updates": "~0.26.5",
     "intl": "^1.2.5",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-intl": "^6.8.4",
     "react-is": "18.3.1",
-    "react-native": "0.74.5",
-    "react-native-gesture-handler": "~2.16.1",
+    "react-native": "0.76.1",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-safe-area-context": "4.10.5",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
-    "react-native-web": "~0.19.6",
-    "react-native-webview": "13.8.6",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "^4.0.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.2",
     "react-native-youtube-iframe": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/plugin-transform-typescript": "^7.25.9",
     "@babel/preset-env": "^7.26.0",
-    "@react-native/babel-preset": "^0.75.4",
-    "@react-native/eslint-config": "^0.75.4",
+    "@react-native/babel-preset": "^0.76.1",
+    "@react-native/eslint-config": "^0.76.1",
     "@svgr/cli": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.59.7",
     "@testing-library/react-native": "^12.8.1",
     "@types/jest": "^29.5.14",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^22.8.1",
-    "@types/react": "~18.2.79",
+    "@types/react": "~18.3.12",
     "@typescript-eslint/parser": "^8.11.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-react-intl-auto": "^3.3.0",
@@ -93,8 +88,9 @@
     "extract-react-intl-messages": "^4.1.1",
     "husky": "^9.1.6",
     "jest": "^29.7.0",
-    "jest-expo": "~51.0.4",
+    "jest-expo": "~52.0.0",
     "prettier": "^3.3.3",
+    "react-test-renderer": "^18.3.1",
     "typescript": "~5.3.3"
   },
   "private": true

src/app/(tabs)/_layout.tsx

@@ -71,7 +71,7 @@ export default function Layout() {
             id: 'home',
             defaultMessage: 'Home'
           }),
-          tabBarLabel: () => null,
+          tabBarShowLabel: false,
           tabBarIcon: (props) =>
             tabBarIcon({
               ...props,
@@ -87,7 +87,7 @@ export default function Layout() {
             id: 'search',
             defaultMessage: 'Search'
           }),
-          tabBarLabel: () => null,
+          tabBarShowLabel: false,
           tabBarIcon: (props) =>
             tabBarIcon({
               ...props,
@@ -103,7 +103,7 @@ export default function Layout() {
             id: 'streaming',
             defaultMessage: 'Streaming'
           }),
-          tabBarLabel: () => null,
+          tabBarShowLabel: false,
           tabBarIcon: (props) =>
             tabBarIcon({
               ...props,
@@ -119,7 +119,7 @@ export default function Layout() {
             id: 'me',
             defaultMessage: 'Me'
           }),
-          tabBarLabel: () => null,
+          tabBarShowLabel: false,
           tabBarIcon: (props) =>
             tabBarIcon({
               ...props,

src/app/person/[id]/index.tsx

@@ -22,13 +22,12 @@ import {
 } from 'api/person';
 import { Badge } from 'components/Badge';
 import { List } from 'components/List';
+import { CreditNumberThumb } from 'components/Person/CreditNumberThumb';
+import { ReadMore } from 'components/Person/ReadMore';
 import { Thumb } from 'components/Thumb';
 import { ThumbLink } from 'components/ThumbLink';
 import { ContentLayout } from 'layouts/Content';
 
-import { CreditNumberThumb } from '../components/CreditNumberThumb';
-import { ReadMore } from '../components/ReadMore';
-
 export default function Person() {
   const params = useLocalSearchParams<{ id: string }>();
   const personID = Number(params?.id);

src/app/person/[id]/movies.tsx

@@ -7,13 +7,12 @@ import { globalStyles } from 'styles';
 import { theme } from 'theme';
 
 import { useGetPerson, useGetPersonMovieCredits } from 'api/person';
+import { ItemThumb } from 'components/Person/ItemThumb';
 import { ThumbLink } from 'components/ThumbLink';
 import { useSafeHeights } from 'constants/useSafeHeights';
 import { BasicLayout } from 'layouts/Basic';
 import { Header } from 'layouts/Content/Header';
 
-import { ItemThumb } from '../components/ItemThumb';
-
 export default function PersonMovies() {
   const [scrollYPosition, getScrollYPosition] = React.useState(
     new Animated.Value(0)

src/app/person/[id]/tv.tsx

@@ -7,13 +7,12 @@ import { globalStyles } from 'styles';
 import { theme } from 'theme';
 
 import { useGetPerson, useGetPersonTvCredits } from 'api/person';
+import { ItemThumb } from 'components/Person/ItemThumb';
 import { ThumbLink } from 'components/ThumbLink';
 import { useSafeHeights } from 'constants/useSafeHeights';
 import { BasicLayout } from 'layouts/Basic';
 import { Header } from 'layouts/Content/Header';
 
-import { ItemThumb } from '../components/ItemThumb';
-
 export default function PersonTv() {
   const [scrollYPosition, getScrollYPosition] = React.useState(
     new Animated.Value(0)

src/app/tv/[id]/index.tsx

@@ -23,6 +23,7 @@ import {
 } from 'api/tv';
 import { Badge } from 'components/Badge';
 import { Button } from 'components/Button';
+import { EpisodeThumb } from 'components/EpisodeThumb';
 import { Images } from 'components/Images';
 import { List } from 'components/List';
 import { NetworkButton } from 'components/NetworkButton';
@@ -35,8 +36,6 @@ import { VideoThumb } from 'components/VideoThumb';
 import { ContentLayout } from 'layouts/Content';
 import { formatTime } from 'utils/time';
 
-import { EpisodeThumb } from '../components/EpisodeThumb';
-
 export default function Tv() {
   const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
   const params = useLocalSearchParams<{ id: string }>();

src/components/Gradient/index.tsx

@@ -8,7 +8,7 @@ import { theme } from 'theme';
 
 export type GradientProps = ViewProps & {
   angle?: number;
-  colors?: string[];
+  colors?: LinearGradientProps['colors'];
 };
 
 export function Gradient({

src/components/List/index.tsx

@@ -19,7 +19,7 @@ type VerticalListProps = Pick<
   numberOfItems?: number;
   results?: any;
   title?: JSX.Element | string;
-  titleHref?: Href<string>;
+  titleHref?: Href;
   /** remove resize from List render item */
   withoutSizing?: boolean;
 };

src/components/ListTitle/index.tsx

@@ -12,7 +12,7 @@ import { Touchable } from 'components/Touchable';
 export type ListTitleProps = {
   children: React.ReactElement | string;
   style?: RNTextProps['style'];
-  titleHref?: Href<string>;
+  titleHref?: Href;
 };
 
 export function ListTitle({ children, style, titleHref }: ListTitleProps) {

src/components/ThumbLink/index.tsx

@@ -7,7 +7,7 @@ import { Touchable } from 'components/Touchable';
 
 export type ThumbLinkProps = Pick<TouchableProps, 'style'> & {
   children: React.ReactElement;
-  href: Href<string>;
+  href: Href;
   isLoading?: boolean;
 };
 

src/routes/index.ts

@@ -1,70 +1,70 @@
 import type { Href } from 'expo-router';
 
-export const tvPath = (params: { id: number }): Href<string> => ({
+export const tvPath = (params: { id: number }): Href => ({
   pathname: '/tv/[id]',
   params
 });
 
 export const tvImagesPath = (params: {
   id: number;
   type: 'posters' | 'backdrops';
-}): Href<string> => ({
+}): Href => ({
   pathname: '/tv/[id]/images/[type]',
   params
 });
 
-export const moviePath = (params: { id: number }): Href<string> => ({
+export const moviePath = (params: { id: number }): Href => ({
   pathname: '/movie/[id]',
   params
 });
 
 export const movieImagesPath = (params: {
   id: number;
   type: 'posters' | 'backdrops';
-}): Href<string> => ({
+}): Href => ({
   pathname: '/movie/[id]/images/[type]',
   params
 });
 
-export const personPath = (params: { id: number }): Href<string> => ({
+export const personPath = (params: { id: number }): Href => ({
   pathname: '/person/[id]',
   params
 });
 
-export const personMoviesPath = (params: { id: number }): Href<string> => ({
+export const personMoviesPath = (params: { id: number }): Href => ({
   pathname: '/person/[id]/movies',
   params
 });
 
-export const personTvPath = (params: { id: number }): Href<string> => ({
+export const personTvPath = (params: { id: number }): Href => ({
   pathname: '/person/[id]/tv',
   params
 });
 
 export const personImagePath = (params: {
   id: number;
   start: number;
-}): Href<string> => ({
+}): Href => ({
   pathname: '/person/[id]/images/[start]',
   params
 });
 
-export const networkPath = (params: { id: number }): Href<string> => ({
+export const networkPath = (params: { id: number }): Href => ({
   pathname: '/network/[id]',
   params
 });
 
-export const genreMoviePath = (params: { id: number }): Href<string> => ({
+export const genreMoviePath = (params: { id: number }): Href => ({
   pathname: '/genre/[id]/movie',
   params
 });
 
-export const genreTvPath = (params: { id: number }): Href<string> => ({
+export const genreTvPath = (params: { id: number }): Href => ({
   pathname: '/genre/[id]/tv',
   params
 });
 
-export const videoPath = (params: { id: string }): Href<string> => ({
+export const videoPath = (params: { id: string }): Href => ({
   pathname: '/video/[id]',
   params
 });

src/utils/genres.ts

@@ -1,3 +1,5 @@
+import type { LinearGradientProps } from 'expo-linear-gradient';
+
 export const genresColor = {
   // action adventure
   10759: ['#00b109', '#03a8e1'],
@@ -53,4 +55,4 @@ export const genresColor = {
   10768: ['#a4931e', '#d6c027'],
   // western
   37: ['#cb3e00', '#ff5409']
-};
+} as { [id: number]: LinearGradientProps['colors'] };