Transparent <SlidingUpPanel> gets rendered after a async funtion in a SlidePanel

[Geret Wessling]

Issue Description

I have a Problem that every time i try to call a async function like useState() or something else in my SildePanel, a Transparent View gets rendered in front of all other rendered Views before.

In my Snippet is a Button which opens a SlidePanel. If i call the useState function from the Input the SlidingUpPanel gets rendered in front of the first Button, the problem is that i cant click on it anymore (see picture below).

I dont know how to handle the Problem if anyone has a suggestion i would appreciate that.

Steps to Reproduce / Code Snippets / Screenshots

//npm install @rneui/themed @rneui/base
//npm install --save rn-sliding-up-panel

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Dimensions, Animated } from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';
import { useState } from 'react';
import { Button, Input } from '@rneui/themed';

export default function App() {

  const { height } = Dimensions.get("window");
  PanelValue = new Animated.Value(0);
  const [test, settest] = useState('');

  return (
    <View style={styles.container}>
      <Button
        onPress={() => {[this._loginPanel.show()]}}
        buttonStyle={styles.button}
        title='Open Panel'
        containerStyle={{paddingBottom: 10}}
      >
      </Button>

    <SlidingUpPanel
        ref={c => (this._loginPanel = c)}
        animatedValue={this.PanelValue}
        friction={0.8}
        allowDragging={false}
        draggableRange={{top:height, bottom:0}}
        height={height + 20}
        >
      <View style={styles.panel}>
        <Input
            placeholder='Email'
            inputStyle={styles.input}
            leftIcon={{name: 'mail-outline'}}
            value={test}
            onChangeText={(text) => settest(text)}
            />
        <Button
          onPress={() => {[this._loginPanel.hide()]}}
          buttonStyle={styles.button}
          title='Close Panel'
          containerStyle={{paddingBottom: 10}}
          >
        </Button>
      </View>
    </SlidingUpPanel>
</View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  
    input: {
      backgroundColor: 'rgba(255, 255, 255, 1)',
      borderRadius: 25,
      margin: 4,
      paddingLeft: 10,
      fontSize: 20,
    },
  
    button: {
      height: 45,
      backgroundColor: 'rgba(0, 48, 135, 1)',
      borderRadius: 25,
    },
  
    panel: {
      backgroundColor: 'rgba(0, 0, 0, 1)',
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      alignContent: 'center',
    }
  });

---

Environment

• Version: 2.4.6
• React Native version: 9.6.7
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Android Simulator and IOS Device