Satyajit Sahoo

Gesture Handler 2.28.0 heading your way 🫰

✅ Support for React Native 0.81
✅ gestureHandlerRootHOC is now deprecated
✅ Submitting TextInput inside Pressable no longer blocks gestures

I made a video explaining, step by step, how to implement the new Liquid Glass bottom tabs in your Expo app!

Link: youtu.be/L5f8Gy91Gv4

How to Gradually Migrate From React Native Community CLI to Expo | Callstack Learn how to migrate your React Native Community CLI app to Expo incrementally, with minimal risk. Hosted by Callstack & Expo, August 5, 9AM PT.

Still a little more time to register for the @callstack.com webinar that starts in an hour - Callstack CTO and founder Mike Grabowski and I will be talking about how to migrate your app to Expo! www.callstack.com/events/how-t...

Rozenite - a plugin framework for React Native DevTools - is now live in alpha! 🎉

What started as a hacky PoC is now something you can use in real projects.

Still lots to come: better network monitor, Redux DevTools, Re.Pack support & more 💪

Guess we could check if Activity mode is hidden when cleanup fires, though that won't work if component got unmounted when it was hidden.

@danabra.mov Can a component know when the effects get cleaned up due to Activity mode hidden vs unmount?

We cleanup state when navigator unmounts. But we need to keep state if it didn't unmount.

i think i can't infer from the current info, but often defaults can get tricky when supporting multiple platforms, and different people will have different opinion on what should be default.

feedback is always welcome on what could be changed.

I don't have context on what was broken but happy to answer if someone remembers what the issue was.

Actually, a while ago, I also added `backBehavior=fullHistory` to `TabRouter`, which can achieve a stack history in a tab router. So custom handling isn't needed for this case.

It doesn't handle params yet but it doesn't look like it'll be an issue for bluesky's tabs.

In React Navigation 7, I added a prop: UNSTABLE_router so people can customize the state update logic even if they don't have a custom navigator. Which I plan to make a stable API in the future.

The Activity component would be huge, so we could unmount inactive screens without losing screen and nested navigator states. Without it, there's not a lot we can do to optimize stack navigators without other tradeoffs.

So for an app to have stack-like history in a tab router, it needs to:

- Handle navigation related actions like (NAVIGATE) and add item to history - in this case it could keep old route params
- Handle back navigation and update the params based on history when needed

The logic is controlled by "routers" in React Navigation, which is essentially reducers that handle actions and manipulate state.

A tab router state has 2 relevant things:

- routes - array of routes to render, in this case tabs
- history - the history array, which is also used for browser history

Bluesky should not be using a stack navigator for a tab-like navigation. A tab navigator doesn't have multiple instances of the same screen so this issue wouldn't exist.

Though iirc bluesky uses a custom navigator, so it has full control over how screens are rendered and how the history looks like.

Add edge-to-edge opt-in support by zoontek · Pull Request #52088 · facebook/react-native Summary: This follows #47554 Compared to the initial proposal, I had to remove the edgeToEdgeEnabled property from the root gradle.properties and put it in the app gradle.properties instead (explai...

🎉 enableEdgeToEdge opt-in has been merged into React Native
github.com/facebook/rea...

The last time I used Gulp was almost a decade ago. Funny that GitHub shows it as a suggested workflow

Radon IDE 1.8 is out!
🔄 Run multiple devices in the background – one of your most requested features
🧠 Added support for Module Context Protocol in Radon AI
⚛️ Added support for React Native 0.80
🐞 Tons of bug fixes for a smoother, more stable DX

Animating zooming using CSS: transform order is important… sometimes How to get the right transform animation.

CSS uses a complex algorithm to decide how to animate transforms. If you get it wrong, as many folks do, you end up with an unnatural animation.

Here's how it works, and how to avoid the pitfalls.

jakearchibald.com/2025/animati...

React Native 0.80 - React 19.1, JS API Changes, Freezing Legacy Arch and much more · React Native Today we are excited to release React Native 0.80!

React Native 0.80 is now available!

This release includes React 19.1, stability improvements to our JavaScript API, freezes the Legacy Architecture, and more.

reactnative.dev/blog/2025/0...

This how I'd expect it:

- Description
- Installation (instructions)
- Usage with example that I can copy/paste
- Available configuration options
- Example other cases (older React, libraries etc.)
- Any other details

I missed it, I'd really expect it to be under the installation instructions. At least link to that section, they link to react 17 section already

Having to scroll through a bunch of special setup sections like react 18 and libraries before finding default setup isn't ideal, and kinda unexpected.

I'm already using it in my project. I'm just saying that the docs are suboptimal, in response to @rossipedia.com's reply.

It especially took time snooping around to find out what rule to enable for the ESLint config.

The title it's shown under is "Using React Compiler with React 17 or 18" or under "Using the compiler on libraries".

I know how to configure the babel plugin. I can figure it out. But docs are for a wide-range of people.

And even if I can figure it out, I really appreciate copy/pastable example.

Same for the ESLint setup. They link to editor setup that also doesn't show how to setup the ESLint config, it then links to eslint-plugin-react-hooks npm page stable version.

And the RC version README on npm doesn't even mention the react-compiler rule. I had to check the source to find the rule.

The installation instructions themselves don't show how to use it after installing it.

There's no copy-pasteable config. Later examples show different scenarios. But there should be an example to copy paste in latest projects that don't need those configs for other situations like older react.

Botanically a anything that develops from a flower is a fruit, so a lot of "vegetables" are technically fruits. Eggplant, Zucchini etc. are fruits too.

But culinary definition of a vegetable is edible part of a plant, fruit often has a sweet flavor. It can also depend on the situation.

Convert from Expo Go to a development build How to migrate your Expo Go project to use development builds.

After some insightful user feedback, we've added a new guide on how to migrate an Expo Go app to use development builds.

This is important. We don't want people pushing Expo Go too far. It's a sandbox. Production apps need development builds.

docs.expo.dev/develop/deve...

YouTube video by Software Mansion You Might Not Need react-native-svg #reactnative

The truth is… you don’t always need react-native-svg. 💥
Sometimes there’s just a better way to get the job done. 👀
www.youtube.com/shorts/IiSdp...

AI: did you check your work? There's no denying that the web industry, as with many others, has AI and LLMs as a ubiquitous presence. There's all kinds of different uses for LLMs, and come…

Look, I wrote this in the car, and published it all from my phone, and I'm not entirely sure I'm saying anything new, but... here you: "AI: did you check your work".

A recent experience that makes me, as usual, concerned.

remysharp.com/2025/05/31/a...

I am working in something *very* wild for Preact, which I believe will be a complete game changer.

Actually right now I'm on vacation BUT when I get back I will continue working on this *very* wild thing. 6 year old idea but the last 2 years of Preact features make it infinitely better.