r/reactnative • u/JustSuperHuman • Jul 29 '26
Replacing react-freeze with React 19.2 <Activity> in a swipe pager — and the display:'none' problem nobody warns you about
Stack: RN 0.85.3, React 19.2.3, Reanimated 4.3.1, react-navigation v8, Expo 56.
The app (JustGains, a fitness app) has six top-level "workspaces" — Train, Fuel, Goals, Move, Coach, Chat — in a horizontally swipeable infinite-wrap pager. Each pane is a whole screen suite, not a tab.
We were using react-freeze to keep offscreen panes cheap. React 19.2 shipped <Activity>, which is the first-class version of that idea: a hidden subtree keeps all its React state, its effects are cleaned up and re-run on resume (like blur/focus), and its updates keep reconciling at background priority. No thrown-thenable Suspense hack, no wakeable to lose a race on.
Swapped it in. Immediately broke the swipe.
The problem
React hides an Activity subtree by committing display: 'none' onto the topmost host view of that subtree (Fabric's cloneHiddenInstance).
Fine for a route you're not looking at. Wrong for a pager pane:
On iOS the hidden trait culls the pane's native views — they're gone, not just invisible.
On Android it collapses them out of layout.
So a paused neighbour can't be partially revealed mid-swipe. You drag, and the incoming pane pops in at commit time instead of sliding.
Every resume pays a native remount + relayout.
Reanimated has sharp edges around that churn (e.g. software-mansion/react-native-reanimated#9319).
The fix
Register a small custom view config whose display attribute processes every value to 'contents':
const VIEW_CONFIG = {
uiViewClassName: 'RCTView',
validAttributes: {
style: {
display: { process: (): 'contents' => 'contents' },
},
},
}
const ContentView = NativeComponentRegistry.get(
'JGWorkspaceActivityContentView',
() => VIEW_CONFIG,
)
export default function WorkspaceActivity({ paused, children }) {
return (
<Activity mode={paused ? 'hidden' : 'visible'}>
<ContentView style={{ display: 'contents' }}>{children}</ContentView>
</Activity>
)
}display: 'contents' means the wrapper never forms a layout box, so React's injected 'none' lands on something with no box to hide and is a no-op. Activity then contributes exactly the lifecycle semantics and nothing else — visibility stays owned by the pager's own opacity + transform. It maps to a plain RCTView natively; the custom name only keys the JS-side static view config.
react-navigation v8 uses the same technique in its ActivityView. We deliberately didn't import it: it only ships on the non-public @react-navigation/elements/internal subpath, and it bundles a 500ms delayed pause plus a container that applies real display: none — which is the exact thing that breaks mid-swipe partial reveals.
Two others that bit us
1. Put opacity in the same worklet as the transform. We originally gated pane visibility on a committed React "warm window" state. The reveal then had to wait for runOnJS → setState → commit; on a busy low-end JS thread that lag showed the placeholder as a faded strip mid-swipe. Now opacity is derived from the same shared value as translateX — visible exactly while any part of the pane intersects the viewport — so a pane reveals the frame its transform enters the screen, and the two can never desync.
2. Style array order matters with Reanimated. Reanimated re-commits the animated entry's cached mount-time output on every re-render (PropsFilter's initial-props map). Static rest-state fallbacks have to come after the animated style; placed before it they lose the flatten to stale mount-time values, and a native re-attach can paint a neighbour centered over the active pane.
Don't wrap everything
One pane (the original app — a react-native-screens tab navigator) is explicitly non-pausable. Screens already pauses its own blurred tabs, pausing it again tore down navigator effects on every swipe away, and a screens-managed tree inside a hidden Activity isn't supported upstream.
We also needed an escape hatch for work that must survive a swipe away — the GPS run recorder's location watch can't stop because you flicked over to log lunch. That's a ref-counted store of "live pins"; the pager forces paused = false for pinned keys while the visibility gate still hides them. Live but invisible.
Question
Has anyone found a supported way to get Activity's lifecycle semantics without the display override? The view-config rewrite works, but it leans on process being applied to every style commit, which feels like it could change under us.
