Pages blank until after flipped

[saricden]

Hey there, encountering an issue with react-flip-page.

My render code is as follows:

<div className="view read-story">
  <FlipPage responsive={true} orientation="horizontal">

    <div className="book-title">
      <div>
        <p>Stuff on the left.</p>                  
      </div>

      <header className="story-title" style={{
        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.75)),url(${storyData.smallCoverURL})`
      }}>
        <h1>{storyData.title}</h1>
      </header>
    </div>

    {
      lrPages.map((lr, i) => {
        return (
          <article key={"p"+i} className="book-page">
            <div>
              <p>{lr.l}</p>
            </div>

            <div>
              <p>{lr.r}</p>
            </div>
          </article>
        );
      })
    }

  </FlipPage>
  
</div>

The flip effect works perfectly, except that when navigating between any of the lrPages (the <article> tags), they are blank until the user releases the page and the animation completes, at which point the content for the page appears.

Anyone seen anything like this before? Thanks!

[saricden]

Update:

I think I've zeroed in on the problem. It appears the .map() function is throwing it off, because instead of returning JSX elements directly as children, it returns them as an array of children, which seems to be where the bug is coming from.

Works:

Doesn't work:

[darenju]

I have merged your PR and have published a new version of the package 1.6.3 that contains your fix.

Can you please confirm it works with this version?

Thank you!

[saricden]

@darenju On it 👍

[saricden]

Hey @darenju I installed version 1.6.3 via yarn add react-flip-page but it appears the node_module directory doesn't contain the dist directory, so when I boot up my app it throws:

Module not found: Can't resolve 'react-flip-page' in '...'

Is this something on your end?

[saricden]

If I copy over the dist directory to node_modules/react-flip-page all is well.

[darenju]

Sorry, I had forgotten to build before publishing. react-flip-page@1.6.4 should work normally.

Also, there are the tests to fix because of the addition of .flat() :

TypeError: this.props.children.flat is not a function

But this shouldn’t be a problem when installing.

Edit: Tests are now fixed. Moved every call to .flat() in a new method flatChildren() :

flatChildren() {
  return Array.prototype.flat.call(this.props.children);
}

[saricden]

@darenju Awesome, you're the man! Thanks for fixing the tests

[saricden]

Works perfect in my implementation! 🍻

[darenju]

And thank you for reporting & fixing this issue you found. It helps the component get better!

[saricden]

👍 My pleasure, this component has been hugely helpful for me on the app I'm working on!