Update Expo SDK in example

[necolas]

We use Expo to power the example / visual regression testing app. Keeping this up-to-date is important for the following reasons:

1. We validate the experience of using RSD with the latest OSS RN releases.
2. We do most RSD development in this repo, using OSS RN first.
3. We want RSD to be easy to adopt when using Expo - the recommended OSS RN framework, and a React framework that is explicitly aligned with the goals of RSD.

The current challenges

1. We are missing developer docs for process of upgrading Expo in the RSD repo. Make it easy for anyone to improve and follow the Expo upgrade process in the RSD repo.
2. We don't have a working style extraction plugin for Metro on web. Make it so that Expo-based RSD apps can deliver static CSS files.

Action items

• Update to SDK 52. Updating to SDK 52 is important for testing against the new RN architecture. The process should be documented for the future.
• New contributor docs. Add details to the "contributing" docs on how to maintain repo infra like Expo, Jest, etc. For Expo, I imagine it might contain links to guides like "Upgrade Expo SDK", and any other steps that may be specific to successfully upgrading the RSD repo.
• Extract CSS in Expo. Look into the approach taken by @javascripter's postcss-react-strict-dom.

[necolas]

SDK bug report: expo/expo#30143

[EvanBacon]

2. Can't use latest React Native. We're stuck using whatever version of RN the SDK requires, but we're increasingly relying on features in latest releases or nighties.

Unclear what new features you're referring to here. Expo SDK 51 is the only reasonable way to access and use experimental React 19 features end-to-end on iOS, Android, and web (npx create-expo-app -e with-canary-react-19).

We also test the Expo SDK against nightlies, and support new architecture. You can change or patch dependencies in dev clients however you'd like.

3. Installs unnecessary dependencies. We don't need RNfWeb but Expo forces this for Web.

It's unclear to me how installing react-native-web blocks usage with react-strict-dom. We enforce the installation of react-native-web to reduce the chance of errors on web and increase developer success. I'm more than willing to add a flag to support starting Metro web without react-native-web installed though.

4. Metro and Expo will lack StyleX integration on Web. I don't think we have a way to get the output from the StyleX CLI back into Expo.

Expo CLI supports standard CSS, CSS Modules, Sass, SCSS, and postcss. Along with custom Metro transformers, there should be more than enough bundler API to build a StyleX plugin for Metro. Here's an example of a complex styling plugin from nativewind.

If something is missing here, please let us know and we'll fix it.

5. Expo controls the outer document and RN container

Reasonable defaults are applied by default. You can create a public/index.html to overwrite the default value docs (run npx expo customize to interactively generate this file). You can use web/index.html for legacy Webpack projects, and the new app/+html.tsx for dynamically controlling the root during server rendering.

For the React Native container, simply create an index.js and register your own root component.

[byCedric]

Hi @necolas! I also followed-up on your bug report, I'd love to dig into the issues you mentioned! expo/expo#30143 (comment)

[necolas]

Thanks @EvanBacon and @byCedric for all the pointers, we'll look through everything and try it out.

It's unclear to me how installing react-native-web blocks usage with react-strict-dom

We want to avoid react-native-web from being bundled, inserting styles, and handling root rendering.

Expo CLI supports standard CSS, CSS Modules, Sass, SCSS, and postcss

Is there a way to disable all this? It's not aligned with our vision for cross-platform code sharing, so if we were to provide a template based on Expo it would need to drop these features.

[nmn]

@EvanBacon I looked at the transformer for Nativewind web and I found the following code:

if (isWeb) {
  return worker.transform(
    config,
    projectRoot,
    filename,
    Buffer.from(`require('${config.nativewind.output}');`, "utf8"),
    options,
  );
}

This is not sufficient for StyleX as we need to the following steps:

1. Transform each JS file and put the generated CSS into a file-specific metadata
2. Once all the files are transformed, take all the style metadata and generate a CSS file

There can be a possible workaround if the require() can be used to import CSS data URL instead of a file import, like it does for Tailwind. Is this something supported?

[necolas]

I tried this out again, because we want to be able to test against RN 0.75 with the new architecture enabled.

Reinstalled the examples project from scratch following these instructions. First run of the start command:

Development build: Unable to get the default URI scheme for the project. Please make sure the expo-dev-client package is installed.

CommandError: No development build (com.example.with-new-arch) for this project is installed. Please make and install a development build on the device first.

The script did not install the dev client. I skip the dev-client flag. Second run

The following packages should be updated for best compatibility with the installed expo version:
  @expo/[email protected] - expected version: ~3.2.3
  [email protected] - expected version: ~51.0.31
  [email protected] - expected version: ~0.12.5
  [email protected] - expected version: 0.74.5
Your project may not work correctly until you install the expected versions of the packages.

The app runs fine, and I look at the examples to see if position:static is supported properly, as we expect on the new architecture. But it doesn't rendered properly (we've verified internally that it works internally on our app infra). Wondering how we can tell if the new architecture is actually enabled in the app, and why we don't see some of the features that should turn on - I can't really tell what is an Expo / setup issue vs what is a React Native / featureFlag issue.

[necolas]

Blocks #219 and #225.

I appreciate anyone who wants to contribute the upgrade to Expo 52 with the new architecture enabled. The issue description has been updated.

cc @ecreeth @javascripter