keyboardAvoidingView not working with Actionsheet on ios

[faorte]

Description

Trying your example for keyboardAvoidingView when you are using ActionSheet but it does not work on ios

CodeSandbox/Snack link

No response

Steps to reproduce

1. add example code from your website to project:

function App() { const [showActionsheet, setShowActionsheet] = React.useState(false) const handleClose = () => setShowActionsheet(!showActionsheet) return ( <> <Button onPress={handleClose}> <ButtonText>Open</ButtonText> </Button> <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined} > <Actionsheet isOpen={showActionsheet} onClose={handleClose}> <ActionsheetBackdrop /> <ActionsheetContent maxHeight="75%"> <ActionsheetDragIndicatorWrapper> <ActionsheetDragIndicator /> </ActionsheetDragIndicatorWrapper> <VStack w="$full" p={20}> <HStack justifyContent="center" alignItems="center" space="md"> <Box w={50} h="$full" px="$2" borderWidth={1} borderStyle="solid" borderColor="$borderLight300" rounded="$sm" > <Image source={{ uri: "https://i.imgur.com/UwTLr26.png" }} flex={1} resizeMode="contain" /> </Box> <VStack flex={1}> <Text fontWeight="$bold">Mastercard</Text> <Text>Card ending in 2345</Text> </VStack> </HStack> <FormControl mt={36}> <FormControlLabel> <FormControlLabelText> Confirm security code </FormControlLabelText> </FormControlLabel> <Input w="$full"> <InputSlot> <InputIcon as={LeadingIcon} ml="$2" /> </InputSlot> <InputField placeholder="CVC/CVV" /> </Input> <Button onPress={handleClose} mt={20}> <ButtonText>Pay $1000</ButtonText> </Button> </FormControl> </VStack> </ActionsheetContent> </Actionsheet> </KeyboardAvoidingView> </> ) }

2. toggle keyboard.
3. its not moving the actionsheet properly

gluestack-ui Version

1.1.1

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[surajahmed]

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

[anup-a]

Hi @surajahmed , any update on this. Facing the same issue. Thanks

[surajahmed]

@anup-a We're working on it. Please eject the components and try replacing ScrollView with View for Actionsheet content and wrap it with KeyboardAvoidingView for now. Please follow https://gluestack.io/ui/docs/home/theme-configuration/customizing-theme/eject-library

[altick]

Is there any estimate of when we can expect this to be fixed? We are also experiencing this issue.

[surajahmed]

We're working on it. Hope to push the fix in the coming release. Thanks for your patience.

[leogaletti]

@surajahmed

The problem apparently is with the Overlay.

It is possible to modify Actionsheet.tsx to listen to the Keyboard keyboardDidShow event and thus add a marginBottom: 200 when opening the keyboard.

File path: node_modules/@gluestack-ui/actionsheet/src/Actionsheet.tsx

An example, how to implement the solution:

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardVisible(true);
    });
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardVisible(false);
    });

    return () => {
      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  return (
<Overlay
          isOpen={visible}
          onRequestClose={handleClose}
          isKeyboardDismissable={isKeyboardDismissable}
          useRNModal={useRNModal}
          // @ts-ignore
          style={{
            ...overlayStyle,
            ...(Platform.OS === 'ios' && { marginBottom: isKeyboardVisible ? 200 : undefined }),
          }}
        >
          <ActionsheetContext.Provider value={contextValue}>
            <StyledActionsheet
              ref={ref}
              style={[StyleSheet.absoluteFill]}
              {...(props as T)}
            >
              {children}
            </StyledActionsheet>
          </ActionsheetContext.Provider>
        </Overlay>
  );

This worked for me. It's not the best solution, but it works!

Sorry for my english.