refactor!: remove deprecated targets, native support, and the react-spring umbrella (#2526)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: Copilot

.changeset/pre.json

@@ -9,14 +9,10 @@
     "@react-spring/mock-raf": "10.1.1",
     "@react-spring/parallax": "10.1.1",
     "@react-spring/rafz": "10.1.1",
-    "react-spring": "10.0.4",
     "@react-spring/shared": "10.1.1",
     "@react-spring/types": "10.1.1",
-    "@react-spring/konva": "10.1.1",
-    "@react-spring/native": "10.1.1",
     "@react-spring/three": "10.1.1",
-    "@react-spring/web": "10.1.1",
-    "@react-spring/zdog": "10.1.1"
+    "@react-spring/web": "10.1.1"
   },
   "changesets": []
 }

.changeset/remove-deprecated-targets.md

@@ -0,0 +1,9 @@
+---
+'@react-spring/web': major
+---
+
+refactor!: remove deprecated targets and the `react-spring` umbrella
+
+Removes the deprecated `@react-spring/native`, `@react-spring/konva`, and `@react-spring/zdog` targets (along with the React Native hook variants), plus the `react-spring` umbrella package. Install a target directly — `@react-spring/web` or `@react-spring/three`.
+
+For React Native, use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) — its springs run on the UI thread, unlike react-spring's JS-thread engine.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -29,9 +29,6 @@ body:
       options:
         - label: '`@react-spring/web`'
         - label: '`@react-spring/three`'
-        - label: '`@react-spring/native`'
-        - label: '`@react-spring/konva`'
-        - label: '`@react-spring/zdog`'
   - type: input
     attributes:
       label: What version of react-spring are you using?

.specify/memory/constitution.md

@@ -55,7 +55,7 @@ The library is organised in strict bottom-up layers:
 - The umbrella package MUST contain only re-exports — no logic.
 
 **Rationale**: This is the load-bearing contract that lets the same animation engine
-power web, native, three, konva, and zdog without bifurcating code. Any cross-layer
+power web and three without bifurcating code. Any cross-layer
 shortcut taken once propagates indefinitely.
 
 ### II. Target-Agnostic Core

CLAUDE.md

