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"
},
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
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 fromreact-content-loader/nativeexecute only once during the initial render and then stop indefinitely. The animation does not restart or loop as expected.Console Warning
The following warning appears in the console when using the ContentLoader in StrictMode:
Which versions of react-content-loader, and which browser are affected by this issue?