Expo 52 support

[edisonhuff]

Heyo, wondering if there's any breaking changes I need to worry about when using solito with expo 52, and if there will be an explicit update for supporting expo 52.

[nandorojo]

There shouldn’t be any issues since this library is JS only. The bigger thing to watch for would be upgrading to React Navigation v7, but I think that should work too. Just need to confirm it.

SDK 52 should have no affect on Solito

[edisonhuff]

I believe expo 52 comes with expo router v3, and will ship with react navigation v7 by default

https://expo.dev/changelog/2024/10-24-sdk-52-beta#expo-router

[troyshu]

There shouldn’t be any issues since this library is JS only. The bigger thing to watch for would be upgrading to React Navigation v7, but I think that should work too. Just need to confirm it.

SDK 52 should have no affect on Solito

This is what I hoped for as well, but it looks like Expo SDK 52 and expo-router has some sort of compatibility issue with solito.

See my test repo https://github.com/troyshu/expo-52-solito-test, which is just the solito-expo-router demo app with an upgraded Expo SDK. The main branch uses Expo SDK 51 and the native and web apps work (i.e. npm run native and npm run web). The expo-52 branch uses Expo SDK 52 and the native app breaks (iOS and Android), resulting in a Cannot read property '_context' of undefined error (the web app still works).

 (NOBRIDGE) ERROR  Warning: TypeError: Cannot read property '_context' of undefined

This error is located at:
    in LinkCore (created by TextLink)
    in TextLink (created by HomeScreen)
    in RCTView (created by View)
    in View (created by Dripsy.View)
    in Wrapped (created by HomeScreen)
    in RCTView (created by View)
    in View (created by Dripsy.View)
    in Wrapped (created by HomeScreen)
    in HomeScreen (created by Home)
    in Home
    in Unknown (created by Route(index))
    in Suspense (created by Route(index))
    in Route (created by Route(index))
    in Route(index) (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by NativeStackNavigator)
    in RNSScreenContentWrapper (created by ScreenContentWrapper)
    in ScreenContentWrapper (created by DebugContainer)
    in DebugContainer
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze
    in InnerScreen (created by Screen)
    in Screen
    in ScreenStackItem (created by SceneView)
    in SceneView (created by NativeStackView)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by ScreenStack)
    in RNSScreenStack (created by ScreenStack)
    in Unknown (created by ScreenStack)
    in ScreenStack (created by NativeStackView)
    in RCTView (created by View)
    in View (created by SafeAreaProviderCompat)
    in SafeAreaProviderCompat (created by NativeStackView)
    in NativeStackView (created by NativeStackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by NativeStackNavigator)
    in NativeStackNavigator
    in Unknown (created by Root)
    in BreakpointIndexProvider (created by DripsyProvider)
    in DripsyProvider (created by Dripsy)
    in Dripsy (created by Provider)
    in Provider (created by Root)
    in Root
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in ThemeProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

Any ideas @nandorojo?

[nandorojo]

That looks like an expo router error in particular. There might be clashing versions of react navigation sub packages, be sure it’s not in package json

[troyshu]

Thanks for the quick response @nandorojo! No explicit react-navigation dep in apps/expo/package.json nor package.json

apps/expo/package.json

{
  "dependencies": {
    "app": "*",
    "expo": "52.0.0-preview.23",
    "expo-linear-gradient": "~14.0.1",
    "expo-linking": "~7.0.2",
    "expo-router": "~4.0.0-preview.14",
    "expo-splash-screen": "~0.29.4",
    "expo-status-bar": "~2.0.0",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.1",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "4.0.0",
    "react-native-web": "~0.19.10"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "typescript": "~5.3.3"
  },
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios"
  },
  "version": "1.0.0",
  "private": true,
  "name": "expo-app"
}

package.json

{
  "name": "solito-expo-router",
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ],
  "devDependencies": {
    "@types/react": "~18.2.21",
    "eslint": "^8.21.0",
    "turbo": "^1.4.2",
    "typescript": "^5.2.2"
  },
  "scripts": {
    "native": "cd apps/expo && yarn start",
    "web": "cd apps/next && yarn next"
  },
  "nohoist": [
    "**/expo-router",
    "**/expo-router/**"
  ],
  "packageManager": "[email protected]"
}

I'll keep poking around but would love more eyes on this. hope we can get a working example with Expo 52 and solito soon :)

[nandorojo]

Maybe duplicate react versions, a yarn resolution could fix this

[troyshu]

I added the following to package.json but am still getting the error.

"resolutions": {
    "react": "18.3.1",
    "react-native": "0.76.1"
  }

Updated at https://github.com/troyshu/expo-52-solito-test/tree/expo-52.

Could the error be related to the New Architecture https://docs.expo.dev/guides/new-architecture, since the error is native only? I tried replacing Solito Links import { TextLink } from 'solito/link' with Expo Router Links import { Link } from 'expo-router' and the sample app (along with the links) work now on native.

[troyshu]

