React StrictMode warnings with animated SVG components

[JeremyAlexander]

Description

react-native-svg version: 15.8.0
react-native-reanimated version: 3.16.1
React Native version: 0.76.9
Platform: iOS/Android (development mode)

Problem

Using Animated.createAnimatedComponent() with react-native-svg components generates StrictMode warnings:

Warning: findHostInstance_DEPRECATED is deprecated in StrictMode. findHostInstance_DEPRECATED was passed an instance of Path which is inside StrictMode.

Minimal Reproducible Example

import React from 'react';
import { View } from 'react-native';
import Animated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated';
import Svg, { Path, Circle } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);
const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function App() {
  const progress = useSharedValue(0.5);
  
  const animatedProps = useAnimatedProps(() => ({
    strokeDashoffset: progress.value * 100,
  }));

  return (
    <View style={{ flex: 1 }}>
      <Svg width="200" height="200">
        <AnimatedPath
          d="M 10 80 Q 95 10 180 80"
          stroke="blue"
          strokeWidth="3"
          fill="none"
          animatedProps={animatedProps}
        />
        <AnimatedCircle
          cx="100"
          cy="100"
          r="20"
          fill="red"
          animatedProps={animatedProps}
        />
      </Svg>
    </View>
  );
}

Expected Behavior

No StrictMode warnings when using animated SVG components.

Actual Behavior

Console is flooded with findHostInstance_DEPRECATED warnings for each animated SVG element.

Stack Trace

in RNSVGPath (created by Path)
in Path (created by AnimatedComponent(Path))
in AnimatedComponent(Path) (created by Path)

Additional Context

• Warnings only appear in development with StrictMode enabled
• Production builds are unaffected
• Components function correctly despite warnings
• Issue affects any SVG component wrapped with Animated.createAnimatedComponent()

Workaround

Suppress warnings in development:

if (__DEV__) {
  const originalWarn = console.warn;
  console.warn = (...args) => {
    if (typeof args[0] === 'string' && args[0].includes('findHostInstance_DEPRECATED is deprecated in StrictMode')) {
      return;
    }
    originalWarn.apply(console, args);
  };
}

Environment

{
  "react": "18.3.1",
  "react-native": "0.76.9",
  "react-native-svg": "15.8.0",
  "react-native-reanimated": "3.16.1"
}

Steps to reproduce

. Create a new React Native project with StrictMode enabled
2. Install dependencies:

npm install react-native-svg react-native-reanimated

3. Create a component using animated SVG elements:

   import React from 'react';
   import { View } from 'react-native';
   import Animated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated';
   import Svg, { Path, Circle } from 'react-native-svg';
   
   const AnimatedPath = Animated.createAnimatedComponent(Path);
   const AnimatedCircle = Animated.createAnimatedComponent(Circle);
   
   export default function App() {
     const progress = useSharedValue(0.5);
     
     const animatedProps = useAnimatedProps(() => ({
       strokeDashoffset: progress.value * 100,
     }));
   
     return (
       <View style={{ flex: 1 }}>
         <Svg width="200" height="200">
           <AnimatedPath
             d="M 10 80 Q 95 10 180 80"
             stroke="blue"
             strokeWidth="3"
             fill="none"
             animatedProps={animatedProps}
           />
           <AnimatedCircle
             cx="100"
             cy="100"
             r="20"
             fill="red"
             animatedProps={animatedProps}
           />
         </Svg>
       </View>
     );
   }

4. Run the app in development mode
5. Check the console/Metro logs

Expected Behavior

No StrictMode warnings when using animated SVG components.

Actual Behavior

Console is flooded with findHostInstance_DEPRECATED warnings for each animated SVG element.

Snack or a link to a repository

snack

SVG version

15.8.0

React Native version

0.76.9

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[JeremyAlexander]

Not sure if a snack would help, as it's a dev mode specific issue. I have no actual issues in production.