-
-
Notifications
You must be signed in to change notification settings - Fork 426
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 MyLoader
What 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