Maintenance and modernization of react-native-web

[zoontek]

Hi everyone 👋

I'm Mathieu (@zoontek). Together with @necolas, Expo and the community, we're picking up active maintenance and development of react-native-web. As part of this, the repository will move to the React Foundation GitHub organization, next to React and React Native.

The direction stays conservative: react-native-web should track React Native as closely as practical. Broader questions about React Native APIs and native / web convergence belong to React Native itself (and react-strict-dom where it fits), not to this repository.

Maintenance

• Go through open issues and PRs: fix, merge, or close them.
• Ship bug fixes in regular releases.

Modernization

We want the codebase to be easier to maintain and easier for contributors to work on. For most of this, there should be no API change. All the changes below, breaking changes included, will happen on a 0.22-dev branch.

Raise the minimum browser targets to October 2021 versions

• Chrome 95+ / Edge 95+
• Firefox 93+
• Safari 15.1+ / iOS Safari 15.1+

This lets us remove vendor prefixes, user-agent sniffing, feature-detection branches and old fallbacks (for example, the PointerEvent fallback).

Drop React 18 support

Change the react and react-dom peer dependencies to ^19.0.0. This lets us remove findDOMNode and forwardRef usage.

Modernize the codebase and build

• Flow to TypeScript migration. Convert the source files, tests, the examples app and the benchmarks app.
• Tooling. Move to pnpm, tsdown, vitest, oxlint, etc.
• Package output. Publish the package as ESM ("type": "module").
• Fewer dependencies. Remove inline-style-prefixer, @babel/runtime, etc.

Remove modules that React Native core no longer has

• CheckBox
• Picker
• ProgressBar
• YellowBox
• InteractionManager
• Touchable (the old mixin, not TouchableOpacity and the others)

Add missing React Native APIs

We want to add React Native APIs that react-native-web does not support yet, for example:

• PlatformColor
• useAnimatedValue
• usePressability
• <Modal backdropColor="#000" />
• <Text onTextLayout={() => {}} />
• <TextInput clearButtonMode="always" />
• …

Deprecate babel-plugin-react-native-web

The plugin rewrites imports to make bundles smaller. Modern bundlers already do this with an alias (react-native → react-native-web) and tree shaking, and Expo CLI does not use the plugin.

Later (feedback wanted)

• Bundler plugins to:
  • configure the react-native → react-native-web alias and the file extension resolution (.web.js before .js, etc.)
  • replace Platform.OS, Platform.select and Platform.isTesting at build time, for dead-code elimination
  • bundle and resolve @2x / @3x / @4x assets correctly, probably with srcset
  • extract CSS to a single .css file at build time, similar to StyleX (potentially)

How to help

• Review the PRs as they are opened.
• Try the prereleases when they are out, and report regressions.
• Comment on the ideas in "Later".

Questions, concerns and suggestions are welcome below!

[Freddy03h]

Hi Matthieu!

I’m really happy to hear that you’re taking over the project through the React Foundation. It’s honestly such great news, and I know it’s in good hands! We still have projects in production relying on it, so I’m really glad to see it getting the attention it deserves ^^

I’m a little sad to see React Strict DOM being completely abandoned by Meta, though. I really thought the vision and evolution of React Native were heading in that direction, and I was quite excited about it.

Anyway, thanks so much for all the dedication you’ve put into creating and maintaining React Native-related projects. It’s really appreciated! ❤️

[necolas]

I think there are people at Meta like @rubennorte and @cortinico who have continued to drive convergence with Web from the RN side. RSD is a lot simpler than RNW so perhaps the team at Expo will be able to help there at some point, if the community wants things to move in that direction.

[joaqo]

RSD is so beautiful, it would be so sad for it to die, I think expo probably will end up deciding which framework wins. Really hope they end up picking up RSD too soon, it's the better of the 2 frameworks honestly.

[MoOx]

Great news, thanks @zoontek (and @necolas, Expo) for picking this up.

I've used RNW in production for years, and I still think cross-platform React is the right level of abstraction for most products: one codebase, native where it matters, and the web as a real target rather than an afterthought.

I spent a good part of this year trying to help RSD move forward (react/react-strict-dom#471). I still like the idea, but activity there has mostly stalled since spring, and at some point teams need something that works today. RNW does, and has for a long time. Having it actively maintained under the React Foundation, tracking React Native closely, is exactly what the ecosystem needed.

The plan looks solid to me. Dropping old browsers and React 18, moving to TS and ESM: all reasonable for a 0.22. I'll try the prereleases on real projects and report regressions, and I'm happy to help with reviews or triage if useful.

On "Later": +1 for bundler plugins, especially build-time Platform.* replacement and @2x/@3x asset resolution. That's the part everyone reinvents in every Vite/webpack setup.

[bencripps]

This is awesome news! Do we have thoughts on what the process looks like for becoming a maintainer for this repo. RNW is a super important part of the ecosystem (especially now that the future of RSD is less clear). We'd love to be able to contribute back, or help in anyway we can.

[necolas]

That's great. First step is to continue contributing patches and building a working relationship with maintainers

[bencripps]

Perfect, looking at the modernization steps, it seems possible to contribute to the flow -> TS migration, or other tooling needs (like oxlint). Does it sound reasonable to begin contributing to those in an incremental fashion? Thanks for the quick response

[zoontek]

@bencripps This work is already done here, and I will add it to this repository bit by bit. But I'm looking for reviewers and prerelease testers, if you can help, that would be awesome.

[bencripps]

Got it, we can def help with that. I'll see if we can help with reviews, and we are def available for prereleases.

[necolas]

I've known the team at Expo since before I worked at Meta. Their leadership has been unwavering in their investment and commitment to React. This is the ideal outcome for RNW and I hope in the future they can pick up the baton for RSD too. Thanks Mathieu and Expo!