Panel does not come up on android

[Wugka]

Issue Description

Panel does not come up on android when I click on the button "Show panel". It does come up on ios. Yours is the best sliding lib so far. Please guide me on this.

Steps to Reproduce / Code Snippets / Screenshots

const CCTVTab = () => {
  return (
    <React.Fragment>
      <View
        style={{
          flex: 1,
          marginTop: 30,
          flexDirection: 'column',
          justifyContent: 'center',
          alignContent: 'center',
        }}>
        <Button title="Show panel" onPress={() => _panel.show(300)} />
      </View>

        <SlidingUpPanel
          style={{borderTopLeftRadius: 10}}
          ref={c => (_panel = c)}>
          <View
            style={{
              flex: 1,
              backgroundColor: 'black',
              alignItems: 'center',
              borderTopRightRadius: 18,
              borderTopLeftRadius: 18,
            }}>
            <Text>Header</Text>
            <Text>Content</Text>
            <Button title="Hide" onPress={() => _panel.hide()} />
          </View>
        </SlidingUpPanel>

    </React.Fragment>
  );
};

---

Environment

• Version: rn-sliding-up-panel : "^2.4.0"
• React Native version: "0.61.5"
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, Debug

[drb1]

I am also stuck in same problem.It works well on ios but not in android..

[afrojuju1]

same here. The panel does not slide down on android

[octopitus]

@Wugka which emulator device were you using? I've tried on a Nexus 5X with API 29 and real devices (Pixel 4, Samsung s10) it worked just fine.

[octopitus]

@afrojuju1 @drb1 Which device did you use to test?

[Wugka]

@Wugka which emulator device were you using? I've tried on a Nexus 5X with API 29 and real devices (Pixel 4, Samsung s10) it worked just fine.

Thanks for ther response,

I'm using Pixel 2 API 27. With above code, It does not work on Android, but there's a change in opacity when I click the button. I've tried Nexus 5X API 29 and the outcome is still the same. If yours work then there must be something wrong with my code.

On the left is Nexus 5X API 29 and on the right is Pixel 2 API 27.

[drb1]

I have also checked in google nexus emulator but now i have removed the package and used another one.Thank you for your response.

[octopitus]

@Wugka Have you tried testing without the navigator? I suspect the navigator library (react-navigation?) somehow mess up the style of the panel.

If that doesn't work, try replacing:

- <SlidingUpPanel
-   style={{borderTopLeftRadius: 10}}
-   ref={c => (_panel = c)}>
+ <SlidingUpPanel
+   containerStyle={{flex: undefined, alignSelf: undefined}}
+   ref={(c) => (_panel = c)}>

This basically is to remove the flex properties of the panel.

[lukemcgregor]

I've had this on android also when using react-navigation drawers. It looks like its to do with content that is positioned off the screen and then translated back onto the screen. I imagine what's happening is that android is optimising the render away and then it's null as it gets moved into view.

I don't know why this could possibly help (but I found it while debugging), but if you set borderColor: 'transparent' on the screen view the SlidingUpPanel is in it seems to avoid the issue. eg:

  <View style={{ flex: 1, borderColor: 'transparent' }}>
    //other stuff
    <SlideUpPanel. .... />
 </View>

Touching borders must do something to the render optimisation, go figure...

[bakerac4]

I've tried everything listed and nothing has seemed to help. Im using a real Samsung Galaxy 9+

[ghobashy]

same issue, anyone found a solution?

[ghobashy]

I removed the parent <View> tag and that fixed my problem. Maybe that would help someone.

[Wugka]

@ghobashy I do not have parent <View> tag on my <SlidingUpPanel>as you can see in my example. Can you please share what you did to make it work ?

[hasanej]

anyone found the solution yet? just using this package and stumble into the same issue