How to render two “interactive.view” correctly?

[madeinquant]

Implementing an additional “interactive.view” in MapPanel.js, let’ say “panel A” and “panel B”. I expected to show them in mutual exclusively (A is shown and B is hidden, vice versa) when onPress is triggered. Unfortunately, not same as I expected. Initially, I render “panel A” before “panel B”, the “panel A” has shown but “panel B” is hidden. Even triggered onPress to change the position of “panel B” but it is still hidden. Please comment how to render two “interactive.view” correctly.

[gigin-flexott]

I have implemented the same feature using snapto method..

this.refs[interactable].snapTo({ index: 0 });

[madeinquant]

@gigin-flexott would you explain in an example?

[gigin-flexott]

Panel A

<Interactable.View
          verticalOnly={true}
          ref={'panelA'}
          animatedValueY={this._deltaY}
          animatedValueX={this._deltaX}
          snapPoints={[{ y: 0   }, { y: 1000 }]}
          initialPosition={{ x: 0, y: 1000 }}
        >

By default panelA has two snap points. Index 0 for showing and 1 for hiding

 <Interactable.View
          verticalOnly={true}
          ref={'panelB'}
          animatedValueY={this._deltaY}
          animatedValueX={this._deltaX}
          snapPoints={[{ y: 0   }, { y: 1000 }]}
          initialPosition={{ x: 0, y: 1000 }}
        > 

On press of button you can dynamically change the position of any panel by calling
this.refs['panelA'].snapTo({ index: 0 });

[madeinquant]

@gigin-flexott Thank you.

[madeinquant]

@gigin-flexott 'panelA' can be shown or be hidden. However, 'panelB' cannot be shown.

[gigin-flexott]

from my above code..you can display panel A by calling

this.refs['panelA'].snapTo({ index: 0 })

and hide it by

this.refs['panelA'].snapTo({ index: 1 })

[madeinquant]

@gigin-flexott Yes, 'panelA' can be hidden. However, 'panelB' cannot be shown or be hidden.

[gigin-flexott]

@madeinquant
this.refs['panelB'].snapTo({ index: 1 })
will make PanelB hidden

[madeinquant]

@gigin-flexott panelA or panelB cannot be coexist. The first panel can only be shown (in this case, it is 'panelA'), 'panelB' cannot be shown. When I trigger the onPress function. I expected to show them in mutual exclusively (A is shown and B is hidden, vice versa). Unfortunately, it is not same as I expected.

 <Interactable.View
        verticalOnly={true}
        ref={ref => { panelA = ref; }}
        boundaries={{ top: -300 }}
        snapPoints={[{ y: 0   }, { y: 1000 }]}
         initialPosition={{ x: 0, y: 1000 }}
         animatedValueX={this._deltaX}
        animatedValueY={this._deltaY}>
--------------------------------------
 <Interactable.View
        verticalOnly={true}
        ref={ref => { panelB = ref }}
        boundaries={{ top: -300 }}
       snapPoints={[{ y: 0   }, { y: 1000 }]}
       initialPosition={{ x: 0, y: 1000 }}
        animatedValueX={this._deltaX}
        animatedValueY={this._deltaY}>
---------------------------------------
const onPressButton = () => {
    this.panelA.snapTo({ index: 1 });
    this.panelB.snapTo({ index: 0 });
}