Numbers are not shown if parent is initially invisible.

[pjc0247]

https://stackblitz.com/edit/react-qnmoya?file=src/App.js

• WorkingModal => works
• Modal => does not work

[pjc0247]

i'm not sure, but seems like same issue with https://github.com/heyman333/react-animated-numbers/issues/26

[heyman333]

Thank you I will check it

[pjc0247]

Seems like stackblitz link is broken

here is my code:

import React, { useEffect, useState } from "react";
import Num from 'react-animated-numbers';
import "./style.css";

const Modal = () => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setShow(true);
    }, 500);
  }, []);

  return (
    <div
      style={{ transform: show ? 'scale(1)' : 'scale(0)' }}
    >
      <Num animateToNumber={12} />
    </div>
  );
};

export default function App() {
  return (
    <div>
      <Modal />
    </div>
  );
}

[heyman333]

I think this causes error. going to fix it asap

// utils
function getIsElementVisible({ viewPortHeight, elem }) {
  if (!elem?.getBoundingClientRect) {
    return false;
  }

  const { top: rectTop, bottom: rectBottom } = elem.getBoundingClientRect();

  return rectTop > 0 && rectBottom < viewPortHeight;
}

[heyman333]

hello @pjc0247 could you test again with latest version? I modified problematic code

[pjc0247]

@heyman333 seems like still not working

here is my code: https://stackblitz.com/edit/react-ezscqq?file=src%2FApp.js

[heyman333]

@pjc0247 Thank you for your kind feedback! could you check it with lateset version 0.12.2 again?

[pjc0247]

@heyman333 I think the issue still exists.

I created a fork of the above example (with the latest package) https://stackblitz.com/edit/react-yxxp5y?file=src%2FApp.js,package.json,src%2Findex.js