Panel isn't on top - zIndex issue

[hoc-ht]

Issue Description

I think there is a zIndex issue. I tried a very simple example, but it seems the Show Panel button is overlap the panel.

Steps to Reproduce / Code Snippets / Screenshots

import React from 'react';
import {View, Button, Text} from 'react-native';

import SlidingUpPanel from 'rn-sliding-up-panel';

const styles = {
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center'
  }
};

class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title='Show panel' onPress={() => this._panel.show()} />
        <SlidingUpPanel ref={c => this._panel = c}>
          <View style={styles.container}>
            <Text>Here is the content inside panel</Text>
            <Button title='Hide' onPress={() => this._panel.hide()} />
          </View>
        </SlidingUpPanel>
      </View>
    )
  }
}

export default MyComponent;

---

Environment

• Version: 2.4.2
• React Native version: 0.62.2
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator - Android 9

[octopitus]

Move the <Button title='Show panel' onPress={() => this._panel.show()} /> to below the panel should fix the issue. The reason is Button component on Android has elevation which sometime mess up with zIndex.

[benjamindulau]

Same here. Moving the button below the panel doesn't resolve the issue. Other ideas? 🙄

Rendering the button in a different view works though.

The following works:

<SafeAreaView style={styles.wrapper}>
    <StatusBar style="auto" translucent/>
    <View style={styles.container}>
        <Button title='Show panel' onPress={this.handleClickShowPanel} />
    </View>
    <SlidingUpPanel ref={this.panelRef} backdropOpacity={0.75} allowDragging={false}>
        <View style={styles.panelContainer}>
            <Text>Here is the content inside panel</Text>
            <Button title='Hide' onPress={this.handleClickHidePanel} />
        </View>
    </SlidingUpPanel>
</SafeAreaView>

Compared to:

<SafeAreaView style={styles.wrapper}>
    <StatusBar style="auto" translucent/>
    <View style={styles.container}>
        <Button title='Show panel' onPress={this.handleClickShowPanel} />
        <SlidingUpPanel ref={this.panelRef} backdropOpacity={0.75} allowDragging={false}>
            <View style={styles.panelContainer}>
                <Text>Here is the content inside panel</Text>
                <Button title='Hide' onPress={this.handleClickHidePanel} />
            </View>
        </SlidingUpPanel>
    </View>
</SafeAreaView>

[elmcapp]

Im having same issue. I have a card component that covering the panel.

I move components around a stated but does not help. This only happens on Android. Also I notice on android the sliding is not smooth when using this._panel. only smooth slide when using finger to slide.

The main problem is that the slider is not on top when using with android

[elmcapp]

I figured out a workaround. I don't like it but it works. Two options

option 1 move the slider component to the top level of your app

Option 2 is to use a Provider and Portal which will bring any component that is wrap up to the top level making it appear over all other components.

I did this using React Native Paper Portal and Provider https://callstack.github.io/react-native-paper/portal.html