@@ -39,15 +39,12 @@ Strict isolation: `node_modules` is non-hoisted, so a workspace can only `import
 
 ## Architecture
 
-The library is a layered monorepo. Read packages bottom-up — each layer is target-agnostic until you reach `targets/*`.
+The library is a layered monorepo. Read packages bottom-up — each layer is target-agnostic until you reach `targets/*`. There is no umbrella package: consumers install a target directly (`@react-spring/web` or `@react-spring/three`).
 
 ```
-                react-spring (umbrella, re-exports all targets)
-                       │
-       ┌───────────────┼───────────────┬─────────┬─────────┐
-   targets/web   targets/native   targets/three  konva   zdog
-       │              │               │
-       └──────────────┴───────────────┘
+          targets/web     targets/three
+              │                 │
+              └────────┬────────┘
                        │
               packages/core    ─── declarative API: hooks, components, SpringValue, Controller, SpringRef
                        │
@@ -68,9 +65,8 @@ The library is a layered monorepo. Read packages bottom-up — each layer is tar
   - `applyAnimatedValues(node, props)` — push the latest values to the platform's native node.
   - `createAnimatedStyle(style)` — wrap the `style` prop.
   - `getComponentProps(props)` — filter props before forwarding (e.g. web drops `scrollTop`/`scrollLeft`).
-- **`@react-spring/core`** — platform-agnostic spring engine. `SpringValue` (single animated value), `Controller` (group of springs), `SpringRef` (imperative handle), `Interpolation`. Public hooks/components live under `src/hooks` and `src/components`. Hooks with native variants ship a `.native.ts` sibling (`useInView.native.ts`, `useResize.native.ts`, `useScroll.native.ts`) that React Native picks up via Metro's platform extensions.
+- **`@react-spring/core`** — platform-agnostic spring engine. `SpringValue` (single animated value), `Controller` (group of springs), `SpringRef` (imperative handle), `Interpolation`. Public hooks/components live under `src/hooks` and `src/components`.
 - **Targets** — thin adapters. Each `targets/<name>/src/index.ts` follows the same template: `Globals.assign(...)`, define `primitives`, build a host via `createHost(primitives, { applyAnimatedValues, ... })`, then `export const animated = host.animated` and `export * from '@react-spring/core'`. To add an `animated.X` shorthand for a new element, add it to that target's `primitives.ts`.
-- **`react-spring`** (umbrella) — depends on every target and only re-exports. Don't add logic here.
 - **`@react-spring/parallax`** — extra component layered on `@react-spring/web`. Its `test/` folder is the Vite app the E2E project serves and drives (`tests/e2e/parallax.spec.ts`).
 
 ### Where animation values flow

README.md

@@ -10,11 +10,11 @@
 <br>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/react-spring" target="_blank">
-    <img src="https://img.shields.io/npm/v/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
+  <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank">
+    <img src="https://img.shields.io/npm/v/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" />
   </a>
-  <a href="https://www.npmjs.com/package/react-spring" target="_blank">
-    <img src="https://img.shields.io/npm/dm/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
+  <a href="https://www.npmjs.com/package/@react-spring/web" target="_blank">
+    <img src="https://img.shields.io/npm/dm/@react-spring/web.svg?style=flat&colorA=000000&colorB=000000" />
   </a>
   <a href="https://discord.gg/AXfNsGx64f" target="_blank">
     <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord">
@@ -42,7 +42,7 @@ const styles = useSpring({
 
 Just a small bit about us:
 
-- **Cross-Platform**: We support `react-dom`, `react-native`, `react-three-fiber`, `react-konva` & `react-zdog`.
+- **Cross-Platform**: We support `react-dom` and `react-three-fiber`.
 - **Versatile**: Be declarative with your animations or if you prefer, imperative.
 - **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well.
 
@@ -53,10 +53,10 @@ There's a lot more to be had! Give it a try and find out.
 ### ⚡️ Jump Start
 
 ```shell
-# Install the entire library
-npm install react-spring
-# or just install your specific target (recommended)
+# Install the target you need
 npm install @react-spring/web
+# or, for react-three-fiber
+npm install @react-spring/three
 ```
 
 ```jsx

docs/app/components/HomeBlocks/HomeBlockTarget.tsx

@@ -24,22 +24,6 @@ const webHtml = /* html */ `<div data-line="1" class="highlight-line" data-highl
 </div><div data-line="14" class="highlight-line" data-highlighted="false"><span class="token punctuation">}</span>
 </div>`
 
