The state of a page is not reflected on the second half about react-flip-page HOT 8 CLOSED

Hey,

I will take a look at your issues this weekend.

Thank you for reporting.

from react-flip-page.

I have experimented something and I think it may be related to this.
It happens when I have an nested image in the page which is positioned on the middle line, the image is splitted in two :

<FlipPage>
    <Page1>
</FlipPage>

Page1 :

render() {
        return ( 
        <div>
            <img className="pageBackground" src={require("../../img/Page.png")} />
            <Draggable>
                <Bowl id="page-bowl" />
            </Draggable>
        </div>
        )
    }

I have here used the Draggable component to make the bowl drag from react-draggable, and when I move it, the bowl disappear when it goes on the other half :

Do you have an idea how to deal with this ?

Thank you.

from react-flip-page.

As you might have found it if you read the code, we need to split the page in two halves so that they can flip separately.

I am afraid there is no simple way to deal with what you are trying to do. Apart maybe to temporarily disable swiping on the component (via disableSwipe property) when you are dragging your bowl.

Keep in mind this is some PoC, and should be used to display content (texts, images and such). Complicated operations like those might conflict with the behaviour of react-flip-page.

from react-flip-page.

I disabled the swipe completely and it doesn't work.
Is it possible to deal with it in css z-index ?
One of the half could be under the other one, so that we only interact with the original component and not the clone. I am not sure if it could works.

from react-flip-page.

Even with swipe disabled, there would still need a clone as the two halves are always needed.

from react-flip-page.

Maybe it could be done with render props ?
But I am not sure how ...

from react-flip-page.

Hi,
What do you think about this issue ?

I have been able to make it work by making the state on an upper level then the pages.
I have used for this redux, but it is a lot of code for some use cases...

from react-flip-page.

I’m afraid I won’t be able to give you a positive answer for this… This is a very specific use case, and the repo is somehow a showcase. It cannot cover all of the use cases.

from react-flip-page.