Matthieu G.

Thanks to @matthieugc.bsky.social and @cyrilbo.bsky.social for this edition while I'm taking a break

And of course @ricky.fm for the extra React team message and great newsletter shoutout 🤗

Awesome! You say it's compatible with old arch, but I guess the perf is not as good without sync layout?

GitHub - matthieugicquel/device-shaper: JS/TS APIs to manipulate iOS and Android simulators JS/TS APIs to manipulate iOS and Android simulators - matthieugicquel/device-shaper

I might work on this lib to manipulate iOS/Android devices, add a few features, create an MCP server that uses it 🙂

I'm wondering the same...
I guess the usual for caching: disk space usage, and stale results if the cache key is not good enough (if the length of the docs is any indication, it's probably good enough 🙂https://ccache.dev/manual/4.10.2.html#_how_ccache_works)

github.com/bluesky-soci... of course 🙂

Also this french govt app: github.com/pass-culture...

This Week In React 213

Read/subscribe online:
thisweekinreact.com/newsletter/213

⚛️
- React 19
- Next.js
- React Compiler
- React Router
- Restyle
- Lingui
📱
- State of RN
- Uniffi
- Shared Objects
- Fast IO
- Sheet Transitions
- Radon

Is this the "centering a div" of React Native? 😅

Screenshot - Some multiline text, followed by a "tag" that is not vertically aligned with the text

Has anyone found a clean way to vertically center a View inside a multiline text in React Native (with the new arch)?

An arbitrary `translateY` moves the tag, but it's very manual and not robust to font scaling 😬

May I ask what extension/setting displays the inferred return type?

Code screenshot import { Image } from "expo-image"; import { useStyles } from "react-native-unistyles"; import { icons } from "#assets/icons"; import type { Theme } from "#shared/theme/theme"; type IconName = keyof typeof icons; type Props = { name: IconName; color: keyof Theme["colors"]; // There are 230 colors in the theme }; export const Icon = ({ name, color }: Props) => { const { theme } = useStyles(); return <Image source={icons[name]} tintColor={theme.colors[color]} />; };

Here's an example I found in the codebase I'm working on. How would you migrate it? 🤔

Of course there are other ways to do icons, but it's a legit approach...

(I simplified the code, there are other props like `size` in the real version)

It's good to get best-perf-by-default, but rerenders are ok sometimes. If they weren't we would be using jQuery not React 😅.

I wonder how this will compose with reanimated (needing theme in animated styles) or some uses of react-native-svg.
I'll try to migrate and report back 🙂

What a great release 😀
The createUnistylesComponent api feels a bit awkward, have you thought about a useTheme hook? Maybe it’s not possible with the way things work on the C++ side?

Just got bit by the React Navigation v7 breaking changes after upgrading to Expo SDK 52. This is mentioned in the Expo changelog, but easy to miss (lots of changes 😀), so double check this part! It probably impacts every non-trivial app. reactnavigation.org/docs/upgradi...

In React Native where navigating != (un)mounting, it can also happen just by navigating, can't it?
screenA (staleTime 1min) → navigate to screenB (staleTime 10min) → go back to screenA (it is still mounted) → no refresh.

Or maybe always keeping the shortest timer instead of the most recent?

I see. This feels a bit like the code will be lying: if I get a bug report that a screen doesn't refresh, the code will say `staleTime: x` and I'll have to track down where the timer increase comes from across the codebase.
What about enforcing equal staleTime or at least warning about overrides?

This looks like a great change (the persistence part is nice 😁), but I don't really get how you can have only 1 timer and 1 flag per query/queryKey, but different staleTimes for different screens? The more recently mounted screen will override the previous time, won't it?

Not that I know of, but here’s an example of a component that does it: github.com/infinitered/...

The new useImage hook in expo SDK 52 might help too :)