-const nativeHtml = /* html */ `<div data-line="1" class="highlight-line" data-highlighted="true"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> animated<span class="token punctuation">,</span> useSpring <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@react-spring/native'</span>
-</div><div data-line="2" class="highlight-line" data-highlighted="false">
-</div><div data-line="3" class="highlight-line" data-highlighted="false"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
-</div><div data-line="4" class="highlight-line" data-highlighted="false">  <span class="token keyword">const</span> <span class="token punctuation">{</span> x <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSpring</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-</div><div data-line="5" class="highlight-line" data-highlighted="false">    <span class="token keyword module">from</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="6" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-</div><div data-line="7" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="8" class="highlight-line" data-highlighted="false">    to<span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="9" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-</div><div data-line="10" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="11" class="highlight-line" data-highlighted="false">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</div><div data-line="12" class="highlight-line" data-highlighted="false">
-</div><div data-line="13" class="highlight-line" data-highlighted="true">  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>animated.View</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> x <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
-</div><div data-line="14" class="highlight-line" data-highlighted="false"><span class="token punctuation">}</span>
-</div>`
-
 const threeHtml = /* html */ `<div data-line="1" class="highlight-line" data-highlighted="true"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> animated<span class="token punctuation">,</span> useSpring <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@react-spring/three'</span>
 </div><div data-line="2" class="highlight-line" data-highlighted="false">
 </div><div data-line="3" class="highlight-line" data-highlighted="false"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
@@ -56,39 +40,7 @@ const threeHtml = /* html */ `<div data-line="1" class="highlight-line" data-hig
 </div><div data-line="14" class="highlight-line" data-highlighted="false"><span class="token punctuation">}</span>
 </div>`
 
-const konvaHtml = /* html */ `<div data-line="1" class="highlight-line" data-highlighted="true"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> animated<span class="token punctuation">,</span> useSpring <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@react-spring/konva'</span>
-</div><div data-line="2" class="highlight-line" data-highlighted="false">
-</div><div data-line="3" class="highlight-line" data-highlighted="false"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
-</div><div data-line="4" class="highlight-line" data-highlighted="false">  <span class="token keyword">const</span> <span class="token punctuation">{</span> x <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSpring</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-</div><div data-line="5" class="highlight-line" data-highlighted="false">    <span class="token keyword module">from</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="6" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-</div><div data-line="7" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="8" class="highlight-line" data-highlighted="false">    to<span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="9" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-</div><div data-line="10" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="11" class="highlight-line" data-highlighted="false">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</div><div data-line="12" class="highlight-line" data-highlighted="false">
-</div><div data-line="13" class="highlight-line" data-highlighted="true">  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>animated.Rect</span> <span class="token attr-name">x</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>x<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
-</div><div data-line="14" class="highlight-line" data-highlighted="false"><span class="token punctuation">}</span>
-</div>`
-
-const zdogHtml = /* html */ `<div data-line="1" class="highlight-line" data-highlighted="true"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> animated<span class="token punctuation">,</span> useSpring <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@react-spring/zdog'</span>
-</div><div data-line="2" class="highlight-line" data-highlighted="false">
-</div><div data-line="3" class="highlight-line" data-highlighted="false"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
-</div><div data-line="4" class="highlight-line" data-highlighted="false">  <span class="token keyword">const</span> <span class="token punctuation">{</span> x <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useSpring</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
-</div><div data-line="5" class="highlight-line" data-highlighted="false">    <span class="token keyword module">from</span><span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="6" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
-</div><div data-line="7" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="8" class="highlight-line" data-highlighted="false">    to<span class="token operator">:</span> <span class="token punctuation">{</span>
-</div><div data-line="9" class="highlight-line" data-highlighted="false">      x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
-</div><div data-line="10" class="highlight-line" data-highlighted="false">    <span class="token punctuation">}</span><span class="token punctuation">,</span>
-</div><div data-line="11" class="highlight-line" data-highlighted="false">  <span class="token punctuation">}</span><span class="token punctuation">)</span>
-</div><div data-line="12" class="highlight-line" data-highlighted="false">
-</div><div data-line="13" class="highlight-line" data-highlighted="true">  <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>animated.Ellipse</span> <span class="token attr-name">diameter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>x<span class="token punctuation">}</span></span> <span class="token punctuation">/&gt;</span></span>
-</div><div data-line="14" class="highlight-line" data-highlighted="false"><span class="token punctuation">}</span>
-</div>`
-
-const dataFixtures = [webHtml, nativeHtml, threeHtml, konvaHtml, zdogHtml]
+const dataFixtures = [webHtml, threeHtml]
 
 export const HomeBlockTarget = () => {
   const [index, setIndex] = useState(0)
@@ -129,13 +81,10 @@ export const HomeBlockTarget = () => {
           href: '/docs/concepts/targets',
         }}
       >
-        <p>Choose from our five targets:</p>
+        <p>Choose from our active targets:</p>
         <ul className={list}>
           <li>web</li>
-          <li>native</li>
           <li>three</li>
-          <li>konva</li>
-          <li>zdog</li>
         </ul>
         <p>
           Missing a target you want? Request we add it or create it yourself

docs/app/routes/docs._index.mdx

@@ -54,7 +54,7 @@ v10 introduced the move to React 19 and brought a breaking change to the SpringC
 
 before:
 ```tsx
-import { SpringContext } from 'react-spring'
+import { SpringContext } from '@react-spring/web'
 
 ...
 <SpringContext ...>
@@ -63,7 +63,7 @@ import { SpringContext } from 'react-spring'
 
 now:
 ```tsx
-import { SpringContextProvider } from 'react-spring'
+import { SpringContextProvider } from '@react-spring/web'
 
 ...
 <SpringContextProvider ...>