razorpay
diff --git a/‎.changeset/blade-rn-motion-presets-impl.md‎
Lines changed: 5 additions & 0 deletions b/‎.changeset/blade-rn-motion-presets-impl.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎packages/blade/.storybook/react-native/main.tsx‎
Lines changed: 0 additions & 5 deletions b/‎packages/blade/.storybook/react-native/main.tsx‎
Lines changed: 0 additions & 5 deletions
diff --git a/‎packages/blade/.storybook/react-native/storybook.requires.ts‎
Lines changed: 3 additions & 3 deletions b/‎packages/blade/.storybook/react-native/storybook.requires.ts‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎packages/blade/metro.config.js‎
Lines changed: 29 additions & 5 deletions b/‎packages/blade/metro.config.js‎
Lines changed: 29 additions & 5 deletions
diff --git a/‎packages/blade/scripts/patch-storybook-hermes.js‎
Lines changed: 39 additions & 0 deletions b/‎packages/blade/scripts/patch-storybook-hermes.js‎
Lines changed: 39 additions & 0 deletions
diff --git a/‎packages/blade/src/components/AnimateInteractions/AnimateInteractions.native.tsx‎
Lines changed: 60 additions & 8 deletions b/‎packages/blade/src/components/AnimateInteractions/AnimateInteractions.native.tsx‎
Lines changed: 60 additions & 8 deletions
diff --git a/‎packages/blade/src/components/AnimateInteractions/AnimateInteractions.stories.tsx‎
Lines changed: 5 additions & 10 deletions b/‎packages/blade/src/components/AnimateInteractions/AnimateInteractions.stories.tsx‎
Lines changed: 5 additions & 10 deletions
diff --git a/‎packages/blade/src/components/AnimateInteractions/AnimateInteractionsProvider.tsx‎
Lines changed: 11 additions & 0 deletions b/‎packages/blade/src/components/AnimateInteractions/AnimateInteractionsProvider.tsx‎
Lines changed: 11 additions & 0 deletions
diff --git a/‎packages/blade/src/components/AnimateInteractions/__tests__/AnimateInteractions.native.test.tsx‎
Lines changed: 82 additions & 0 deletions b/‎packages/blade/src/components/AnimateInteractions/__tests__/AnimateInteractions.native.test.tsx‎
Lines changed: 82 additions & 0 deletions
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(rn): add React Native support for motion presets — Fade, Move, Slide, Scale, Morph, Stagger, and AnimateInteractions (built on the native BaseMotion engine)
@@ -8,17 +8,12 @@ const WEB_ONLY_STORIES = [
   'DatePicker',
   'DetailedView',
   'DrawerExamples',
-  'Fade',
   'ListView',
   'ListViewFigmaExample',
   'Menu',
-  'Morph',
-  'Move',
   'Settings',
   'SideNav',
-  'Slide',
   'RazorSense',
-  'Stagger',
   'TableEditableCellAPI',
   'TableFigmaExample',
   'TableStripedRows',
 
@@ -10,13 +10,13 @@ const normalizedStories = [
   {
     titlePrefix: "",
     directory: "./src",
-    files: "**/!(_KitchenSink|*.test|MotionRecipes|BottomNav|ChatInput|DetailedView|DrawerExamples|Fade|ListView|ListViewFigmaExample|Menu|Morph|Move|Settings|SideNav|Slide|RazorSense|Stagger|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|CreationView|TopNav|LightBox|Preview)*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:_KitchenSink|[^/]*?\.test|MotionRecipes|BottomNav|ChatInput|DetailedView|DrawerExamples|Fade|ListView|ListViewFigmaExample|Menu|Morph|Move|Settings|SideNav|Slide|RazorSense|Stagger|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|CreationView|TopNav|LightBox|Preview))[^/]*?)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    files: "**/!(_KitchenSink|*.test|MotionRecipes|BottomNav|DatePicker|DetailedView|DrawerExamples|ListView|ListViewFigmaExample|Menu|Settings|SideNav|RazorSense|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|NativeChatMessageDemo|CreationView|TopNav|LightBox|Preview)*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:_KitchenSink|[^/]*?\.test|MotionRecipes|BottomNav|DatePicker|DetailedView|DrawerExamples|ListView|ListViewFigmaExample|Menu|Settings|SideNav|RazorSense|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|NativeChatMessageDemo|CreationView|TopNav|LightBox|Preview))[^/]*?)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
     // @ts-ignore
     req: require.context(
       '../../src',
       true,
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:_KitchenSink|[^/]*?\.test|MotionRecipes|BottomNav|ChatInput|DetailedView|DrawerExamples|Fade|ListView|ListViewFigmaExample|Menu|Morph|Move|Settings|SideNav|Slide|RazorSense|Stagger|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|CreationView|TopNav|LightBox|Preview))[^/]*?)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:_KitchenSink|[^/]*?\.test|MotionRecipes|BottomNav|DatePicker|DetailedView|DrawerExamples|ListView|ListViewFigmaExample|Menu|Settings|SideNav|RazorSense|TableEditableCellAPI|TableFigmaExample|TableStripedRows|Toast|Typography|ChatMessage|NativeChatMessageDemo|CreationView|TopNav|LightBox|Preview))[^/]*?)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
   },
   {
 
@@ -2,6 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
 
 /**
  * Metro configuration
@@ -10,10 +11,22 @@ const { withStorybook } = require('@storybook/react-native/metro/withStorybook')
  * @type {import('metro-config').MetroConfig}
  */
 
-const mocksDir = path.resolve(__dirname, '.storybook/react-native/mocks');
-const nodeModulesDir = path.resolve(__dirname, 'node_modules');
+const projectRoot = __dirname;
+const mocksDir = path.resolve(projectRoot, '.storybook/react-native/mocks');
+const nodeModulesDir = path.resolve(projectRoot, 'node_modules');
 const realNodeModulesDir = fs.realpathSync(nodeModulesDir);
 
+// Sibling git worktrees under `.claude/worktrees/*` share the same relative paths
+// (`src/components/Stagger/Stagger.native.tsx`, etc.). If Metro's haste map ever sees more than
+// one worktree it will pick an arbitrary copy (we observed LineChart's stub Stagger being
+// bundled while cwd was MotionPresets). Block every worktree except this one.
+const thisWorktreeName = path.basename(path.resolve(projectRoot, '../..')); // e.g. MotionPresets
+// Escape regex special characters in the worktree name so they're treated literally.
+const escapedWorktreeName = thisWorktreeName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const siblingWorktreesBlock = new RegExp(
+  `/\\.claude/worktrees/(?!${escapedWorktreeName}(?:/|$))[^/]+/`,
+);
+
 // Metro 0.76 doesn't fully support package.json "exports" for subpath imports.
 // Manually resolve subpath exports for storybook packages.
 const pkgJsonCache = new Map();
@@ -52,7 +65,10 @@ function resolveSubpathExport(moduleName) {
 const isWorktreeSymlink = realNodeModulesDir !== nodeModulesDir;
 
 const config = {
-  watchFolders: isWorktreeSymlink ? [realNodeModulesDir] : [nodeModulesDir],
+  projectRoot,
+  watchFolders: isWorktreeSymlink
+    ? [projectRoot, realNodeModulesDir]
+    : [projectRoot, nodeModulesDir],
   transformer: {
     unstable_allowRequireContext: true,
     getTransformOptions: async () => ({
@@ -63,6 +79,14 @@ const config = {
     }),
   },
   resolver: {
+    blockList: exclusionList([siblingWorktreesBlock, /\/__tests__\/.*/]),
+    // Disabled because this repo uses yarn workspaces with hoisted node_modules. Metro's
+    // hierarchical lookup would traverse parent directories and could resolve modules from
+    // sibling worktree node_modules (when running inside a `.claude/worktrees/*` symlink),
+    // picking up stale or incompatible copies. With `nodeModulesPaths` explicitly set above
+    // and `unstable_enableSymlinks: true`, Metro resolves all dependencies from the correct
+    // node_modules without needing parent-directory traversal.
+    disableHierarchicalLookup: true,
     unstable_enableSymlinks: true,
     nodeModulesPaths: [nodeModulesDir],
     resolverMainFields: ['react-native', 'browser', 'main'],
@@ -113,8 +137,8 @@ const config = {
   },
 };
 
-module.exports = withStorybook(mergeConfig(getDefaultConfig(__dirname), config), {
-  configPath: path.resolve(__dirname, '.storybook/react-native'),
+module.exports = withStorybook(mergeConfig(getDefaultConfig(projectRoot), config), {
+  configPath: path.resolve(projectRoot, '.storybook/react-native'),
   enabled: true,
   docTools: false,
 });
@@ -119,6 +119,45 @@ for (const file of allFiles) {
     "const rUnicodeLower = '[a-z]';",
   );
 
+  // Case 5: `new RegExp("…\p{…}…", "…u…")` string form.
+  // Minified Storybook browser chunks build these patterns dynamically (with mangled var
+  // names), so Case 2 (literal /…/ only) and Case 3 (matches specific var names) both miss
+  // them. Hermes rejects \p{} escapes even inside `new RegExp` with the `u` flag, so we
+  // neutralise them by pattern *content* and emit an ASCII-equivalent literal instead.
+  //
+  // **Limitation:** This uses content-based matching (`body.includes('\\p{Lu}')`) rather than
+  // identifying the source library. Any new RegExp with these Unicode properties from any
+  // library bundled into Storybook's browser chunks would be replaced with the es-toolkit
+  // CASE_SPLIT_PATTERN. The "Unknown \p{} pattern" fall-through below mitigates this for
+  // unrecognised patterns, but known patterns (Lu/Ll, ID_Start, ID_Continue) are matched by
+  // content alone. If a non-Storybook library starts using these exact patterns, add a more
+  // specific match (e.g. checking surrounding variable names or file origin) before this block.
+  content = content.replace(
+    /new RegExp\(\s*"((?:[^"\\]|\\.)*)"\s*(?:,\s*"([a-z]*)")?\s*\)/g,
+    (match, body, flags) => {
+      // `body` is the raw source between the quotes, so \p{ appears as the two chars "\\p{".
+      if (!body.includes('\\p{')) return match;
+      // ASCII fallbacks don't need the `u` flag (and keeping it would re-enable strict escapes).
+      const safeFlags = (flags || '').replace(/u/g, '');
+      // es-toolkit CASE_SPLIT_PATTERN (word/case splitting)
+      if (body.includes('\\p{Lu}') && body.includes('\\p{Ll}')) {
+        return `/[A-Z]?[a-z]+|[0-9]+|[A-Z]+(?![a-z])/${safeFlags}`;
+      }
+      // jsdoc-type-pratt-parser identifierStartRegex
+      if (body.includes('\\p{ID_Start}')) {
+        return `/[$_a-zA-Z]/${safeFlags}`;
+      }
+      // jsdoc-type-pratt-parser identifierContinueRegex
+      if (body.includes('\\p{ID_Continue}')) {
+        return `/[$_a-zA-Z0-9]/${safeFlags}`;
+      }
+      // Unknown \p{} pattern — leave it untouched rather than risk corrupting an unrelated
+      // library (zod, pdfjs, …) that shares node_modules with the web build. If a new
+      // Storybook-bundled pattern starts crashing Hermes, add an explicit branch above.
+      return match;
+    },
+  );
+
   if (content !== orig) {
     fs.writeFileSync(file, content);
     console.log('[patch-storybook-hermes] Patched:', file);
 
@@ -1,14 +1,66 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { AnimateInteractionsContext } from './AnimateInteractionsProvider';
 import type { AnimateInteractionsProps } from './types';
-import { Text } from '~components/Typography';
-import { throwBladeError } from '~utils/logger';
 
-const AnimateInteractions = (_props: AnimateInteractionsProps): React.ReactElement => {
-  throwBladeError({
-    message: 'AnimateInteractions is not yet implemented for native',
-    moduleName: 'AnimateInteractions',
-  });
+/**
+ * ## AnimateInteractions (native)
+ *
+ * AnimateInteractions is the utility preset that animates children when the parent is interacted
+ * with — the CSS `.parent:hover .child {}` analogue.
+ *
+ * On web this is driven by hover / focus-within (framer control propagation). Touch devices have
+ * neither hover nor DOM focus-within, so the closest analogue is **press-and-hold**: children
+ * animate while the parent is pressed (`onPressIn` → `'animate'`, `onPressOut` → `'exit'`), exactly
+ * mirroring web `onFocusWithin`/`onBlurWithin`.
+ *
+ * The parent does not self-animate. It publishes the interaction state through
+ * `AnimateInteractionsContext`; the shared `BaseMotion.native` engine reads `isInteracting` to
+ * drive every `on-animate-interactions` descendant. `motionTriggers` (hover / focus) is accepted
+ * for API parity but has no native meaning and is intentionally ignored.
+ *
+ * ### Known layout divergence from web
+ *
+ * On web, `AnimateInteractions` uses `BaseMotionEnhancerBox` which clones the child element and
+ * applies interaction handlers in-place (no extra DOM node). On native, we wrap children in a
+ * `<Pressable>` because React Native has no equivalent of DOM event delegation — `onPressIn` /
+ * `onPressOut` must be attached to a host component. This adds an extra `View` node to the layout
+ * tree, which may cause minor flex/layout differences versus web. Consumers porting layouts that
+ * depend on the enhancer not adding a wrapper should account for this extra nesting.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * <AnimateInteractions> // <-- press-and-hold this
+ *  <Box>
+ *    <Move motionTriggers={['on-animate-interactions']}> // <-- this animates in
+ *      <Box />
+ *    </Move>
+ *  </Box>
+ * </AnimateInteractions>
+ * ```
+ */
+const AnimateInteractions = ({
+  children,
+  // Accepted for cross-platform API parity; hover / focus don't exist on touch devices so this is
+  // intentionally ignored on native.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  motionTriggers = ['hover'],
+}: AnimateInteractionsProps): React.ReactElement => {
+  const [isInteracting, setIsInteracting] = React.useState(false);
 
-  return <Text>AnimateInteractions Component is not available for Native mobile apps.</Text>;
+  return (
+    <AnimateInteractionsContext.Provider
+      value={{ isInsideAnimateInteractionsContainer: true, isInteracting }}
+    >
+      <Pressable
+        onPressIn={() => setIsInteracting(true)}
+        onPressOut={() => setIsInteracting(false)}
+      >
+        {children}
+      </Pressable>
+    </AnimateInteractionsContext.Provider>
+  );
 };
 
 export { AnimateInteractions };
@@ -113,12 +113,7 @@ ShowOverlayOnImageHover.args = {
       elevation="midRaised"
       overflow="hidden"
     >
-      <img
-        src="https://live.staticflickr.com/65535/54142149265_a0cf25efa4_b.jpg"
-        width=""
-        height="300px"
-        alt="Hubble Takes a Look at Tangled Galaxies"
-      />
+      <Box width="300px" height="300px" backgroundColor="surface.background.gray.subtle" />
       <Fade motionTriggers={['on-animate-interactions']}>
         <Box
           display="flex"
@@ -173,11 +168,11 @@ ScaleOnParentHoverAndFocus.args = {
 
               <Box>
                 <Scale motionTriggers={['on-animate-interactions']}>
-                  <img
-                    src="https://live.staticflickr.com/65535/54142149265_a0cf25efa4_b.jpg"
-                    width=""
+                  <Box
+                    width="140px"
                     height="140px"
-                    alt="Hubble Takes a Look at Tangled Galaxies"
+                    backgroundColor="surface.background.gray.subtle"
+                    borderRadius="medium"
                   />
                 </Scale>
               </Box>
 
@@ -2,10 +2,21 @@ import React from 'react';
 
 type AnimateInteractionsContextType = {
   isInsideAnimateInteractionsContainer: boolean;
+  /**
+   * Native-only: current interaction state of the parent `AnimateInteractions` container.
+   *
+   * On native there is no hover / DOM focus-within, so `AnimateInteractions.native` publishes a
+   * press-and-hold flag here and the shared `BaseMotion.native` engine reads it to drive every
+   * `on-animate-interactions` descendant towards `'animate'` (interacting) or `'exit'` (idle).
+   *
+   * Web ignores this field — framer control propagation handles descendant animation there.
+   */
+  isInteracting?: boolean;
 };
 
 const AnimateInteractionsContext = React.createContext<AnimateInteractionsContextType>({
   isInsideAnimateInteractionsContainer: false,
+  isInteracting: false,
 });
 
 const useAnimateInteractions = (): AnimateInteractionsContextType => {
 
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { fireEvent } from '@testing-library/react-native';
+import { AnimateInteractions } from '../index';
+import renderWithTheme from '~utils/testing/renderWithTheme.native';
+import { Box } from '~components/Box';
+import { Fade } from '~components/Fade';
+import { Move } from '~components/Move';
+import { Text } from '~components/Typography';
+
+beforeAll(() => jest.spyOn(console, 'error').mockImplementation());
+afterAll(() => jest.restoreAllMocks());
+
+describe('<AnimateInteractions /> (native)', () => {
+  it('should render its children as expected', () => {
+    const { toJSON } = renderWithTheme(
+      <AnimateInteractions>
+        <Box>
+          <Text>Test</Text>
+          <Fade motionTriggers={['on-animate-interactions']}>
+            <Text>Reveal me</Text>
+          </Fade>
+        </Box>
+      </AnimateInteractions>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should wrap children in a Pressable interaction surface', () => {
+    const { UNSAFE_getByType: unsafe_getByType, getByText } = renderWithTheme(
+      <AnimateInteractions>
+        <Box>
+          <Text>Press me for magic</Text>
+          <Fade motionTriggers={['on-animate-interactions']}>
+            <Text>Reveal me</Text>
+          </Fade>
+        </Box>
+      </AnimateInteractions>,
+    );
+
+    expect(unsafe_getByType(Pressable)).toBeTruthy();
+    expect(getByText('Press me for magic')).toBeTruthy();
+  });
+
+  it('should drive descendants on press-and-hold without throwing', () => {
+    const { UNSAFE_getByType: unsafe_getByType, getByText } = renderWithTheme(
+      <AnimateInteractions>
+        <Box>
+          <Text>Press me</Text>
+          <Move motionTriggers={['on-animate-interactions']}>
+            <Text>I move in on interaction</Text>
+          </Move>
+        </Box>
+      </AnimateInteractions>,
+    );
+
+    const pressable = unsafe_getByType(Pressable);
+
+    // Press-and-hold → children animate to `'animate'`; release → back to `'exit'`.
+    expect(() => {
+      fireEvent(pressable, 'pressIn');
+      fireEvent(pressable, 'pressOut');
+    }).not.toThrow();
+
+    // Node stays mounted throughout the interaction (deep reanimated style assertions are brittle,
+    // so we assert render stability instead).
+    expect(getByText('I move in on interaction')).toBeTruthy();
+  });
+
+  it('should ignore motionTriggers on native (API parity only)', () => {
+    const { toJSON } = renderWithTheme(
+      <AnimateInteractions motionTriggers={['hover', 'focus']}>
+        <Box>
+          <Fade motionTriggers={['on-animate-interactions']}>
+            <Text>Reveal me</Text>
+          </Fade>
+        </Box>
+      </AnimateInteractions>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@razorpay/blade": minor
 +---
++
 +feat(rn): add React Native support for motion presets — Fade, Move, Slide, Scale, Morph, Stagger, and AnimateInteractions (built on the native BaseMotion engine)