React 19 & CMR v7 by cb-ekuersch · Pull Request #350 · coinbase/cds

cb-ekuersch · 2026-01-30T19:01:30Z

What changed? Why?

Root cause (required for bugfixes)

UI changes

iOS Old	iOS New
old screenshot	new screenshot

Android Old	Android New
old screenshot	new screenshot

Web Old	Web New
old screenshot	new screenshot

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5

automerge=false

- upgrade react eslint plugin - migrate CSF2 stories to CSF3 format (https://storybook.js.org/blog/storybook-csf3-is-here/)

… (due to react 19 hook behavior) in packages/common

…ackage migration done

…and react-spring types

…ance of react-test-renderer) and disable new react-hooks eslint rules for now

…ting packages

…ibility enginer and the now deprecated react-test-renderer

…ce ReactNode usage

…ment

package.json

…ript errors

…ementation

…y from react-test-renderer - remove jest-native from preset and package.json (deprecated in favor of RNTL built-in matchers) - migrate toHaveAccessibilityState to granular matchers (toBeChecked, toBeSelected, toBeDisabled) - convert Link.test.tsx prop tests to behavioral tests using mocked useWebBrowserOpener - skip InputStack.test.tsx prop forwarding tests (implementation details not testable via host elements) - replace ReactTestInstance type import in ProgressBar.test.tsx with RNTL-compatible type

…llow for patched React 19.1 versions

…ncorrect imports and update web unit test tests, following react downgrade in previous commit

- Add `{ includeHiddenElements: true }` to queries for elements with `accessibilityElementsHidden={true}` or `aria-hidden={true}` - Replace `UNSAFE_queryAllByType(Pressable)` implementation detail tests with behavioral tests using `fireEvent.press` - Update NativeEventEmitter mock to return subscription objects with `.remove()` method for KeyboardAvoidingView compatibility - Replace deprecated `SafeAreaView` from react-native with `react-native-safe-area-context` in Modal components - Refactor useAppState tests to use `jest.spyOn` instead of `jest.doMock` with dynamic imports - Change `.toBe()` to `.toContainEqual()` for style array comparisons - Use regex patterns for partial text matching with `toHaveTextContent` - Update `.parent` to `.parent.parent` for correct element traversal - Remove animated style assertions that no longer work with reanimated 4.x - Drop tests requiring complex Platform/StatusBar native module mocking - Drop deprecated CellMedia component tests using UNSAFE_getByType(Image) - Update expected tooltip position values after calculation changes - Fix `fireEvent.click` to `fireEvent.press` in React Native tests Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Ran CMRv7 setup command to set compatible version deps and resolved failing yarn constraints check * remove odd react-dom peer dep on common package * Add new yarn constraint to force dev deps on peer deps and fix all yarn constraints & improve clarity of errors reported from consistent version numbers constraint * remove unused peer desps of cds-mobile * new app: test-expo for mobile testing with build scripts for easy ios and android simulator testing and options to build for release as well

#376)

… to edge android displays

apps/mobile-app/package.json

libs/docusaurus-plugin-docgen/package.json

packages/common/package.json

packages/mobile-visualization/jest/workletsMock.js

cb-ekuersch · 2026-02-09T17:54:56Z

