Several Panels in the same app influence each other

StefanoCremona commented 5 years ago

Issue Description

I used the Panel in 2 different screens. The state of the first one influence the state of other one and viceversa.

Steps to Reproduce / Code Snippets / Screenshots

Put the sample code from rn-sliding-up-panel github page in 2 different screens of you app (View A, View B). Drag the Screen-A panel to a random position. Go to the Screen-B. The panel is in the actual position of the Screen-A. Hide the Screen-B panel then go to the Screen-A. The panel is hidden.

Environment

Version: All
React Native version: ^0.57.7
Platform(s) (iOS, Android, or both?): both
Device info (Simulator/Device? OS version? Debug/Release?): All

octopitus commented 5 years ago

Panel has defaultProps with animatedValue is an instance of Animated.Value. Thus it's possible that 2 panels sharing the same state. You have to declare 2 animated value in this case.


// Panel A
<SlidingUpPanel animatedValue={new Animated.Value(0)} />

// Panel B
</SlidingUpPanel animatedValue={new Animated.Value(0)} />

StefanoCremona commented 5 years ago

Thank you @octopitus for the suggestion. This is a good point, actually. Re defining the Animated at rendering time didn't work properly but it's the starting point for this solution that works for me. In each view initialise the Panel as it follows:

_animatedValue = new Animated.Value(0)

render() {
    return (
        <SlidingUpPanel animatedValue={this._animatedValue} />
    )
}

octopitus / rn-sliding-up-panel