2 sliding panels interfere with each other

[JunWangMaster]

    <SlidingUpPanel ref={c => this._panel1 = c}
        draggableRange={{top: 180, bottom:0}}
        animatedValue={new Animated.Value(0)}
        backdropOpacity={0.2}
        friction={0.2} >
      <View style={{
            flex: 1,
            backgroundColor: 'green',
            alignItems: 'flex-start',
            justifyContent: 'flex-start',
            borderRadius: 20,
          }}>
        <Text>panel1 backdrop not operatable</Text>

      </View>
    </SlidingUpPanel> 
    <SlidingUpPanel ref={c => this._panel2 = c}
        draggableRange={{top: 50, bottom:0}}
        animatedValue={new Animated.Value(0)}
        allowDragging={false}
        backdropOpacity={0}
        friction={0.1} >
      <View style={{
            flex: 1,
            backgroundColor: 'red',
            alignItems: 'flex-start',
            justifyContent: 'flex-start',
          }}>
        <Text>panel2 backdrop operatable</Text>
      </View>
    </SlidingUpPanel>

Take above two sliding panel for example. The desired behavior is: _panel1 backdrop opacity is 0.2 where backdrop is not operatable (cannot click button in backdrop), a click anywhere in the backdrop should dismiss the panel. _panel2 backdrop opacity is 0, where backdrop is operatable, buttons in the backdrop is clickable.

when there's only one of those two, each of them works perfectly, the problem is when they're both needed in a page. So when I first show _panel1, it works well, dismiss it by click backdrop, and show _panel2, it also works well, backdrop operatable, it can be dismissed by calling _panel.hide(), and now if I show _panel1 again here, the backdrop is still grayed out, but it is operatable now, which is undesired.

Any solutions ? workaround ?

[gruckion]

Found solution here.

https://github.com/octopitus/rn-sliding-up-panel/issues/132

const ParentComponent: React.FunctionComponent = () => { // Declare an array for your refs let refs = Array.from({length: 2}, () => useRef(null)) [...] // Use it like this const handler = (): void => refs[0].current?.show()

return ( <SlidingUpPanel ref={refs[0]} animatedValue={new Animated.Value(0)} /> <SlidingUpPanel ref={refs[1]} animatedValue={new Animated.Value(0)} /> ) }