packages/mobile-visualization/src/chart/text/ChartText.tsx

      switch (paragraphAlignment) {
        case TextAlign.Center:
          // For center-aligned text, account for half the width
-          minOffset = Math.min(...rects.map((rect) => rect.x - rect.width / 2));


@hcopp to look into this

packages/mobile/jest/setup.js

packages/mobile/src/alpha/select/DefaultSelectControl.tsx

packages/mobile/src/cells/__tests__/ContentCell.test.tsx

packages/mobile/src/cells/Cell.tsx

packages/mobile/src/controls/__tests__/CheckboxCell.test.tsx

packages/mobile/src/controls/__tests__/RadioCell.test.tsx

packages/mobile/src/media/RemoteImageGroup.tsx

packages/mobile/src/system/AndroidNavigationBar.tsx

cb-ekuersch · 2026-02-09T18:20:15Z

packages/mobile/src/tabs/Tabs.tsx


  if (previousActiveTabRect.current !== activeTabRect) {
    previousActiveTabRect.current = activeTabRect;
+    // TODO: writing to shared value during render causes a reanimated warning which we have to suppress in jest setup


is this still happening?

packages/mobile/src/typography/Text.tsx

package.json

packages/web/src/cells/Cell.tsx

…mples screen

* fix edge to edge display issues for Tour component * Reimplement mobile stepper animations with reanimated and change to timing based animation to match motion spec from designs

cb-ekuersch added 13 commits January 26, 2026 17:53

bump react and react-dom package versions

12711db

- upgrade storybook (storybook@latest upgrade)

d882124

- upgrade react eslint plugin - migrate CSF2 stories to CSF3 format (https://storybook.js.org/blog/storybook-csf3-is-here/)

Update react-is (common) and resolve type issues & unit test failures…

d1a9325

… (due to react 19 hook behavior) in packages/common

Upgrade react testing library and replace outdated imports - common p…

2c99bb3

…ackage migration done

WIP - web

560874f

fix issue not using flat config

5e6f48d

Unblock react upgrade with workaround for incompatible framer-motion …

8d99027

…and react-spring types

Finish resolving typescript errors, fix unit tests (removing one inst…

7d15258

…ance of react-test-renderer) and disable new react-hooks eslint rules for now

disable one more new react lint rule and upgrade various react-suppor…

3c6e207

…ting packages

mock incompatibility issues with react-native testing library, access…

b2eaf26

…ibility enginer and the now deprecated react-test-renderer

fix web-visualization type errors

7f542e5

update return type of Modal render function to align with best practi…

91e653e

…ce ReactNode usage

remove test react18 app due to difficulty testing in isolated environ…

42797cb

…ment

cb-ekuersch changed the title ~~React 19~~ React 19 & CMR v7 Jan 30, 2026

cb-ekuersch commented Jan 30, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

cb-ekuersch commented Jan 30, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

cb-ekuersch commented Jan 30, 2026

View reviewed changes

package.json Show resolved Hide resolved

cb-ekuersch commented Jan 30, 2026

View reviewed changes

package.json Outdated Show resolved Hide resolved

begin bumping react native dependencies and address cds-mobile typesc…

94c4c26

…ript errors

cb-ekuersch force-pushed the react-19 branch from 082ac8b to 94c4c26 Compare January 30, 2026 23:51

remove react native a11y testing engine and replace with our own impl…

2618040

…ementation

cb-ekuersch force-pushed the react-19 branch from 6797787 to 8dc4969 Compare January 31, 2026 06:28

cb-ekuersch force-pushed the react-19 branch from 8dc4969 to 1e305ec Compare February 1, 2026 18:04

cb-ekuersch added 6 commits February 1, 2026 10:48

Pin RN vesrion and Update react versions for RN compat. Patch RN to a…

9799adb

…llow for patched React 19.1 versions

Move testing library dependencies to individual packages to prevent i…

563d9a0

…ncorrect imports and update web unit test tests, following react downgrade in previous commit

fix incorrect testing library import in mobile package

0a26367

sync mobile dep versions

5483bfb

fix broken RN patch and finish upgrade of mobile-vis

388f722

cb-ekuersch force-pushed the react-19 branch from ec18db9 to 7681da4 Compare February 6, 2026 04:40

cb-ekuersch and others added 6 commits February 6, 2026 15:38

Safely acceess and merge customer refs

cc26046

fix yarn constraints

51aaf34

remove useStatusBarHeight and swtich to using safe area context insets (

e039796

#376)

deprecate outdated statusbar logic

5a3ceba

setup mocks for react-native-worklets and fix bug in tooltip for edge…

572b29a

… to edge android displays

update versions referenced in mobile docs component metadata

8d81762