feat: Prioritize pseudoselectors over renders

apps/common-app/src/apps/css/examples/transitions/routes.ts

@@ -100,6 +100,10 @@ const routes = {
         name: ':active',
         Component: pseudoSelectors.Active,
       },
+      PseudoActiveBlocksRender: {
+        name: ':active blocks render transition',
+        Component: pseudoSelectors.ActiveBlocksRender,
+      },
       PseudoActiveDeepest: {
         name: ':active-deepest',
         Component: pseudoSelectors.ActiveDeepest,
@@ -124,9 +128,18 @@ const routes = {
         name: 'Arbitrary web selectors',
         Component: pseudoSelectors.ArbitraryWebSelectors,
       },
-      PseudoShowcase: {
+      Showcase: {
         name: 'Showcase',
-        Component: pseudoSelectors.Showcase,
+        routes: {
+          PseudoPlanets: {
+            name: 'Planets',
+            Component: pseudoSelectors.Planets,
+          },
+          PseudoForm: {
+            name: 'Form',
+            Component: pseudoSelectors.Form,
+          },
+        },
       },
     },
   },

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/ActiveBlocksRender.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import {
+  Screen,
+  Scroll,
+  Section,
+  VerticalExampleCard,
+} from '@/apps/css/components';
+import { colors, radius, sizes, spacing } from '@/theme';
+
+export default function ActiveBlocksRender() {
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhase((prev) => (prev + 1) % 2);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const renderColor = phase === 0 ? colors.danger : colors.primaryLight;
+
+  return (
+    <Screen>
+      <Scroll contentContainerStyle={styles.content} withBottomBarSpacing>
+        <Section
+          description="backgroundColor is driven by two sources at once: a render-driven transition that toggles red <-> light blue every 1000ms via the 'default' value, and a ':active' selector that sets dark navy. Press and hold the box: while ':active' is active, the incoming render transitions on backgroundColor should be blocked and the box should hold dark navy (no red/blue flicker). Release and the looping render transition resumes."
+          title="Selector blocks render transition">
+          <VerticalExampleCard
+            title="backgroundColor: render loop vs :active"
+            code={`const renderColor = phase === 0 ? colors.danger : colors.primaryLight;
+
+<Animated.View
+  style={{
+    backgroundColor: {
+      default: renderColor,
+      ':active': colors.primaryDark,
+    },
+    transitionDuration: '900ms',
+    transitionTimingFunction: 'linear',
+  }}
+  onStartShouldSetResponder={() => true}
+/>`}
+            collapsedCode={`backgroundColor: {
+  default: renderColor,
+  ':active': colors.primaryDark,
+},`}>
+            <Animated.View
+              style={[
+                styles.box,
+                {
+                  backgroundColor: {
+                    ':active': colors.primaryDark,
+                    default: renderColor,
+                  },
+                  transitionDuration: '900ms',
+                  transitionTimingFunction: 'linear',
+                },
+              ]}
+              onStartShouldSetResponder={() => true}
+            />
+          </VerticalExampleCard>
+        </Section>
+      </Scroll>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    borderRadius: radius.md,
+    height: sizes.md,
+    width: sizes.md,
+  },
+  content: {
+    gap: spacing.xs,
+  },
+});

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/Showcase.tsx → apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/Form.tsx

@@ -139,7 +139,7 @@ function Card({
   );
 }
 
