gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.8k stars 121 forks source link

KeyboardAvoidingView cannot take effect in Actionsheet when set the useRNModal true #1910

Open lukerlv opened 8 months ago

lukerlv commented 8 months ago

Description

KeyboardAvoidingView cannot take effect in Actionsheet when set the useRNModal true. Another problem, the zIndex cannot take effect too.

CodeSandbox/Snack link

No response

Steps to reproduce

<Actionsheet isOpen={show} onClose={onClose} zIndex={9999} useRNModal>
      <KeyboardAvoidingView
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
      <ActionsheetBackdrop />
      <ActionsheetContent h={isLandscape ? '80%' : 350} backgroundColor={'#EFF2FB'} alignItems={'center'} zIndex={9999} borderTopLeftRadius={0} borderTopRightRadius={0}>
        <Input
            w={100}
            variant="outline"
            size="sm"
            isDisabled={false}
            isInvalid={false}
            isReadOnly={false}
          >
            <InputField
              keyboardType="numeric"
              returnKeyType="done"
              fontSize={13} py={0} textAlign={'right'}/>
          </Input>
      </ActionsheetContent>
      </KeyboardAvoidingView>
</Actionsheet>

gluestack-ui Version

1.0.30

Platform

Other Platform

No response

Additional Information

No response

surajahmed commented 8 months ago

@lukerlv Thanks for reporting this. We'll have a look.