Skip to content

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

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"
  },

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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