-export default function Showcase() {
+export default function Form() {
   return (
     <Screen>
       <Scroll contentContainerStyle={styles.content} withBottomBarSpacing>

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/Planets.tsx

@@ -0,0 +1,151 @@
+import { StyleSheet, Text } from 'react-native';
+import Animated, { css } from 'react-native-reanimated';
+
+import {
+  Screen,
+  Scroll,
+  Section,
+  VerticalExampleCard,
+} from '@/apps/css/components';
+import { colors, spacing } from '@/theme';
+
+const ORBIT_RX = 90;
+const ORBIT_RY = 40;
+const ORBIT_DURATION = '12s';
+const ORBIT_STEPS = 36;
+
+const PLANETS = [
+  { color: colors.danger, name: 'Mars', size: 44 },
+  { color: colors.primary, name: 'Venus', size: 60 },
+  { color: colors.primaryDark, name: 'Jupiter', size: 78 },
+];
+
+const MAX_PLANET_SIZE = Math.max(...PLANETS.map((planet) => planet.size));
+const PLANE_WIDTH = 2 * ORBIT_RX + MAX_PLANET_SIZE;
+const PLANE_HEIGHT = 2 * ORBIT_RY + MAX_PLANET_SIZE;
+const CENTER_X = PLANE_WIDTH / 2;
+const CENTER_Y = PLANE_HEIGHT / 2;
+
+function makeOrbit(offsetDeg: number, size: number) {
+  const frames: Record<string, { left: number; top: number }> = {};
+  for (let step = 0; step <= ORBIT_STEPS; step++) {
+    const percent = ((step / ORBIT_STEPS) * 100).toFixed(4);
+    const angle = ((offsetDeg + (360 * step) / ORBIT_STEPS) * Math.PI) / 180;
+    frames[`${percent}%`] = {
+      left: CENTER_X + ORBIT_RX * Math.cos(angle) - size / 2,
+      top: CENTER_Y + ORBIT_RY * Math.sin(angle) - size / 2,
+    };
+  }
+  return css.keyframes(frames);
+}
+
+const ORBITS = PLANETS.map((planet, index) =>
+  makeOrbit((360 / PLANETS.length) * index, planet.size)
+);
+
+export default function Planets() {
+  return (
+    <Screen>
+      <Scroll contentContainerStyle={styles.content} withBottomBarSpacing>
+        <Section
+          description="Three differently sized planets orbit the screen center on a tilted (elliptical) path. Each planet's name is hidden until you press it, which activates its ':active' pseudo-selector; hovering enlarges it with a colored glow."
+          title="Planets">
+          <VerticalExampleCard
+            title="Press a planet to reveal its name"
+            code={`<Animated.View
+  style={{
+    // 0.02 not 0: iOS skips alpha<0.01 views in hit-testing
+    opacity: { default: 0.02, ':active': 1 },
+    transitionDuration: '200ms',
+  }}
+  onStartShouldSetResponder={() => true}>
+  <Text>{name}</Text>
+</Animated.View>`}
+            collapsedCode={`opacity: {
+  default: 0.02,
+  ':active': 1,
+},`}>
+            <Animated.View style={styles.stage}>
+              <Animated.View style={styles.orbitPlane}>
+                {PLANETS.map((planet, index) => (
+                  <Animated.View
+                    key={planet.name}
+                    style={[
+                      styles.orbiter,
+                      {
+                        animationDuration: ORBIT_DURATION,
+                        animationIterationCount: 'infinite',
+                        animationName: ORBITS[index],
+                        animationTimingFunction: 'linear',
+                      },
+                      {
+                        backgroundColor: planet.color,
+                        borderRadius: planet.size / 2,
+                        height: planet.size,
+                        width: planet.size,
+                        elevation: { ':hover': 12, default: 0 },
+                        shadowColor: planet.color,
+                        shadowOpacity: { ':hover': 0.9, default: 0 },
+                        shadowRadius: { ':hover': 18, default: 0 },
+                        transform: {
+                          ':hover': [{ scale: 1.1 }],
+                          default: [{ scale: 1 }],
+                        },
+                        transitionDuration: '200ms',
+                      },
+                    ]}>
+                    <Animated.View
+                      style={[
+                        styles.nameWrapper,
+                        {
+                          opacity: { ':active': 1, default: 0.02 },
+                          transitionDuration: '200ms',
+                        },
+                      ]}
+                      onStartShouldSetResponder={() => true}>
+                      <Text style={styles.name}>{planet.name}</Text>
+                    </Animated.View>
+                  </Animated.View>
+                ))}
+              </Animated.View>
+            </Animated.View>
+          </VerticalExampleCard>
+        </Section>
+      </Scroll>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: spacing.xs,
+  },
+  name: {
+    color: colors.white,
+    fontSize: 12,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  nameWrapper: {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  orbitPlane: {
+    height: PLANE_HEIGHT,
+    width: PLANE_WIDTH,
+  },
+  orbiter: {
+    position: 'absolute',
+    shadowOffset: { height: 0, width: 0 },
+  },
+  stage: {
+    alignItems: 'center',
+    height: PLANE_HEIGHT + spacing.xl,
+    justifyContent: 'center',
+  },
+});

apps/common-app/src/apps/css/examples/transitions/screens/pseudoSelectors/index.ts

@@ -1,21 +1,25 @@
 import Active from './Active';
+import ActiveBlocksRender from './ActiveBlocksRender';
 import ActiveDeepest from './ActiveDeepest';
 import ArbitraryWebSelectors from './ArbitraryWebSelectors';
 import Focus from './Focus';
 import FocusWithin from './FocusWithin';
+import Form from './Form';
 import Hover from './Hover';
 import HoverWithLoop from './HoverWithLoop';
 import PerStateTransitionConfig from './PerStateTransitionConfig';
-import Showcase from './Showcase';
+import Planets from './Planets';
 
 export default {
   Active,
+  ActiveBlocksRender,
   ActiveDeepest,
   ArbitraryWebSelectors,
   Focus,
   FocusWithin,
+  Form,
   Hover,
   HoverWithLoop,
   PerStateTransitionConfig,
-  Showcase,
+  Planets,
 };

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp

@@ -36,6 +36,12 @@ TransitionProperties CSSTransition::getProperties() const {
 folly::dynamic CSSTransition::run(jsi::Runtime &rt, CSSTransitionConfig &&config, const folly::dynamic &lastUpdates) {
   const auto timestamp = loop_->resolveTimestamp();
 
+  for (const auto &propertyName : pseudoLockedProperties_) {
+    config.changedPropertiesSettings.erase(propertyName);
+    config.changedProperties.erase(propertyName);
+    std::erase(config.removedProperties, propertyName);
+  }
+
   // CSSTransition owns routing: platform-routed props run immediately on the platform
   // transition; the loop-routed remainder is applied to the loop transition below.
   auto processed = platformTransitionProxy_->processConfig(std::move(config), routing_);
@@ -100,6 +106,10 @@ folly::dynamic CSSTransition::computeCurrentLoopStyle() {
   return loopTransition_->computeCurrentStyle(shadowNode_);
 }
 
+void CSSTransition::setPseudoLockedProperties(TransitionProperties properties) {
+  pseudoLockedProperties_ = std::move(properties);
+}
+
 void CSSTransition::cancel() {
   if (loopTransition_) {
     loop_->remove(loopTransition_);

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.h

@@ -55,6 +55,8 @@ class CSSTransition {
   folly::dynamic run(const PropertyValueDynamicDiffsMap &propertyDiffs, const folly::dynamic &lastUpdates);
   void cancel();
 
+  void setPseudoLockedProperties(TransitionProperties properties);
+
  private:
   const std::shared_ptr<const ShadowNode> shadowNode_;
   const std::shared_ptr<ViewStylesRepository> viewStylesRepository_;
@@ -63,6 +65,7 @@ class CSSTransition {
   Observer &observer_;
 
   CSSTransitionRouting routing_;
+  TransitionProperties pseudoLockedProperties_;
   std::unique_ptr<CSSPlatformTransition> platformTransition_;
   std::shared_ptr<CSSLoopTransition> loopTransition_;
 

packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.cpp

@@ -39,6 +39,14 @@ void CSSTransitionsRegistry::run(
   recordInitialUpdate(transition, initialUpdate);
 }
 
+void CSSTransitionsRegistry::setPseudoLockedProperties(const Tag viewTag, const TransitionProperties &properties) {
+  react_native_assert(UpdatesRegistryManager::isLockedByCurrentThread());
+  const auto it = registry_.find(viewTag);
+  if (it != registry_.end()) {
+    it->second->setPseudoLockedProperties(properties);
+  }
+}
+
 void CSSTransitionsRegistry::flushUpdates(UpdatesBatch &updatesBatch) {
   react_native_assert(UpdatesRegistryManager::isLockedByCurrentThread());
   const auto tags = std::exchange(updatedTags_, {});

packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.h

@@ -28,6 +28,8 @@ class CSSTransitionsRegistry : public UpdatesRegistry {
       CSSTransitionConfig &&config);
   void run(const std::shared_ptr<const ShadowNode> &shadowNode, const PropertyValueDynamicDiffsMap &propertyDiffs);
 
+  void setPseudoLockedProperties(Tag viewTag, const TransitionProperties &properties);
+
   void flushUpdates(UpdatesBatch &updatesBatch);
 #if REACT_NATIVE_VERSION_MINOR >= 85
   void flushUpdates(UpdatesBatchAnimatedProps &updatesBatch);