chore: remove deprecated native konva and zdog targets

Author: Copilot

.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?

README.md

@@ -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.
 

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.concepts.targets.mdx

@@ -21,7 +21,7 @@ export const meta = formatFrontmatterToRemixMeta(frontmatter)
 
 When a target is discussed it is sometimes in reference to the platform, e.g. you create a client side react application
 chances are it's targeted at the browser. However, if you write a server-side application then you're targeting node.
-Whilst `react-spring` does support the targets `web` and `native` and _can_ be server-side rendered. This is not the type
+Whilst `react-spring` does support the targets `web` and `three` and _can_ be server-side rendered. This is not the type
 of target we're referring to.
 
 A target in `react-spring` is a `react reconciler` a.k.a `react renderer`. That is, a custom renderer that can process different
@@ -31,10 +31,7 @@ a `reconciler`, it handles DOM elements _exclusively_ and understands how to app
 Therefore, in `react-spring` we have the following targets that correspond to their respective reconcilers:
 
 - `web` - `react-dom`
-- `native` - `react-native`
 - `three` - `react-three-fiber`
-- `konva` - `react-konva`
-- `zdog` - `react-zdog`
 
 To download a target you can use the `@react-spring/[target]` format:
 
@@ -80,7 +77,7 @@ interface HostConfig {
 
 Whilst the entire config object is wrapped in `Partial`, meaning that the keys are optional, realistically `applyAnimatedValues` is
 required. This is the logic for how the `Animated` components apply their `SpringValues`, this typically would come from the reconciler
-either attached to the `instance` in the case of `react-konva` or an exported function like in `@react-three/fiber`.
+either attached to the `instance` or an exported function like in `@react-three/fiber`.
 
 The `createAnimatedStyle` key of the config object by default takes wraps the `style` prop in an `AnimatedObject` instance which has
 generic rules on applying keys. In the case of `@react-spring/web`, we pass a custom function which is how we support shorthands for

docs/app/routes/docs.guides.testing.mdx

@@ -219,4 +219,4 @@ module.exports = {
 }
 ```
 
-This could be applicable to any target you're using e.g. `@react-spring/native`.
+This could be applicable to any target you're using e.g. `@react-spring/three`.

package.json

@@ -74,24 +74,20 @@
     "@vitest/coverage-v8": "^4.1.7",
     "flush-microtasks": "1.0.1",
     "husky": "9.1.7",
-    "konva": "10.3.0",
     "oxfmt": "0.51.0",
     "oxlint": "1.66.0",
     "playwright": "^1.60.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-konva": "^19.2.4",
     "react-native": ">=0.85.3",
-    "react-zdog": "1.2.2",
     "spec.ts": "1.1.3",
     "three": "0.184.0",
     "tsdown": "0.22.0",
     "turbo": "2.9.14",
     "typescript": "6.0.3",
     "vite": "8.0.14",
     "vitest": "^4.1.7",
-    "vitest-browser-react": "^2.2.0",
-    "zdog": "1.1.3"
+    "vitest-browser-react": "^2.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/core/src/hooks/index.ts

@@ -8,7 +8,7 @@ export * from './useTransition'
 
 /**
  * This doesn't feel the right place for this? Should it be isolated to the `web` package?
- * But then it wouldn't be available in `konva` or `three`...
+ * But then it wouldn't be available in `three`...
  */
 export * from './useScroll'
 export * from './useResize'

packages/react-spring/README.md

@@ -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.
 

packages/react-spring/package.json

@@ -48,11 +48,8 @@
   },
   "dependencies": {
     "@react-spring/core": "workspace:~",
-    "@react-spring/konva": "workspace:~",
-    "@react-spring/native": "workspace:~",
     "@react-spring/three": "workspace:~",
-    "@react-spring/web": "workspace:~",
-    "@react-spring/zdog": "workspace:~"
+    "@react-spring/web": "workspace:~"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",