Skip to content

Animation stops working after first render when using React.StrictMode #339

@saleheen-dev

Description

@saleheen-dev

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.

Image
  • 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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions