allowTouchOutside to true make the panel untouchable

[exneval]

Hey @enesozturk can you look on this one? Thanks in advance

<SwipeablePanel
        fullWidth
        isActive={showMore}
        onClose={() => setShowMore(false)}
        allowTouchOutside
        barStyle={{ width: 62 }}>

[enesozturk]

Hey @exneval, I will check it out asap. I in outside now. Thanks for feedback ✋🏽

[exneval]

@enesozturk Thanks, will wait

[enesozturk]

Hi @exneval, I tried your code and it looks ok with me. Here is what I render in example project's page;

render() {
    return (
      <SafeAreaView style={Styles.container}>
        <StatusBar barStyle="dark-content" />
        <Header title={'Examples'} />
        <List
          openDefaultPanel={this.openDefaultPanel}
          openSettingsPanel={this.openSettingsPanel}
          openAboutPanel={this.openAboutPanel}
          openConfigurationsPanel={this.openConfigurationsPanel}
          openDarkPanel={this.openDarkPanel}
        />
        <SwipeablePanel
          fullWidth
          isActive={this.state.isActive}
          onClose={() => this.setState({isActive: false})}
          allowTouchOutside
          barStyle={{width: 62}}>
          {this.state.content()}
        </SwipeablePanel>
      </SafeAreaView>
    );
  }

Could you also share where you are rendering SwipeablePanel? And are you sure you are using props correctly? Or maybe anything else you render inside the panel cause this?

[exneval]

hi @enesozturk , sorry for late reply, thanks for confirming my issue, I'll do more tests to see if this is valid or not,

Thanks in advance

[enesozturk]

Thank you man, have good coding. 🙌🏽

[islamouzou]

I have the same exact issue , i'm on expo project and this is my code , just like the example :

allowTouchOutside make the panel untouchable , please help !

     const Map = (props) => {
 

  const [panelProps, setPanelProps] = useState({
    fullWidth: true,
    openLarge: true,
    allowTouchOutside : true ,
    showCloseButton: true,
    onClose: () => closePanel(),
    onPressCloseButton: () => closePanel(),
    // ...or any prop you want
  });
  const [isPanelActive, setIsPanelActive] = useState(true);

  const openPanel = () => {
    setIsPanelActive(true);
  };

  const closePanel = () => {
    setIsPanelActive(false);
  };
  return (
    <View style={styles.container}>
    <Text style={styles.welcome}>Welcome to React Native!</Text>
    <Text style={styles.instructions}>To get started, edit App.js</Text>
    <SwipeablePanel {...panelProps} isActive={isPanelActive}>
     
    </SwipeablePanel>
  </View>
     
  );
};            

[enesozturk]

Which version are you using guys both React Native and rn-swipeable-panel?

[islamouzou]

Which version are you using guys both React Native and rn-swipeable-panel?

I'm on expo project : react native 0.61.4

"rn-swipeable-panel": "^1.1.0"

[islamouzou]

i solved the issue finally , in this part of your code you have to specify Panel height and not Full height

<Animated.View style={[ SwipeablePanelStyles.background, { backgroundColor: noBackgroundOpacity ? "rgba(0,0,0,0)" : "rgba(0,0,0,0.5)", height: allowTouchOutside ? "auto" : deviceHeight, width: deviceWidth, }, { height: allowTouchOutside ? PANEL_HEIGHT: PANEL_HEIGHT, }, ]} >

[enesozturk]

Hi @islamouzou. Great to here that. I will try and update the package asap. Thanks!

[nixolas1]

Hi, this is still a problem on android it seems. I have a mapbox map behind, not sure if that interferes. I tried setting the height to a specific height, but dosn't help. Only happens when allowTouchOutside: true,

Using RN 0.63.2, and swipable panel 1.2.1

Edit: It seems like it is because the parent view has height: auto on it, and the child panel element gets bugged with some position: absolute bugs. I fixed it by removing the parent element and the other background elements, so that could be a fix. (If allowTouchOutside: return Panel element only, else return parent, bg and panel)

[iffj]

@nixolas1 could you elaborate a little more, please? I'm having the exact same problem on android. What do you mean by removing the parent element and the other background elements?

[frankhn]

allowTouchOutside, Removes the backdrop??

@enesozturk Do we have a backdrop click handler.

 <>
            <SwipeablePanel
                fullWidth
                style={styles.container}
                isActive={active}
                closeOnTouchOutside
                // allowTouchOutside
                onlySmall={onlySmall}
                onClose={closeHandler}>
                {
                    children
                }
            </SwipeablePanel>
        </>
    )
}

[nixolas1]

@iffj I made a gist here with my current fork: https://gist.github.com/nixolas1/466c3f5d0d4bcaf76f7f6d52c9689e09 It has quite some more changes than the simple android fix, but you can see from it what to do. If I did it again I would fork the typescript file instead of the compiled version 🥇

[vrinch]

@iffj have you been able to find a fix for this? I am having the same issue with react native maps

[enesozturk]

Hey @iffj, did not the gist work for you?

[wish0ne]

I have exactly same issue. I cant't touch or close panel at all when allowTouchOutside is true.

const content = (
    <View>
      <Text style={styles.addressTitle}>building</Text>
      <View style={styles.row}>
        <Ionicons name="ios-location-sharp" color="#2099a3" size={20} />
        <Text style={styles.address}>address</Text>
      </View>
      <TouchableOpacity style={styles.okButton} onPress={goSelect}>
        <Text style={styles.okText}>OK</Text>
      </TouchableOpacity>
    </View>
  );

  return (
    <View style={styles.panel}>
      <SwipeablePanel
        isActive={props.isPanelActive}
        style={styles.information}
        showCloseButton={false}
        allowTouchOutside
        onlySmall
        fullWidth
        onClose={() => props.closePanel()}
      >
        {content}
      </SwipeablePanel>
    </View>
  );