- 
          
 - 
                Notifications
    
You must be signed in to change notification settings  - Fork 425
 
Open
Description
What did you do?
I installed react-content-loader v 7.1.1 and used example loader animation from https://skeletonreact.com/ for React Native
import React from "react"
import ContentLoader, { Rect, Circle, Path } from "react-content-loader/native"
const MyLoader = (props) => (
  <ContentLoader 
    speed={2}
    width={400}
    height={160}
    viewBox="0 0 400 160"
    backgroundColor="#f3f3f3"
    foregroundColor="#ecebeb"
    {...props}
  >
    <Rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> 
    <Rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> 
    <Rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> 
    <Rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> 
    <Rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> 
    <Circle cx="20" cy="20" r="20" />
  </ContentLoader>
)
export default MyLoaderWhat did you expect to happen?
The ContentLoader animation should continue to loop indefinitely, providing a smooth loading experience regardless of whether StrictMode is enabled.
What happened actually?
When wrapping a React Native application with React.StrictMode, animations from react-content-loader/native execute only once during the initial render and then stop indefinitely. The animation does not restart or loop as expected.
- Without StrictMode: Animation works correctly and loops continuously ✅
 - With StrictMode: Animation plays once during initial render, then stops completely ❌
 
Console Warning
The following warning appears in the console when using the ContentLoader in StrictMode:
findNodeHandle is deprecated in StrictMode. findNodeHandle was passed an instance of LinearGradient which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://react.dev/link/strict-mode-find-node
Which versions of react-content-loader, and which browser are affected by this issue?
"dependencies": {
    "expo": "53.0.20",
    "react": "19.0.0",
    "react-content-loader": "^7.1.1",
    "react-dom": "19.0.0",
    "react-native": "0.79.5",
    "react-native-svg": "15.11.2",
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/react": "~19.0.10",
    "eslint": "^9.25.0",
    "eslint-config-expo": "~9.2.0",
    "patch-package": "^8.0.0",
    "typescript": "~5.8.3"
  },Metadata
Metadata
Assignees
Labels
No labels