I dug into this some more (actually read the stacktrace...) and arrived at the same fix that's already in PR: #497. Here's my working sample app of solito with Expo SDK 52: https://github.com/troyshu/expo-52-solito-test/tree/expo-52

@nandorojo what can we do to get that PR merged?

[nandorojo]

Ah, got it, merged

[nandorojo]

I actually created the upstream PR from react navigation for LinkingContext too haha

[troyshu]

Awesome, thanks! Looking forward to a new release! Realizing I didn't test backwards compat with Expo 51, 50, etc... not sure if @benjipott of the merged PR #497 did

[megacherry]

@troyshu: I tried your patch and it works, but my navigation with router.push is not working anymore. With expo-router i have no problems. Did you face the same issue?

[troyshu]

I did encounter some routing issues after this Expo 52 patch but nothing specific to solito I think. Can you post another issue with the details (eg what the error is, the stack trace, occurring on native and/or web), tag me, and I can try giving you some ideas?

[megacherry]

No error, only routing does not work with useRouter() -> () => router.push('/settings') does nothing. No error message, nothing. But if i replace it with expo-router, then it works. Could it be react-navigation v6?

[nandorojo]

Hm it could be some bifurcation between Expo Router/React Navigation.

If I saw a reproduction it might be easier to say. We’re using useLinkTo from react navigation, does that work?

[megacherry]

Hm, useLinkTo is working...I'm looking further.

[nandorojo]

Can you make sure you don’t have multiple versions of react navigation installed

[nandorojo]

Closing this, please open a separate issue if needed. For anyone who finds this issue, please upgrade Solito 4.3.0

[nandorojo]

Release here: https://github.com/nandorojo/solito/releases/tag/v4.3.0

[megacherry]

Got it. It's an useLayoutEffect with navigation.setOptions.

This is actually not working (why ever):

React.useEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

[nandorojo]

That looks unrelated to this issue (and Solito), could you open an issue on react navigation?

[garygcchiu]

FWIW I'm running into the same issue as @megacherry. Upgraded to Expo52, updated all my dependencies (including [email protected]), and now my navigation does not work when using router.push(...). Looking into my yarn.lock I should only have react-navigation ^7.0.0. Navigating via expo-router (i.e. my Tab navigation) works fine, however. I haven't enabled the New Architecture yet.

What's especially weird is that if I add a console.log() in the route that I'm trying to navigate to, it actually logs, suggesting that the navigation is actually happen and rendering the screen. But the app just doesn't actually perform the navigation or something?

Also, this doesn't happen on every route. Some routes it works fine and navigates properly. Other times it doesn't. Trying to find out why

Replacing "useRouter" with "useLinkTo" from "@react-navigation/native" runs into the same problem: sometimes no navigation. So indeed likely unrelated with Solito and something with react-navigation 7. 😔

[garygcchiu]

Alright I found something interesting, this navigation issue only happens if I have a Stack.Screen defined in the same file as my route. For example: https://github.com/mozzius/graysky/blob/9d4825ad66058c2127e049093d3f6accbac1a7d8/apps/expo/src/app/(tabs)/(feeds%2Csearch%2Cnotifications%2Cself)/feeds/manage.tsx#L22-L57.

I believe the alternative here would be defining this Stack.Screen in an _layout.tsx file instead. If I do that, then navigation works fine.

For example, given this setup:

app/(tabs)/settings/
  _layout.tsx
  index.tsx
  setting_one.tsx
  setting_two.tsx
  ...

_layout.tsx:

import { Stack } from "expo-router";

export default function Layout() {
	return (
		<Stack>
			<Stack.Screen
				name="index"
				options={{
					headerShown: false,
				}}
			/>
		</Stack>
	);
}

When trying to router.push("/(tabs)/settings/settings_one"), this DOES NOT WORK:

setting_one.tsx:

import { MySettingsOne } from "app/features/user/settings/SettingsOne";
import { Stack } from "expo-router";

export default function SettingsOne() {
	return (
		<>
			<Stack.Screen
				options={{
					headerTitle: "Some Custom Title for Settings One",
				}}
			/>
			<MySettingsOne />
		</>
	);
}

However, this DOES WORK:

setting_one.tsx:

import { MySettingsOne } from "app/features/user/settings/SettingsOne";

export default function SettingsOne() {
	return (
		<MySettingsOne />
	);
}

_layout.tsx:

import { Stack } from "expo-router";

export default function Layout() {
	return (
		<Stack>
			<Stack.Screen
				name="index"
				options={{
					headerShown: false,
				}}
			/>
			<Stack.Screen
				name="settings_one"
				options={{ headerTitle: "My Custom Title for Settings One Here Instead" }}
			/>
		</Stack>
	);
}

This leads me to think there might be something at play with expo-router or a breaking change in react-native-screens as well. I'm not too deeply familiar with either, so maybe I was just doing something wrong. But this is my workaround for the time being, hope it works with you!

[megacherry]

Yeah, i had the same result. The routing worked without Stack.Screen. But I gave up and downgraded to expo sdk 51 again.